fix：设备管理看板

src/views/system/jbdHome/board/component/CarouselTabl.vue

@@ -0,0 +1,29 @@
+<template>
+  <div :class="$style.pieView">
+    <div style="height: 35px;line-height: 47px;text-align: left;padding-left: 10px;width: calc(100% - 10px) ;background-color: #06163f;opacity: 0.5;">标题</div>   
+    <div style="width:100%;display: inline-block;background-color: #06163f;">
+      <dv-scroll-board :config="info" style="width:50%;height:300px" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    return{
+    }
+  },
+  props:{
+    info:{
+      type:Object,
+      default:{}
+    }
+  },
+};
+</script>
+<style lang="scss" module>
+.pieView{
+  display: flex;
+  width: 100vw;
+}
+</style>

src/views/system/jbdHome/board/component/equipmentBoardTopcard.vue

@@ -0,0 +1,188 @@
+<template>
+  <div id="top-bar">
+    <div class="content">
+      <!-- <div class="title">设备信息情况</div> -->
+      <div class="bar">
+        <div v-for="(item, index) in topBarData" :key="index" class="item">
+          <div class="title">{{ item.title }}</div>
+          <div v-for="(v, i) in item.children" :key="i" class="box">
+            <div class="label">{{ v.label }}</div>
+            <div class="count">
+              <dv-digital-flop :config="v.data" class="flop" />
+              <div class="unit">{{ v.unit }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <dv-decoration-10 />
+  </div>
+</template>
+<script>
+export default {
+  name: "topBar",
+  props: {
+    info: {
+      type: Array,
+      default: [],
+    },
+  },
+  components: {},
+  watch: {
+    info(v) {
+      this.update();
+    },
+  },
+  data() {
+    return {
+      topBarData: [],
+      fontColor: [
+        "#d20962",
+        "#f47721",
+        "#7ac143",
+        "#00a78e",
+        "#00bce4",
+        "#7d3f98",
+        "#037ef3",
+        "#f85a40",
+        "#00c16e",
+        "#ffd900",
+        "#0cb9c1",
+        "#7552cc",
+      ],
+    };
+  },
+  created() {
+    this.update();
+  },
+  methods: {
+    //随机颜色
+    getRandom(minNum, maxNum) {
+      if (arguments.length === 1) {
+        return parseInt(Math.random() * minNum + 1, 10);
+      } else {
+        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+      }
+    },
+    // 数据更新
+    update() {
+      this.info.forEach((item) => {
+        item.children.forEach((i) => {
+          i.data = {
+            number: [i.value],
+            content: "{nt}",
+            textAlign: "center",
+            style: {
+              fill: this.fontColor[this.getRandom(0, 11)],
+              fontWeight: "bold",
+            },
+          };
+          console.log(i)
+          i.unit = i.danwei;
+        });
+      });
+      this.topBarData = JSON.parse(JSON.stringify(this.info));
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.content{
+  height: 90%;
+  background-color: rgba(6, 30, 93, 0.5);
+  // .title{
+  //   // width: 100%;
+  //   margin: 20px 2%;
+    
+  // }
+}
+.bar {
+  position: relative;
+  margin: 20px 2%;
+  height: 150px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: rgba(6, 30, 93, 0.5);
+  .item {
+    width: 20%;
+    // width: calc(100% / 13);
+    height: 60%;
+    padding: 12px 20px;
+    border-left: 5px solid rgb(6, 30, 93);
+    &:first-child {
+      width: 35%;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      .box {
+        width: 35%;
+      }
+    }
+    &:nth-child(2) {
+      width: 25%;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      .box {
+        width: 180px;
+      }
+    }
+    &:nth-child(3) {
+      width: 20%;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      .box {
+        width: 150px;
+      }
+    }
+    &:last-child {
+      width: 20%;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      .box {
+        width: 150px;
+      }
+    }
+    .title {
+      text-align: center;
+      font-size: 18px;
+      font-weight: bold;
+      margin-bottom: 20px;
+    }
+    .box {
+      display: inline-block;
+      width: 33%;
+      .label {
+        text-align: center;
+        font-size: 14px;
+      }
+      .count {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .flop {
+          width: 60px;
+          height: 40px;
+          font-size: 18px;
+        }
+        .unit {
+          margin-left: 10px;
+          box-sizing: border-box;
+        }
+      }
+    }
+  }
+}
+
+#top-bar {
+  height: 180px;
+}
+.dv-decoration-10 {
+  width: 96%;
+  margin: -7px 2% 0;
+  height: 5px;
+}
+</style>

src/views/system/jbdHome/board/component/getPieView.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="pieView">
+    <div style="height: 35px;line-height: 47px;text-align: left;padding-left: 10px;width: 390px;background-color: rgba(6,30,93,.5);">{{info.config.title||""}}</div>   
+    <div style="width:400px;height:300px;display: inline-block;background-color: rgba(6,30,93,.5);">
+      <div :id="info.config.idSelector" style="width:400px;height:300px;"> </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  data(){
+    return{
+    }
+  },
+  props:{
+    info:{
+      type:Object,
+      default:{}
+    }
+  },
+  mounted() {
+    let this_ = this;
+    this.$nextTick(()=>{
+      this_.getMiddleLeft();
+    })
+    
+  },
+  methods:{
+    getMiddleLeft(){ 
+      let chartDom = document.getElementById(this.info.config.idSelector);
+      const setEchartWH = {
+        //设置控制图表大小变量
+        width: 400,
+        height: 300,
+      };
+      var myChart = echarts.init(chartDom, null, setEchartWH);
+      var option;
+      option = {
+        title: {
+          subtext: '',
+          left: 'center',
+         
+          textStyle:{
+            color:"#fff"
+          }
+        },
+        color:this.info.color,
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'right',
+          textStyle:{
+            color: '#fff'
+          }
+        },
+        series: [{
+          type: 'pie',
+          radius: '50%',
+          
+          data:this.info.data,
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          }
+        }]
+      };
+      option && myChart.setOption(option);
+    },
+
+  }
+};
+</script>
+<style lang="scss" scoped>
+.pieView{
+  display: flex;
+  width: 100vw;
+}
+</style>

src/views/system/jbdHome/board/component/zhuzhuangtu.vue

@@ -0,0 +1,103 @@
+<template>
+  <div :class="$style.pieView">
+    <div style="height: 30px;line-height: 30px;text-align: left;padding-left: 10px;width: 390px;background-color: rgba(6,30,93,.5);">{{info.config.title}}</div>   
+    <div style="width:200px;height:300px;display: inline-block;background-color: rgba(6,30,93,.5);">
+      <div :id="info.config.idSelector" style="width:200px;height:300px;"> </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    info: {
+      type: Object,
+      default: {},
+    },
+  },
+  methods: {
+    getMiddleLeft() {
+      var chartDom = document.getElementById(this.info.config.idSelector);
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: this.info.xData,
+            interval: 1,
+            axisTick: {
+              alignWithLabel: true,
+            },
+            axisLabel: {
+              interval: 0,
+              rotate: 10
+            },
+            axisLine: {
+            lineStyle: {
+              color: "#fff",
+              width:1
+            }
+          }
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+          
+          axisLine: {
+            lineStyle: {
+              color: "#fff"
+            }
+          }
+        },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: this.info.data,
+            barWidth: 30,
+            label:{
+              show: true,
+              position: 'top',
+              color:"#fff"
+            },
+            itemStyle: {
+            normal: {
+                color: function(params) {
+                    var colorList = ['#5c7bd9', '#9fe080', '#ffdc60', '#ff7070','#7ed3f4', '#ff915a'];
+                    return colorList[params.dataIndex]
+                }
+            }
+        }
+          },
+          
+        ],
+      };
+      option && myChart.setOption(option);
+    },
+  },
+};
+</script>
+<style lang="scss" module>
+.pieView {
+  display: flex;
+  width: 100vw;
+}
+</style>

src/views/system/jbdHome/board/equipmentBoard.vue

@@ -1,92 +1,132 @@
 <template>
-  <div :class="$style.content">
+  <div class="content">
     <dv-full-screen-container>
       <!-- 头部内容 -->
-      <div :class="$style.header">
-        <div :class="$style.title">{{ titleName }}</div>
-        <dv-decoration-8 :class="$style.left" />
-        <dv-decoration-5 :class="$style.center" />
-        <dv-decoration-8 :class="$style.right" :reverse="true" />
-
-        <div :class="$style.time">
+      <div class="header">
+        <dv-decoration-8 class="left" />
+        <dv-decoration-5 class="center" />
+        <dv-decoration-8 class="right" :reverse="true" />
+        <div class="title">{{ titleName }}</div>
+        <div class="time">
           <span>月份：</span>
           <el-date-picker v-model="month" type="month" value-format="yyyy-MM" format="yyyy-MM" placeholder="日期选择" style="width: 120px" :readonly="false" :editable="true" :clearable="false" @change="updateAll" />
         </div>
-        <div :class="$style.back" @click.prevent="goBack()">
+        <div class="back" @click.prevent="goBack()">
           <dv-border-box-8>返回</dv-border-box-8>
         </div>
       </div>
-      <dv-border-box-4>
-        <!-- topBar -->
-        <!-- <top-bar v-if="topBarData.length" :info="topBarData" /> -->
-        <!-- middleCard -->
-        <!-- <middle-card v-if="middleCardData.flag" :info="middleCardData" /> -->
-        <!-- bottomCard -->
-        <!-- <bottom-card v-if="bottomCardData.flag" :info="bottomCardData" /> -->
-      </dv-border-box-4>
+      <dv-border-box-1>
+        <!-- 顶部数据 -->
+        <div class="topCard">
+          <top-bar v-if="topBarData.length" :info="topBarData" />
+        </div>
+        <div class="middleCard">
+          <div class="middleCardLeft" >
+            <middleCard v-if="MiddleLeftPieViewList.data.length" :info="MiddleLeftPieViewList" ref="middleCardLeft"/>
+          </div>
+          <dv-decoration-2 :reverse="true" style="width:5px;height:330px;margin-left: 25px;" />
+          <div class="middleCardCenter">
+            <middleCard v-if="eBgRateData.data.length" :info="eBgRateData" ref="middleCardCenter"/>
+          </div>
+          <dv-decoration-2 :reverse="true" style="width:5px;height:330px;margin-left: 25px;" />
+          <div class="middleCardRight">
+            <CarouselTabl v-if="config.data.length" :info="config"/>
+          </div>
+        </div>
+        <dv-decoration-10 />
+        <div class="bottomCard">
+          <div class="bottomCardLeft0">
+            <middleCard v-if="weiHuSheBeiData.data.length" :info="weiHuSheBeiData" ref="sheBeiWeiHuRef"/>
+          </div>
+          <dv-decoration-2 :reverse="true" style="width:5px;height:330px;margin-left: 15px;" />
+          <div class="bottomCardCenter0">
+            <zhuzhuangtu v-if="sheBeiweiHuData.data.length" :info="sheBeiweiHuData"  ref="sheBeiWeiHuDataref"/>          
+          </div>
+          <dv-decoration-2 :reverse="true" style="width:5px;height:330px;margin-left: 15px;" />
+          <div class="bottomCardLeft">
+            <middleCard v-if="sheBeiHeChaData.data.length" :info="sheBeiHeChaData" ref="sheBeiHeChaRef"/>
+          </div>
+          <dv-decoration-2 :reverse="true" style="width:5px;height:330px;margin-left: 15px;" />
+          <div class="bottomCardCenter">
+            <zhuzhuangtu v-if="zhuantaiEData.data.length" :info="zhuantaiEData"  ref="zhuantaiEDataref"/>          
+          </div>
+          <dv-decoration-2 :reverse="true" style="width:5px;height:330px;margin-left: 15px;" />
+          <div class="bottomCardright">
+            <middleCard v-if="jianDingjiaoZhunSheBeiData.data.length" :info="jianDingjiaoZhunSheBeiData" ref="jiandingRef"/>
+          </div>
+          <dv-decoration-2 :reverse="true" style="width:5px;height:330px;margin-left: 25px;" />
+          <div class="bottomCardright2">
+            <zhuzhuangtu v-if="bottomData.data.length" :info="bottomData"  ref="bottomCardLeft"/>
+          </div>
+        </div>
+      </dv-border-box-1>
     </dv-full-screen-container>
   </div>
 </template>
 <script>
 import screenfull from "screenfull";
-import repostCurd from "@/business/platform/form/utils/custom/joinCURD.js";
+import curdPost from "@/business/platform/form/utils/custom/joinCURD.js";
+import { color } from 'echarts/lib/export';
+// import { config } from 'public/lib/UEditor/third-party/zeroclipboard/ZeroClipboard';
+// import { acceptList } from "./data.js";
+// import { number } from 'echarts/lib/export';
 export default {
   name: "checkBoard",
   components: {
-    topBar: () => import("./component/topBar"),
-    middleCard: () => import("./component/middleCard"),
-    bottomCard: () => import("./component/bottomCard"),
+    topBar: () => import('./component/equipmentBoardTopcard'),
+    middleCard: () => import('./component/getPieView'),
+    zhuzhuangtu: () => import('./component/zhuzhuangtu'),
+    CarouselTabl: () => import('./component/CarouselTabl')
   },
   data() {
     const d = new Date();
     return {
-      titleName: "设备管理信息查询",
+      titleName: "设备信息查询",
       year: d.toJSON().slice(0, 4),
       month: d.toJSON().slice(0, 7),
       today: d.toJSON().slice(0, 10),
-      label: ["设备信息一览",],
       topBarData: [],
-      middleCardData: {
-        tableData: {
-          header: ["检测项目", "检测类型", "计划完成时间", "当前状态", "人员"],
-          data: [],
-          rowNum: 7,
-          columnWidth: ["300", "100", "150", "150", "100"],
-        },
-        acceptData: [],
-        taskData: [],
-        flag: false,
+      timer: null,
+      MiddleLeftPieViewList:{
+        data:[],
+        config:{idSelector:"main"}, //{name:,value}
+        color:[]
       },
-      bottomCardData: {
-        flag: false,
+      eBgRateData:{
+        data:[],
+        config:{}
       },
-      timer: null,
+      sheBeiHeChaData:{
+        data:[],
+        config:{}
+      },
+      jianDingjiaoZhunSheBeiData:{
+        data:[],
+        config:{}
+      },
+      weiHuSheBeiData:{
+        data:[],
+        config:{}
+      },
+      bottomData:{xData:[],data:[],config:{idSelector:""}},
+      zhuantaiEData:{xData:[],data:[],config:{idSelector:""}},
+      sheBeiweiHuData:{xData:[],data:[],config:{idSelector:""}},
+      config:{ header:['设备名称','设备编号','规格型号','最近检定/校准日期','设备状态'],data:[]}
     };
   },
-  mounted() {
+  created() {
     if (screenfull.isEnabled && !screenfull.isFullscreen) {
       this.allView();
     }
-
     this.updateAll();
-
-    if (this.timer) {
-      clearInterval(this.timer);
-    }
-
-    this.timer = setInterval(() => {
-      this.updateAll();
-    }, 600000);
   },
   beforeDestroy() {
     if (screenfull.isFullscreen) {
       screenfull.toggle();
     }
-    clearInterval(this.timer);
   },
   methods: {
-    allView() {
-      // 默认显示全屏
+    allView() { // 默认显示全屏 
       screenfull.request();
     },
     goBack() {
@@ -94,119 +134,260 @@ export default {
     },
     updateAll(e) {
       this.getTopBarData();
-      this.getMiddleData();
-      this.getBottomData();
+      this.getMiddleLeftPieView();
+      this.getCarouselTable();
+      // this.getbottomData();
     },
-    // 获取topBar数据
-    async getTopBarData() {
-      // let quarter = this.getDateRange("quarter");
-      // let week = this.getDateRange("week");
+    async getTopBarData(){
       let this_ = this;
-      // let sql1 = `select a.Equipments as a1,b.addEquipments as b1,c.testEquipments as c1,d.checkEquipments as d1,e.goodEquipments as e1,f.scrapEquipments as f1,g.limitedEquipments as g1 
-      //              from 
-      //              (select count(id_) as Equipments from t_sbdj) as a,
-      //              (select count(id_) as addEquipments  from t_sbdj WHERE gou_jin_ri_qi_ like '%2022-12%') as b,
-      //              (select count(id_) as testEquipments from t_sbjdxzqr) as c,
-      //              (select count(id_) as checkEquipments from t_sbhcjlb WHERE create_time_ like '%2022-12%') as d,
-      //              (select count(id_) as goodEquipments  from t_sbdj WHERE she_bei_zhuang_ta ="正常") as e,
-      //              (select count(id_) as scrapEquipments  from t_sbdj WHERE she_bei_zhuang_ta ="停用" or she_bei_zhuang_ta ="报废/停用") as f,
-      //              (select count(id_) as limitedEquipments  from t_sbdj WHERE she_bei_zhuang_ta ="限制使用" ) as g`;
-                   let sql1 = `select *  FROM t_sbjdxzqr`
-        await repostCurd("sql", sql1).then((res) => {
-          // const data = res.variables.data;
-          console.log(res.variables.data)
-          // if (data && data.length) {
-          //   const {
-          //     Equipments,
-          //     mogoodEquipmentsnth,
-          //     addEquipments,
-          //     testEquipments,
-          //     checkEquipments,
-          //     limitedEquipments,
-          //     scrapEquipments,
-          //   } = data[0];
-          //   // this.middleCardData.taskData = [month, jcTotal, task, report];
-          //   let result = [
-          //     {
-          //       title: "设备状况一览",
-          //       children: [
-          //         {
-          //           label: "设备总数",
-          //           value: Equipments,
-          //         },
-          //         {
-          //           label: "设备良好总数",
-          //           value: mogoodEquipmentsnth,
-          //         },
-          //         {
-          //           label: "本月新增设备数量",
-          //           value: addEquipments,
-          //         },
-          //         {
-          //           label: "本月检定/校准设备总数",
-          //           value: testEquipments,
-          //         },
-          //         {
-          //           label: "本月期间核查设备总数",
-          //           value: checkEquipments,
-          //         },
-          //         {
-          //           label: "受限设备数量",
-          //           value: limitedEquipments,
-          //         },
-          //         {
-          //           label: "本月报废设备数量",
-          //           value: scrapEquipments,
-          //         },
-          //       ],
-          //     },
-          //   ];
-
-          //   this_.topBarData = result;
-          // }
+      let sql =`select a.Equipments,b.addEquipments,c.testEquipments,c1.testNoEquipments,d.checkEquipments,
+      d1.checkNoEquipments,e.goodEquipments,f.scrapEquipments,g.limitedEquipments,h.weiHuNoEquipments,h1.weiHuEquipments
+      from  
+      (select count(*) as Equipments from t_sbdj) as a,
+      (select count(*) as addEquipments  from t_sbdj where gou_jin_ri_qi_ LIKE '%2022-12%') as b,
+      (select count(*) as testEquipments from t_sbjdxzqr where shi_fou_guo_shen_ ='1') as c,
+      (select count(*) as testNoEquipments from t_sbjdxzqr) as c1,
+      (select count(*) as checkEquipments from t_sbhcjlb where create_time_ LIKE '%2022-12%' and shi_fou_guo_shen_ ='1') as d,
+      (select count(*) as checkNoEquipments from t_sbhcjlb where create_time_ LIKE '%2022-12%') as d1,
+      (select count(*) as goodEquipments  from t_sbdj where she_bei_zhuang_ta ='正常') as e,
+      (select count(*) as scrapEquipments  from t_sbdj where she_bei_zhuang_ta ='停用' or she_bei_zhuang_ta ='报废/停用') as f,
+      (select count(*) as limitedEquipments  from t_sbdj where she_bei_zhuang_ta ='限制使用') as g,
+      (select count(*) as weiHuNoEquipments  from t_mjsbwhjhzb where create_time_ LIKE '%2022-12%') as h,
+      (select count(*) as weiHuEquipments  from t_mjsbwhbyjlby where create_time_ LIKE '%2022-12%' and shi_fou_guo_shen_ ='1') as h1`;
+     await curdPost("sql",sql).then(res=>{
+        const data = res.variables.data
+        let eIntactnessRate = Number(((data[0].goodEquipments/data[0].Equipments).toFixed(3)+"").slice(2,4));
+        let obj ={};
+        obj.value = data[0].goodEquipments;
+        obj.name = "正常设备";
+        this_.MiddleLeftPieViewList.data.push(obj);
+        obj ={};
+        obj.value = data[0].scrapEquipments;
+        obj.name = "停用/报废";
+        this_.MiddleLeftPieViewList.data.push(obj);
+        obj ={};
+        obj.value = data[0].limitedEquipments;
+        obj.name = "限制使用";
+        this_.MiddleLeftPieViewList.data.push(obj);
+        this_.MiddleLeftPieViewList.color = ['#ff7070','#ffee00','#5c7bd9'];
+        this_.MiddleLeftPieViewList.config.title = "设备状态工作分布";
+        this_.MiddleLeftPieViewList.config.idSelector = "main2";
+        this_.$nextTick(()=>{
+        setTimeout(() => {
+					this_.$refs.middleCardLeft.getMiddleLeft()// hhhh xxxx
+				}, 1000)
         })
-        .catch((error) => {
-          console.log(error,sql1);
-        });
-    },
-    // 获取中间图表数据
-    getMiddleData() {
-      // 获取检测数据
-      // const sql1 = `select tm.jian_ce_xiang_mu_, tm.jian_ce_lei_bie_, IFNULL(rw.qi_wang_wan_cheng, '') as qi_wang_wan_cheng, rw.zhuang_tai_, ipe.NAME_ from t_rwfpb rw, ibps_party_employee ipe, t_mjjcnlfw tm where rw.jian_ce_yuan_ = ipe.ID_ and rw.jian_ce_xiang_mu_ = tm.id_ and rw.create_time_ like '${this.month}%'`
-      const sql1 = `select tm.jian_ce_xiang_mu_, tm.jian_ce_lei_bie_, IFNULL(rwz.create_time_, '') as qi_wang_wan_cheng, rw.zhuang_tai_, ipe.NAME_ from t_lhrwfpb rw, ibps_party_employee ipe, t_mjjcnlfw tm, t_mjrwfpzb rwz where rwz.jian_ce_yuan_ = ipe.ID_ and rwz.jian_ce_xiang_mu_ = tm.id_ and rw.id_ = rwz.wai_jian_ and rw.create_time_ like '${this.month}%'`;
-      // 获取检测受理类型数据
-      const sql2 = `select count(tm.jian_ce_lei_bie_ = '理化' or null) as lh, count(tm.jian_ce_lei_bie_ = '微生物' or null) as wsw, count(tm.jian_ce_lei_bie_ = '细胞活率' or null) as xbhl, count(tm.jian_ce_lei_bie_ = '残留检测' or null) as cljc, count(tm.jian_ce_lei_bie_ = '细胞鉴别' or null) as xbjb from t_lhjczb tj, t_mjjcnlfw tm where tj.jian_ce_xiang_mu_ = tm.id_ and tj.create_time_ like '${this.month}%'`;
-
-      // Promise.all([repostCurd("sql", sql1), repostCurd("sql", sql2)])
-      //   .then(([res1, res2]) => {
-      //     const data1 = res1.variables.data;
-      //     const data2 = res2.variables.data;
-      //     // console.log(data1, data2)
-
-      //     this.middleCardData.tableData.data = [];
-      //     data1.forEach((item) => {
-      //       this.middleCardData.tableData.data.push(Object.values(item));
-      //     });
-
-      //     this.middleCardData.acceptData = Object.values(data2[0]);
-      //     this.middleCardData.flag = true;
-      //   })
-      //   .catch((error) => {
-      //     console.log(error);
-      //   });
+        obj ={};
+        let result =[
+        {
+          title: '',
+          children: [
+            {
+              label: '设备总数',
+              value: data[0].Equipments,
+              danwei:'台'
+            },
+            {
+              label: '本月新增设备数',
+              value: data[0].addEquipments,
+              danwei:'件'
+            },
+            {
+              label: '正常设备数',
+              value: data[0].goodEquipments,
+              danwei:'件'
+            },            
+            {
+              label: '报废/停用设备数',
+              value: data[0].scrapEquipments,
+              danwei:'件'
+            },
+            {
+              label: '受限设备数',
+              value: data[0].limitedEquipments,
+              danwei:'件'
+            }
+          ]
+        },
+        {
+          title: '',
+          children: [
+            {
+              label: '本月计划维护设备数',
+              value: data[0].weiHuNoEquipments,
+              danwei:'台'
+            },
+            {
+              label: '已维护设备数',
+              value: data[0].weiHuEquipments,
+              danwei:'台'
+            }
+          ]
+        },
+        {
+          title: '',
+          children: [
+            {
+              label: '本月计划检定/校准设备数',
+              value: data[0].testNoEquipments,
+              danwei:'台'
+            },
+            {
+              label: '本月已检定/校准设备数',
+              value: data[0].testEquipments,
+              danwei:'台'
+            }
+          ]
+        },
+        {
+          title: '',
+          children: [
+            {
+              label: '本月计划核查设备数',
+              value: data[0].checkNoEquipments,
+              danwei:'台'
+            },
+            {
+              label: '本月核查设备数',
+              value: data[0].checkEquipments,
+              danwei:'件'
+            }
+          ]
+        },
+        {
+          title: '',
+          children: [
+            {
+              label: '设备完好率',
+              value: eIntactnessRate,
+              danwei:'%'
+            },
+            {
+              label: '设备总值',
+              value:100,
+              danwei:'元'
+            },
+          ]
+        }
+       ];
+       //
+      this_.bottomData.xData =["计划核查设备数","已核查设备数"];
+      this_.bottomData.data.push(data[0].checkNoEquipments);
+      this_.bottomData.data.push(data[0].checkEquipments);
+      this_.bottomData.config.title ="核查设备数量";
+      this_.bottomData.config.idSelector ="main4";
+      this_.$nextTick(()=>{
+        setTimeout(() => {
+					this_.$refs.zhuantaiEDataref.getMiddleLeft()// hhhh xxxx
+				}, 1000)
+      })
+      this_.zhuantaiEData.xData =["计划检定/校准设备数","已完成检定/校准设备数",];
+      this_.zhuantaiEData.data.push(data[0].testNoEquipments);
+      this_.zhuantaiEData.data.push(data[0].testEquipments);
+      this_.zhuantaiEData.config.title ="设备检定/校准设备数量";
+      this_.zhuantaiEData.config.idSelector ="main3";
+      //维护设备柱状图
+      this_.sheBeiweiHuData.xData =["计划维护设备数","已完成维护设备数",];
+      this_.sheBeiweiHuData.data.push(data[0].weiHuNoEquipments);
+      this_.sheBeiweiHuData.data.push(data[0].weiHuEquipments);
+      this_.sheBeiweiHuData.config.title ="设备维护设备";
+      this_.sheBeiweiHuData.config.idSelector ="mainWeiHuZ";
+      this_.$nextTick(()=>{
+        setTimeout(() => {
+					this_.$refs.bottomCardLeft.getMiddleLeft()// hhhh xxxx
+          this_.$refs.sheBeiWeiHuDataref.getMiddleLeft();
+				}, 1000)
+      })
+      let eBadRate = 100 - parseInt(eIntactnessRate);
+      let objRate = {};
+      objRate.name ="设备完好率";
+      objRate.value = eIntactnessRate;
+      this_.eBgRateData.data.push(objRate);
+      objRate ={};
+      objRate.value = eBadRate;
+      objRate.name = "设备损坏率";
+      this_.eBgRateData.data.push(objRate);
+      this_.eBgRateData.color = ['#0dcbd4','#5470c6'];
+      this_.eBgRateData.config.title = "设备完好率分布";
+      this_.eBgRateData.config.idSelector = "main1";
+      //设备维护
+      let objweihu ={};
+      objweihu.name ="计划维护设备数";
+      objweihu.value = data[0].weiHuNoEquipments;
+      this_.weiHuSheBeiData.data.push(objweihu);
+      objweihu ={};
+      objweihu.value =  data[0].weiHuEquipments;
+      objweihu.name = "已维护设备数";
+      this_.weiHuSheBeiData.data.push(objweihu);
+      this_.weiHuSheBeiData.color = ['#0dcbd4','#5470c6'];
+      this_.weiHuSheBeiData.config.title = "设备核查分布";
+      this_.weiHuSheBeiData.config.idSelector = "mainWeiHu";
+      //设备核查
+      let objHeCha ={};
+      objHeCha.name ="计划核查设备数";
+      objHeCha.value = data[0].checkNoEquipments;
+      this_.sheBeiHeChaData.data.push(objHeCha);
+      objHeCha ={};
+      objHeCha.value =  data[0].checkEquipments;
+      objHeCha.name = "已核查设备数";
+      this_.sheBeiHeChaData.data.push(objHeCha);
+      this_.sheBeiHeChaData.color = ['#0dcbd4','#5470c6'];
+      this_.sheBeiHeChaData.config.title = "设备核查分布";
+      this_.sheBeiHeChaData.config.idSelector = "mainHeCha";
+      //设备检定校准
+      let objJianding ={};
+      objJianding.name ="计划检定/校准设备数";
+      objJianding.value = data[0].testNoEquipments;
+      this_.jianDingjiaoZhunSheBeiData.data.push(objJianding);
+      objJianding ={};
+      objJianding.value =  data[0].testEquipments;
+      objJianding.name = "已检定/校准设备数";
+      this_.jianDingjiaoZhunSheBeiData.data.push(objJianding);
+      this_.jianDingjiaoZhunSheBeiData.color = ['#0dcbd4','#5470c6'];
+      this_.jianDingjiaoZhunSheBeiData.config.title = "设备检定校准分布";
+      this_.jianDingjiaoZhunSheBeiData.config.idSelector = "mainJianDing";
+      this_.$nextTick(()=>{
+        setTimeout(() => {
+					this_.$refs.middleCardCenter.getMiddleLeft();// hhhh xxxx
+          this_.$refs.sheBeiHeChaRef.getMiddleLeft();//
+          this_.$refs.jiandingRef.getMiddleLeft();
+				}, 1000)
+      })
+      objRate = {};
+      this_.topBarData = result;
+      }).catch(err=>{
+        console.log(err)
+      })
     },
-    // 获取底部图表数据
-    getBottomData() {
+    getMiddleLeftPieView(){
+      // [ { value: 1048, name: 'Search Engine' },]
       console.log(1)
     },
-    // 获取本周和本季度的开始和结束日期，以对象形式返回
-    getDateRange(type) {
-      console.log(2)
+    async getCarouselTable() {
+      let this_ = this;
+      const sql = "select * from t_sbdj where she_bei_zhuang_ta ='停用' or she_bei_zhuang_ta ='报废/停用'";
+      let data1 = [];
+      await curdPost("sql", sql)
+        .then((res) => {
+          const result = res.variables.data;
+          result.forEach((item) => {
+            data1 = [];
+            data1.push(item.she_bei_ming_cheng_);
+            data1.push(item.she_bei_shi_bie_h);
+            data1.push(item.gui_ge_xing_hao_);
+            data1.push(item.zhuang_tai_fen_xi || "asda");
+            data1.push(item.she_bei_zhuang_ta);
+            this_.config.data.push(data1);
+          });
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     }
   },
 };
 </script>
-<style lang="scss" module>
+<style lang="scss" scoped>
 .content {
   width: 100%;
   height: 100%;
@@ -214,7 +395,6 @@ export default {
   position: absolute;
   color: #fff;
   z-index: 999;
-  :global {
     #dv-full-screen-container {
       background-image: url("./img/bg.png");
       background-size: 100% 100%;
@@ -233,7 +413,6 @@ export default {
       display: flex;
       margin-top: 0.8%;
     }
-
     .block-top-bottom-content {
       flex: 1;
       display: flex;
@@ -241,7 +420,6 @@ export default {
       box-sizing: border-box;
       padding-left: 0.8%;
     }
-
     .block-top-content {
       height: 55%;
       display: flex;
@@ -249,7 +427,7 @@ export default {
       box-sizing: border-box;
       padding-bottom: 0.8%;
     }
-  }
+  
   .header {
     position: relative;
     width: 100%;
@@ -296,6 +474,61 @@ export default {
     .back {
       left: 75%;
     }
+  }  
+  .topCard{
+    width: 100%;
   }
+  .middleCard,.bottomCard{
+    width: 100vw;
+    // margin-top: 30px;
+    div{
+      display: inline-block;
+    }
+    .middleCardLeft{
+      width: 20%;
+      margin-left: 30px;
+    }
+    .middleCardCenter{
+      width: 20%;
+      margin-left: 15px;
+    }
+    .middleCardRight{
+      margin-left: 30px;
+      width: 50%;
+    }
+    padding: 10px;
+  }
+  .bottomCard{
+    div{
+      display: inline-block;
+    }
+    .bottomCardLeft0{
+      width:15%;
+    }
+    .bottomCardCenter0{
+      width:15%;
+    }
+    .bottomCardLeft{
+      width:15%;
+      margin-left: 30px;
+    }
+    .bottomCardCenter{
+      width:15%;
+      margin-left: 15px;
+    }
+    .bottomCardright{
+      width:15%;
+      margin-left: 15px;
+    }
+    .bottomCardright2{
+      width:15%;
+      margin-left: 15px;
+    }
+  }
+}
+.dv-decoration-10 {
+  width: 96%;
+  margin: -7px 2% 0;
+  height: 5px;
 }
 </style>