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:88%;margin: 0 auto;box-sizing: border-box;overflow: hidden;">
        <!-- 顶部数据 -->
        <div class="topCard">
          <top-bar v-if="topBarData.length" :info="topBarData" />
        </div>
        <dv-decoration-10 style="height:1%;width: 96%;display:flex;margin: 0 auto;" />
        <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="middleCardRight1">
              <CarouselTabl v-if="shiyonglvConfig.data.length" :info="shiyonglvConfig" 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="middleCardRight" v-if="eBgRateData.data.length">
              <CarouselTabl v-if="config.data.length" :info="config" title="设备报废记录" />
            </div>
          </div>
          <dv-decoration-10 v-if="MiddleLeftPieViewList.data.length" style="height: 5%;" />
        </div>
        <dv-decoration-10 style="height:1%;width: 96%;display:flex;margin: 0 auto;        " />
        <div class="bottomCard">
          <div style="width:25%">
            <zhuzhuangtu v-if="sheBeiData.data.length" :info="sheBeiData" ref="sheBeiDataDataref" />
          </div>
          <dv-decoration-2 v-if="bottomData.data.length" :reverse="true" style="width:2%;height:100%;" />
          <div style="width:24%;display:flex;overflow: hidden;">
            <div class="bottomCardLeft0">
              <middleCard v-if="weiHuSheBeiDataShow" :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:24%;display:flex;overflow: hidden;">
            <!-- <div style="width:40%">
              <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="jianDingjiaoZhunSheBeiDataShow" :info="jianDingjiaoZhunSheBeiData" ref="jiandingRef" />
            </div>
          </div>
          <dv-decoration-2 v-if="sheBeiHeChaDataShow" :reverse="true" style="width:2%;height:100%;" />
          <div style="width:25%;display:flex;overflow: hidden;">
            <div class="bottomCardLeft">
              <middleCard v-if="sheBeiHeChaDataShow" :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: {},
      },
      sheBeiHeChaDataShow:false,
      jianDingjiaoZhunSheBeiData: {
        data: [],
        config: {},
      },
      weiHuSheBeiData: {
        data: [],
        config: {},
      },
      weiHuSheBeiDataShow:false,
      jianDingjiaoZhunSheBeiDataShow:false,
      bottomData: { xData: [], data: [], config: { idSelector: "" } },
      zhuantaiEData: { xData: [], data: [], config: { idSelector: "" } },
      sheBeiData: { xData: [], data: [], config: { idSelector: "" } },
      sheBeiweiHuData: { xData: [], data: [], config: { idSelector: "" } },
      config: {
        header: ["设备名称", "编号", "状态"],
        data: [],
        columnWidth: ["160", "110", "85"],
        rowNum: 6,
      },
      shiyonglvConfig: {
        header: ["设备名称", "使用时间", "使人","存放位置","状态", "频率"],
        data: [],
        columnWidth: ["175", "110", "80", "140","100", "60"],
        rowNum: 6,
      },
      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);
    },
    createAll() {
      this.getCarouselShiYonglvTable();
      this.getTopBarData();
      this.getCarouselTable();
    },
    updateAll(e) {
      // this.getSheBeiMony();
      this.getCarouselShiYonglvTable();
      this.getTopBarData();
      // this.getMiddleLeftPieView();
      this.getCarouselTable();
      this.$forceUpdate();
      // location.reload()
      // this.getbottomData();
    },
    async getTopBarData() {
     
      let this_ = this;
      this_.sheBeiHeChaDataShow = false;
      this_.weiHuSheBeiDataShow = false;
      this_.jianDingjiaoZhunSheBeiDataShow = false;
      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 where create_time_ LIKE '${this_.month}%') 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;
          // if(data.length <=0){
          //   this.eBgRateData.data.push([])
          //   this.sheBeiHeChaData.data.push([]);
          //   this.jianDingjiaoZhunSheBeiData.push([]);
          //   this.weiHuSheBeiData.data.push([]);
          //   return
          // }
          // let zichan = '待确认';
          let eIntactnessRate = Number(((data[0].goodEquipments / data[0].Equipments).toFixed(3) + "").slice(2, 4));
          this_.MiddleLeftPieViewList.data = [];
          let eBadRate = 100 - eIntactnessRate;
          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.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].limitedEquipments,
                  danwei: "",
                },
                {
                  label: "报废/停用数",
                  value: data[0].scrapEquipments,
                  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_.sheBeiData.xData = [
            "设备总数",
            "新增数",
            "良好数",
            "受限数",
            "报废停用数",
          ];
          
          this_.sheBeiData.data.push(data[0].Equipments);
          this_.sheBeiData.data.push(data[0].addEquipments);
          this_.sheBeiData.data.push(data[0].goodEquipments);
          this_.sheBeiData.data.push(data[0].limitedEquipments);
          this_.sheBeiData.data.push(data[0].scrapEquipments);
          this_.sheBeiData.config.title = "设备各工作状态数量统计";
          this_.sheBeiData.config.idSelector = "main8";
          this_.bottomData.data=[];
          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 = {};
          this_.weiHuSheBeiData.data = [];
          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";
          this_.weiHuSheBeiDataShow = true;
          //设备核查
          let objHeCha = {}; //核查改维修
          this_.sheBeiHeChaData.data =[];
          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";
          this_.sheBeiHeChaDataShow = true;
          //设备检定校准
          let objJianding = {};
          this_.jianDingjiaoZhunSheBeiData.data =[];
          
          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_.jianDingjiaoZhunSheBeiDataShow = true;
          // 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 b.name_,c.cun_fang_di_dian_, a.she_bei_ming_chen,a.she_bei_bian_hao_ ,a.create_time_,a.she_bei_zhuang_ku,a.shi_yong_ren_,COUNT(*) AS pinlv FROM t_mjsbsy  AS a JOIN ibps_party_employee AS b ON a.shi_yong_ren_ = b.id_ JOIN t_sbdj AS c ON a.she_bei_bian_hao_ = c.id_  GROUP BY create_time_  HAVING create_time_ LIKE  '${this.month}%' ORDER BY pinlv DESC`;
      let data1 = [];
      let res1 = [];
      this.shiyonglvConfig.data = [];
      await curdPost("sql", sql)
        .then((res) => {
          const result = res.variables.data;
          if (result.length > 0) {
            result.forEach((item) => {
              data1 = [];
              data1.push(item.she_bei_ming_chen);
              data1.push(this_.timestampToTime(item.create_time_ / 1000));
              data1.push(item.name_);
              data1.push(item.cun_fang_di_dian_);
              data1.push(item.she_bei_zhuang_ku);
              data1.push(item.pinlv);
              this_.shiyonglvConfig.data.push(data1);
              // this_.$forceUpdate()
            });
          }else{
            this_.shiyonglvConfig.data.push(["无数据"])
          }
          // console.log(this_.shiyonglvConfig.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp * 1000);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D;
    },
    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: 10%;
    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: 16%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .bottomCard {
    height: 39%;
    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: 28%;
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
    }
    .middleCardCenter {
      width: 24%;
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
    }
    .middleCardRight {
      width: 24%;
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
    }
    .middleCardRight1 {
      height: 100%;
      width: 48%;
      overflow: hidden;
      box-sizing: border-box;
    }
    padding: 2px 0px;
  }
  .bottomCard {
    display: flex;
    div {
      display: inline-block;
    }
    .bottomCardLeft0 {
      width: 100%;
    }
    .bottomCardLeft {
      width: 100%;
    }
    .bottomCardright {
      width: 100%;
    }
  }
}
.dv-decoration-10 {
  width: 92%;
  margin: 7px 0 0;
  height: 5px;
}
</style>