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

<template>
  <div class="content">
    <dv-full-screen-container>
      <!-- 头部内容 -->
      <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="back" @click.prevent="goBack()">
          <dv-border-box-8>返回</dv-border-box-8>
        </div>
      </div>
      <dv-border-box-1 v-if="MiddleLeftPieViewList.data.length" style="width: 100%;height:89%;margin: 0 auto;box-sizing: border-box;overflow: hidden;">
        <!-- 顶部数据 -->
        <div class="topCard">
          <top-bar v-if="topBarData.length" :info="topBarData" />
        </div>
        <div class="middleCard">
          <div style="width:100%;height: 100%;overflow: hidden;box-sizing: border-box;">
            <div class="middleCardLeft">
              <middleCard v-if="MiddleLeftPieViewList.data.length" :info="MiddleLeftPieViewList" ref="middleCardLeft" />
            </div>
            <dv-decoration-2 v-if="MiddleLeftPieViewList.data.length" :reverse="true" style="width:2%;height:100%;overflow: hidden;box-sizing: border-box;" />
            <div class="middleCardCenter">
              <middleCard v-if="eBgRateData.data.length" :info="eBgRateData" ref="middleCardCenter" />
            </div>
            <dv-decoration-2 v-if="eBgRateData.data.length" :reverse="true" style="width:2%;height:100%;overflow: hidden;box-sizing: border-box;" />
            <div class="middleCardRight" v-if="eBgRateData.data.length">
              <CarouselTabl v-if="config.data.length" :info="config" title="设备报废记录" />
            </div>
            <dv-decoration-2 v-if="eBgRateData.data.length" :reverse="true" style="width:2%;height:100%;overflow: hidden;box-sizing: border-box;" />
            <div class="middleCardRight1">
              <CarouselTabl v-if="MiddleLeftPieViewList.data.length" :info="shiyonglvConfig" title="设备使用记录" />
            </div>
          </div>
          <dv-decoration-10 v-if="MiddleLeftPieViewList.data.length" style="height: 5%;" />
        </div>
        <div class="bottomCard">
          <div style="width:28%;display:flex;overflow: hidden;">
            <div class="bottomCardLeft0">
              <middleCard v-if="weiHuSheBeiData.data.length" :info="weiHuSheBeiData" ref="sheBeiWeiHuRef" />
            </div>
            <!-- <dv-decoration-2 v-if="weiHuSheBeiData.data.length" :reverse="true" style="width:3%;height:330px;margin: 0 10px;" /> -->
            <!-- <div style="width:37%">
              <zhuzhuangtu v-if="sheBeiweiHuData.data.length" :info="sheBeiweiHuData" ref="sheBeiWeiHuDataref" />
            </div> -->
          </div>
          <dv-decoration-2 v-if="bottomData.data.length" :reverse="true" style="width:2%;height:100%;" />
          <div style="width:50%;display:flex;overflow: hidden;">
            <div style="width:38%">
              <zhuzhuangtu v-if="zhuantaiEData.data.length" :info="zhuantaiEData" ref="zhuantaiEDataref" />
            </div>
            <dv-decoration-2 v-if="jianDingjiaoZhunSheBeiData.data.length" :reverse="true" style="width:4%;height:100%;" />
            <div class="bottomCardright">
              <middleCard v-if="jianDingjiaoZhunSheBeiData.data.length" :info="jianDingjiaoZhunSheBeiData" ref="jiandingRef" />
            </div>

          </div>
          <dv-decoration-2 v-if="sheBeiweiHuData.data.length" :reverse="true" style="width:2%;height:100%;" />
          <div style="width:18%;display:flex;overflow: hidden;">
            <!-- <div class="bottomCardLeft">
              <middleCard v-if="sheBeiHeChaData.data.length" :info="sheBeiHeChaData" ref="sheBeiHeChaRef" />
            </div> -->
            <!-- <dv-decoration-2 v-if="sheBeiHeChaData.data.length" :reverse="true" style="width:2%;height:100%;" /> -->
            <div style="width:100%">
              <zhuzhuangtu v-if="bottomData.data.length" :info="bottomData" ref="bottomCardLeft" />
            </div>
          </div>


        </div>
      </dv-border-box-1>
    </dv-full-screen-container>
  </div>
</template>
<script>
import screenfull from "screenfull";
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/equipment/equipmentBoardTopcard"),
    middleCard: () => import("./component/equipment/getPieView"),
    zhuzhuangtu: () => import("./component/equipment/zhuzhuangtu"),
    CarouselTabl: () => import("./component/equipment/CarouselTabl"),
  },
  data() {
    const d = new Date();
    return {
      titleName: "设备管理看板",
      year: d.toJSON().slice(0, 4),
      month: d.toJSON().slice(0, 7),
      today: d.toJSON().slice(0, 10),
      topBarData: [],
      timer: null,
      MiddleLeftPieViewList: {
        data: [],
        config: { idSelector: "main" }, //{name:,value}
        color: [],
      },
      eBgRateData: {
        data: [],
        config: {},
      },
      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: [],
        columnWidth: ["100", "110", "85", "85"],
        rowNum: 4,
      },
      shiyonglvConfig: {
        header: ["设备名称", "设备状态", "频率"],
        data: [],
        columnWidth: ["120", "120", "50"],
        rowNum: 4,
      },
      zichan: 0,
      loading: true,
    };
  },
  created() {
    if (screenfull.isEnabled && !screenfull.isFullscreen) {
      this.allView();
    }
    this.updateAll();
  },
  beforeDestroy() {
    if (screenfull.isFullscreen) {
      screenfull.toggle();
    }
  },
  methods: {
    allView() {
      // 默认显示全屏
      screenfull.request();
    },
    goBack() {
      this.$router.back(-1);
    },
    updateAll(e) {
      // this.getSheBeiMony();
      this.getTopBarData();
      this.getMiddleLeftPieView();
      this.getCarouselTable();
      this.getCarouselShiYonglvTable();
      // this.getbottomData();
    },
    async getTopBarData() {
      let this_ = this;
      let sql1 = `select fei_yong_ as feiyong from t_mjsbxzqrb where shi_fou_guo_shen_ ='1'`;
      let zichan;
      await curdPost("sql", sql1).then((res) => {
        const data = res.variables.data;
        zichan = this_.getAllMonyInt(data);
      });
      let sql2 = `select yu_suan_ as feiyong from t_mjyqsbwxsqb where shi_fou_guo_shen_ ='1'`;
      let shenqinngfeiyong;
      await curdPost("sql", sql1).then((res) => {
        const data = res.variables.data;
        shenqinngfeiyong = this_.getAllMonyInt(data);
      });
      let sql3 = `select shi_ji_zhi_chu_ as feiyong from t_mjsbwxqrb where shi_fou_guo_shen_ ='1'`;
      let querennfeiyong;
      await curdPost("sql", sql1).then((res) => {
        const data = res.variables.data;
        querennfeiyong = this_.getAllMonyInt(data);
      });
      let weixiufeiyongbi = shenqinngfeiyong / querennfeiyong;
      let sql = `select a.Equipments,a1.mony,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 bei_zhu_ as mony FROM t_sbdj) as a1,
      (select count(*) as addEquipments  from t_sbdj where gou_jin_ri_qi_ LIKE '${this_.month}') as b,
      (select count(*) as testEquipments from t_mjsbxzqrb where shi_fou_guo_shen_ ='1') as c,
      (select count(*) as testNoEquipments from t_mjsbjdxzjhzb) as c1,
      (select count(*) as checkEquipments from t_mjyqsbwxsqb where create_time_ LIKE '${this_.month}' ) as d,
      (select count(*) as checkNoEquipments from t_mjsbwxqrb where create_time_ LIKE '${this_.month}' and shi_fou_guo_shen_ ='1') 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 '${this_.month}') as h,
      (select count(*) as weiHuEquipments  from t_mjsbwhbyjlby where create_time_ LIKE '${this_.month}' and shi_fou_guo_shen_ ='1') as h1`;

      await curdPost("sql", sql)
        .then((res) => {
          const data = res.variables.data;
          // let zichan = '待确认';
          let eIntactnessRate = Number(
            (
              (data[0].goodEquipments / data[0].Equipments).toFixed(3) + ""
            ).slice(2, 4)
          );
          let eBadRate = 100 - parseInt(eIntactnessRate);
          let obj = {};
          obj.value = data[0].goodEquipments;
          obj.name = "正常设备";
          this_.MiddleLeftPieViewList.data.push(obj);
          obj = {};
          obj.value = data[0].limitedEquipments;
          obj.name = "备用设备";
          this_.MiddleLeftPieViewList.data.push(obj);
          obj = {};
          obj.value = data[0].scrapEquipments;
          obj.name = "停用/报废";
          this_.MiddleLeftPieViewList.data.push(obj);
          this_.MiddleLeftPieViewList.color = ["#339933", "#FFFF66", "#FF0033"];
          this_.MiddleLeftPieViewList.config.title = "设备状态工作分布";
          this_.MiddleLeftPieViewList.config.idSelector = "main2";
          this_.$nextTick(() => {
            setTimeout(() => {
              this_.$refs.middleCardLeft.getMiddleLeft(); // hhhh xxxx
            }, 1000);
          });
          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: "",
                },
                {
                  label: `检定校准费用`,
                  value: zichan,
                  danwei: "元",
                },
              ],
            },
            {
              title: "",
              children: [
                {
                  label: "申请维修设备",
                  value: data[0].checkNoEquipments,
                  danwei: "",
                },
                {
                  label: "完成维修设备",
                  value: data[0].checkEquipments,
                  danwei: "",
                },
                // {
                //   label: "费用比",
                //   value: weixiufeiyongbi || 0,
                //   danwei: "%",
                // },
              ],
            },
            {
              title: "",
              children: [
                {
                  label: "设备完好率",
                  value: eIntactnessRate,
                  danwei: "%",
                },
                {
                  label: "设备故障率",
                  value: eBadRate,
                  danwei: "%",
                },
                // {
                //   label: '设备总值',
                //   value:zichan,
                //   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_.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.zhuantaiEDataref.getMiddleLeft?this_.$refs.zhuantaiEDataref.getMiddleLeft():''; // hhhh xxxx
              this_.$refs.bottomCardLeft.getMiddleLeft?this_.$refs.bottomCardLeft.getMiddleLeft():''; // hhhh xxxx
              this_.$refs.sheBeiWeiHuDataref.getMiddleLeft?this_.$refs.sheBeiWeiHuDataref.getMiddleLeft():'';
            }, 1000);
          });

          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 = ["#339933", "#FF0033"];
          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 = ["#5470c6", "#38a838"];
          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 = ["#5470c6", "#38a838"];
          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 = ["#5470c6", "#38a838"];
          this_.jianDingjiaoZhunSheBeiData.config.title = "设备检定校准分布";
          this_.jianDingjiaoZhunSheBeiData.config.idSelector = "mainJianDing";
          this_.$nextTick(() => {
            setTimeout(() => {
              this_.$refs.middleCardCenter.getMiddleLeft?this_.$refs.middleCardCenter.getMiddleLeft():''; // hhhh xxxx
              this_.$refs.sheBeiHeChaRef.getMiddleLeft?this_.$refs.sheBeiHeChaRef.getMiddleLeft():""; //
              this_.$refs.jiandingRef.getMiddleLeft?this_.$refs.jiandingRef.getMiddleLeft():'';
            }, 1000);
          });
          objRate = {};
          this_.topBarData = result;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getMiddleLeftPieView() {
      // [ { value: 1048, name: 'Search Engine' },]
      console.log(1);
    },
    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.she_bei_zhuang_ta);
            this_.config.data.push(data1);
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getCarouselShiYonglvTable() {
      let this_ = this;
      const sql = `select she_bei_ming_chen,she_bei_bian_hao_ ,she_bei_zhuang_ku,COUNT(*) AS pinlv FROM t_mjsbsy GROUP BY she_bei_bian_hao_  AND create_time_ LIKE '%${this.month}%' ORDER BY pinlv DESC`;
      let data1 = [];
      let res1 = [];
      await curdPost("sql", sql)
        .then((res) => {
          const result = res.variables.data;
          result.forEach((item) => {
            data1 = [];
            data1.push(item.she_bei_ming_chen);
            // data1.push(item.she_bei_bian_hao_);
            data1.push(item.she_bei_zhuang_ku);
            data1.push(item.pinlv);
            this_.shiyonglvConfig.data.push(data1);
          });
          console.log(this_.shiyonglvConfig.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getAllMonyInt(monyArr) {
      let mony = 0;
      let filterMony = 0;
      monyArr.forEach((item) => {
        filterMony = item.feiyong * 1;
        mony += filterMony;
      });
      return mony;
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  background-color: #030409;
  position: absolute;
  color: #fff;
  z-index: 999;
  #dv-full-screen-container {
    background-image: url("./img/bg.png");
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }
  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .block-left-right-content {
    flex: 1;
    display: flex;
    margin-top: 0.8%;
  }
  .block-top-bottom-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 0.8%;
  }
  .block-top-content {
    height: 55%;
    display: flex;
    flex-grow: 0;
    box-sizing: border-box;
    padding-bottom: 0.8%;
  }

  .header {
    position: relative;
    width: 100%;
    height: 9%;
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
    .left,
    .right {
      width: 25%;
      height: 60px;
    }
    .center {
      width: 40%;
      height: 60px;
      margin-top: 30px;
    }
    .title {
      position: absolute;
      font-size: 30px;
      font-weight: bold;
      left: 50%;
      top: 15px;
      transform: translateX(-50%);
    }
    .time,
    .back {
      width: 8%;
      cursor: pointer;
      height: 2.825rem;
      line-height: 2.825rem;
      text-align: center;
      margin-top: 2.5%;
      flex: 1;
      position: absolute;
      color: #ffffff;
    }
    .time {
      display: flex;
      justify-content: flex-end;
      width: 20%;
      right: 75%;
    }
    .back {
      left: 75%;
    }
  }
  .topCard {
    width: 100%;
    height: 20%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .bottomCard {
    height: 38%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .middleCard {
    height: 40%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .middleCard,
  .bottomCard {
    width: 96%;
    // margin-left: 18px;
    // margin-top: 30px;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    div {
      display: inline-block;
    }
    .middleCardLeft {
      width: 20%;
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
    }
    .middleCardCenter {
      width: 20%;
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
    }
    .middleCardRight {
      width: 28%;
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
    }
    .middleCardRight1 {
      height: 100%;
      width: 26%;
      overflow: hidden;
      box-sizing: border-box;
    }
    padding: 2px 0px;
  }
  .bottomCard {
    display: flex;
    div {
      display: inline-block;
    }
    .bottomCardLeft0 {
      width: 100%;
    }
    .bottomCardLeft {
      width: 70%;
    }
    .bottomCardright {
      width: 58%;
    }
  }
}
.dv-decoration-10 {
  width: 92%;
  margin: 7px 0 0;
  height: 5px;
}
</style>