<!--
 * @Author: your name
 * @Date: 2022-03-25 13:46:23
 * @LastEditTime: 2022-08-25 17:02:07
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData.vue
-->
<template>
  <div class="chars-data">
    <TopCard v-if="windowInnerWidth>1100" :cardList="cardList"/>
    <TopCardZ v-else :cardList="cardList"/>
    <CzCard v-if="windowInnerWidth>1100" />
    <CzCardZ v-else />
    <Cg/>
    <Fmj/>
    <Tyx/>
  </div>
</template>

<script>
import TopCard from "./TopCard";
import TopCardZ from "./TopCardZ";
import CzCard from "./CzCard";
import CzCardZ from "./CzCardZ";
import Cg from "./Cg";
import Fmj from "./Fmj";
import Tyx from "./Tyx";
export default {
  name: "charsData",
  components: {
    TopCard,
    TopCardZ,
    CzCard,
    CzCardZ,
    Cg,
    Fmj,
    Tyx
  },
  data() {
    return {
      cardList: [
        { deviceName: "压力表", count: 11 },
        { deviceName: "流量计", count: 9 },
        { deviceName: "探测器", count: 1238 },
      ],
      deviceIconList: ["ylb", "llj", "tcq"],
      windowInnerWidth:0,
    };
  },
  created() {
    this.windowInnerWidth = window.innerWidth;
  },
};
</script>

<style lang="scss" scoped>
.chars-data {
  // padding: 26px 108px 0 88px;
  padding: 20px;
  padding-right: 50px;
}
</style>
