<template>
  <!-- 实时监测 -->
  <div class="realTimeMonitor-container">
    <div class="realTimeMonitor-box">
      <div class="left-box">
        <!-- 出勤情况 -->
        <div class="left-top-box">
          <div class="border-out">
            <div class="border-inner">
              <div class="left-top-title">出勤情况</div>
              <div id="AttendancePie" class="AttendancePie"></div>
            </div>
          </div>
        </div>
        <!-- 安全公告 -->
        <div class="left-center-box box-top">
          <div class="border-out">
            <div class="border-inner">
              <div class="left-center-title">安全公告</div>
              <div
                class="left-center-text"
                :class="
                  index == 0
                    ? 'left-center-height0'
                    : index == 1
                    ? 'left-center-height1'
                    : ''
                "
                v-for="(item, index) in noticeList"
                :key="index"
              >
                <div style="width: 100%">
                  <div class="left-center-flex">
                    <div class="border"></div>
                    <div class="title-bg">{{ item.name }}</div>
                    <div class="border"></div>
                  </div>
                  <div v-if="index == 0">
                    <div
                      class="rhombus-box"
                      v-for="(em, eindex) in item.list"
                      :key="eindex"
                    >
                      <div
                        class="rhombus-bg"
                        :class="
                          eindex == 0
                            ? 'pink'
                            : eindex == 1
                            ? 'green green-right'
                            : eindex == 2
                            ? 'blue'
                            : eindex == 3
                            ? 'orange orange-right'
                            : eindex == 4
                            ? 'red'
                            : ''
                        "
                      >
                        <span> {{ em.id }}</span>
                      </div>
                      <div
                        :class="
                          eindex == 0
                            ? 'rhombus-border'
                            : eindex == 1
                            ? 'rhombus-border-left'
                            : eindex == 2
                            ? 'rhombus-border'
                            : eindex == 3
                            ? 'rhombus-border-left'
                            : eindex == 4
                            ? 'rhombus-border'
                            : ''
                        "
                      ></div>
                      <div class="rhombus-round"></div>
                      <div class="rhombus-text">{{ em.name }}</div>
                    </div>
                  </div>
                  <div class="square-flex" v-if="index == 1">
                    <div
                      class="square-border"
                      :class="
                        eindex == 0
                          ? 'pink'
                          : eindex == 1
                          ? 'red'
                          : eindex == 2
                          ? 'orange'
                          : eindex == 3
                          ? 'green'
                          : eindex == 4
                          ? 'blue'
                          : ''
                      "
                      v-for="(em, eindex) in item.list"
                      :key="eindex"
                    >
                      <div class="square-border-inner">{{ em.name }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 消息体 -->
        <div
          class="left-bottom-box box-top"
          ref="leftBottomBoxHeight"
          :class="leftBottomBoxHeight > 250 ? '' : 'maxHeight'"
        >
          <div class="border-out">
            <div class="border-inner">
              <vue-seamless-scroll
                :data="msgList"
                :class-option="classOption"
                class="warp-box"
              >
                <div
                  class="left-bottom-border"
                  v-for="(item, index) in msgList"
                  :key="index"
                  ref="refHeight"
                >
                  <div class="header-box-flex">
                    <div class="header-left-box">
                      <div class="type-text">
                        {{ item.msgType == 41 ? "月度计划下发" : "" }}
                        {{ item.subData1 }} {{ item.subData2 }}
                      </div>
                      <div class="name-text">{{ item.subName }}</div>
                    </div>
                    <div class="time-text">{{ item.subTime }}</div>
                  </div>
                  <div class="body"></div>
                </div>
              </vue-seamless-scroll>
            </div>
          </div>
        </div>
      </div>
      <div class="center-box">
        <!-- 月度计划 -->
        <div class="center-top-box">
          <div class="border-out">
            <div class="border-inner">
              <div class="center-top-title">月度计划</div>
              <el-table
                :data="monthlyTableData"
                :header-cell-style="headerRowClass"
                border
                height="95%"
              >
                <el-table-column type="index" label="序号" width="55" fixed />
                <el-table-column prop="dcCh" label="船号" width="80" />
                <el-table-column prop="dcPl" label="批量" width="70" />
                <el-table-column prop="dcFd" label="分段号" width="80" />
                <el-table-column prop="bs" label="板数" width="50" />
                <el-table-column prop="sl" label="上料" width="95" />
                <el-table-column prop="xcpw" label="型材抛丸" width="80" />
                <el-table-column prop="date" label="抛丸" width="70" />
                <el-table-column prop="yklm" label="一垮龙门板数" width="95" />
                <el-table-column prop="yksk" label="一垮数控板数" width="95" />
                <el-table-column
                  prop="ykpkjs"
                  label="坡口切割结束"
                  width="95"
                />
                <el-table-column prop="eksk2" label="二跨龙门板数" width="95" />
                <el-table-column prop="eksk" label="二跨数控板数" width="95" />
                <el-table-column
                  prop="ekskks"
                  label="数控切割开始"
                  width="95"
                />
                <el-table-column
                  prop="ekpkjs"
                  label="坡口切割结束"
                  width="95"
                />
                <el-table-column prop="sksk" label="三跨数控板数" width="95" />
                <el-table-column
                  prop="skskqgks"
                  label="数控切割开始"
                  width="95"
                />
                <el-table-column
                  prop="skpkjs"
                  label="坡口切割结束"
                  width="95"
                />
                <el-table-column prop="skpt" label="三跨平铁板数" width="95" />
                <el-table-column prop="ptks" label="平铁切割开始" width="95" />
                <el-table-column prop="ptjs" label="平铁切割结束" width="95" />
                <el-table-column
                  prop="qpt_zjs"
                  label="曲平铁转结束"
                  width="100"
                />
                <el-table-column prop="qptjs" label="曲平铁结束" width="90" />
                <el-table-column prop="qwbjs" label="曲外板结束" width="90" />
                <el-table-column prop="zl" label="组立" width="70" />
                <el-table-column prop="skbs" label="数控板数" width="70" />
                <el-table-column
                  prop="skqgks"
                  label="数控切割开始"
                  width="95"
                />
                <el-table-column
                  prop="pkqgjs"
                  label="坡口切割结束"
                  width="95"
                />
                <el-table-column prop="mbjb" label="面板挤边" width="70" />
                <el-table-column
                  prop="qkxcms"
                  label="七跨型材米数"
                  width="95"
                />
                <el-table-column prop="xcmb" label="型材面板" width="95" />
                <el-table-column prop="gdjs" label="光电结束" width="95" />
                <el-table-column prop="fdxq" label="分段需求" width="95" />
              </el-table>
            </div>
          </div>
        </div>
        <!-- 作业计划 -->
        <div class="center-bottom-box box-top">
          <div class="border-out">
            <div class="border-inner">
              <div class="center-bottom-title">作业计划</div>
              <div class="center-bottom-select">
                <el-select
                  v-model="formData.zyq"
                  placeholder=""
                  size="mini"
                  @change="zyqChange"
                >
                  <el-option label="一区" :value="1"></el-option>
                  <el-option label="二区" :value="2"></el-option>
                  <el-option label="三区" :value="3"></el-option>
                  <el-option label="四区" :value="4"></el-option>
                  <!-- <el-option label="五区" :value="5"></el-option>
                  <el-option label="六区" :value="6"></el-option> -->
                </el-select>
              </div>
              <el-table
                :data="workTableData"
                :header-cell-style="headerRowClass1"
                height="75%"
              >
                <el-table-column prop="dc_ch" label="船号" width="" />
                <el-table-column prop="dc_pl" label="批量" width="" />
                <el-table-column prop="jhsl" label="计划数量" width="" />
                <el-table-column
                  prop="一区"
                  label="完成数量"
                  width=""
                  v-if="formData.zyq == 1"
                />
                <el-table-column
                  prop="二区"
                  label="完成数量"
                  width=""
                  v-if="formData.zyq == 2"
                />
                <el-table-column
                  prop="三区"
                  label="完成数量"
                  width=""
                  v-if="formData.zyq == 3"
                />
                <el-table-column
                  prop="四区"
                  label="完成数量"
                  width=""
                  v-if="formData.zyq == 4"
                />
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <!-- 本月计划产量 -->
        <div class="right-top-box">
          <div class="border-out">
            <div class="border-inner">
              <div class="right-top-title">本月计划汇总量</div>
              <div class="right-top-text">
                <div
                  class="title-flex"
                  v-for="(item, index) in planList"
                  :key="index"
                >
                  <div>
                    <span>{{ item.name }}：</span>
                  </div>
                  <div class="title-plan">
                    计划：{{ item.zsl ? item.zsl : 0 }}张
                  </div>
                  <div class="title">完成：{{ item.wcl ? item.wcl : 0 }}张</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 作业区 -->
        <div class="right-center-box box-top">
          <div class="border-out">
            <div class="border-inner">
              <dv-scroll-board ref="scrollTable2" :config="tableConfig" />
            </div>
          </div>
        </div>
        <!-- 完成量-与未完成量 -->
        <div class="right-bottom-box box-top">
          <div class="border-out">
            <div class="border-inner">
              <div class="right-bottom-title">作业区完成情况</div>
              <el-row>
                <el-col :span="8">
                  <div id="FinishOnePie" class="FinishOnePie"></div>
                </el-col>
                <el-col :span="8">
                  <div id="FinishSecondPie" class="FinishSecondPie"></div>
                </el-col>
                <el-col :span="8">
                  <div id="FinishThreePie" class="FinishThreePie"></div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div id="FinishFourPie" class="FinishFourPie"></div>
                </el-col>
                <el-col :span="8">
                  <div id="FinishFivePie" class="FinishFivePie"></div>
                </el-col>
                <el-col :span="8">
                  <div id="FinishSixPie" class="FinishSixPie"></div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  kq,
  msg,
  ydjh,
  zyjh,
  getEveryKw,
  zxqZxDetail,
  zxqwcqk,
} from "@/api/realTimeMonitor";
import VueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "RealTimeMonitor",
  components: {
    VueSeamlessScroll,
  },
  data() {
    return {
      //1.出勤
      AttendanceObj: {},
      //2.安全公告
      noticeList: [
        {
          name: "五落实",
          list: [
            {
              id: "01",
              name: "必须落实“党政同责”要求",
            },
            {
              id: "02",
              name: "必须落实安全生产“一岗双责”",
            },
            {
              id: "03",
              name: "必须落实安全生产组织领导机构",
            },
            {
              id: "04",
              name: "必须落实安全管理力量",
            },
            {
              id: "05",
              name: "必须落实安全生产报告制度",
            },
          ],
        },
        {
          name: "五到位",
          list: [
            {
              name: "安 全责 任",
            },
            {
              name: "安 全投 入",
            },
            {
              name: "安 全培 训",
            },
            {
              name: "安 全管 理",
            },
            {
              name: "安 全救 援",
            },
          ],
        },
      ],
      //3.实时消息
      msgList: [],
      leftBottomBoxHeight: 0,
      classOption: {
        step: 2,
        singleHeight: 0,
        waitTime: 1000,
      },
      //4.月度计划
      monthlyTableData: [],
      //5.作业计划
      formData: {
        zyq: 1,
      },
      workTableData: [],
      // 6.计划总量
      planList: [],
      // 7.作业区执行情况
      tableConfig: {
        header: [
          "作业区",
          "船号",
          "批量",
          "分段",
          "套料图号",
          "工序",
          "完成日期",
          "完成人",
        ],
        data: [],
        columnWidth: [45, 65, 40, 40, 88, 30, 70, 60],
        rowNum: 7,
        headerBGC: "#3490ba",
        oddRowBGC: "",
        evenRowBGC: "#063079",
      },
      valueArray: [],
    };
  },
  created() {},
  mounted() {
    this.kq(); //1.考勤接口
    this.msg(); //3.实时消息
    this.ydjh(); //4.月度计划接口
    this.zyjh(); //5.作业计划
    this.getEveryKw(); //6.本月计划汇总量
    this.zxqZxDetail(); //7.作业区执行情况
    this.zxqwcqk(); //8.作业区未完成与完成量对比饼图
    this.leftBottomBoxHeight = this.$refs.leftBottomBoxHeight.offsetHeight;
  },
  methods: {
    headerRowClass() {
      return "background:#072e7d;color:#fff;fontSize:12px; fontWeight: 400; textAlign: center;";
    },
    headerRowClass1() {
      return "background:#60b2ff33;color:#fff;fontSize:12px; fontWeight: 400; textAlign: center;";
    },
    // 1.考勤
    kq() {
      kq().then((res) => {
        this.AttendanceObj = res.data;
        this.AttendancePieChart();
      });
    },
    // 3.实时消息
    msg() {
      msg().then((res) => {
        this.msgList = res.data;
        this.$nextTick(() => {
          const elementHeight = this.$refs.refHeight;
          elementHeight.forEach((li, index) => {
            this.classOption.singleHeight = li.offsetHeight + 10;
          });
        });
      });
    },
    // 4.月度计划
    ydjh() {
      ydjh().then((res) => {
        this.monthlyTableData = res.data;
      });
    },
    // 5.作业计划
    zyqChange(value) {
      this.formData.zyq = value;
      this.zyjh();
    },
    zyjh() {
      zyjh({
        zyq: this.formData.zyq,
      }).then((res) => {
        this.workTableData = res.data;
      });
    },
    // 6.本月计划汇总量
    getEveryKw() {
      getEveryKw().then((res) => {
        this.planList = [];
        res.data.zsl.forEach((item, index) => {
          this.planList.push({
            name:
              index == 0
                ? "上料"
                : index == 1
                ? "一跨"
                : index == 2
                ? "二跨"
                : index == 3
                ? "三跨"
                : index == 4
                ? "四五六跨"
                : "",
            zsl: res.data.zsl[index],
            wcl: res.data.wcl[index],
          });
        });
      });
    },
    // 7.作业区执行情况
    zxqZxDetail() {
      zxqZxDetail().then((res) => {
        let data = [];
        res.data.forEach((item, index) => {
          data.push({
            zyq: item.zyq,
            dcCh: item.dcCh,
            dcPl: item.dcPl,
            dcFd: item.dcFd,
            tzbh: item.tzbh,
            gx: item.gx,
            compAt: item.compAt,
            name: item.name,
          });
        });
        let valueArray = data.map((obj) => Object.values(obj));
        this.$nextTick(() => {
          this.$refs["scrollTable2"].updateRows(valueArray);
        });
      });
    },
    // 8.作业区未完成与完成量对比饼图
    zxqwcqk() {
      zxqwcqk().then((res) => {
        let oneValue = [0, 0];
        let secondValue = [0, 0];
        let threeValue = [0, 0];
        let fourValue = [0, 0];
        let fiveValue = [0, 0];
        let sixValue = [0, 0];
        res.data.forEach((item) => {
          if (item.zyq == "一区") {
          } else if (item.zyq == "二区") {
            oneValue = [item.wcl, item.wc];
          } else if (item.zyq == "三区") {
            threeValue = [item.wcl, item.wc];
          } else if (item.zyq == "四区") {
            fourValue = [item.wcl, item.wc];
          } else if (item.zyq == "五区") {
            fiveValue = [item.wcl, item.wc];
          } else if (item.zyq == "六区") {
            sixValue = [item.wcl, item.wc];
          }
        });
        this.FinishOnePie(oneValue[0], oneValue[1]);
        this.FinishSecondPie(secondValue[0], secondValue[1]);
        this.FinishThreePie(threeValue[0], threeValue[1]);
        this.FinishFourPie(fourValue[0], fourValue[1]);
        this.FinishFivePie(fiveValue[0], fiveValue[1]);
        this.FinishSixPie(sixValue[0], sixValue[1]);
      });
    },
    AttendancePieChart() {
      var myChart = this.$echarts.init(
        document.getElementById("AttendancePie")
      );
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          y: "10%",
          right: "2%",
          data: ["白班", "二班"],
          textStyle: {
            color: "#e9ebee",
          },
        },
        graphic: {
          elements: [
            {
              type: "group",
              left: 10,
              top: 25,
              children: [
                {
                  type: "text",
                  z: 99999,
                  left: "center",
                  top: "middle",
                  itemStyle: {
                    color: "#ffffff",
                  },
                  style: {
                    fontSize: 14,
                    fill: "#ffffff",
                    text: [
                      `总人数: ${this.AttendanceObj.total}人`,
                      "",
                      `出勤率: 100%`,
                      "",
                      `白班: ${this.AttendanceObj.bb}人`,
                      "",
                      `二班: ${this.AttendanceObj.eb}人`,
                    ].join("\n"),
                  },
                },
              ],
            },
          ],
        },
        series: [
          {
            radius: "70%",
            type: "pie",
            center: ["50%", "50%"],
            data: [
              {
                value: this.AttendanceObj.eb,
                name: "白班",
                itemStyle: {
                  color: "#2865aa",
                },
              },
              {
                value: this.AttendanceObj.bb,
                name: "二班",
                itemStyle: {
                  color: "#ff81cb",
                },
              },
            ],
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    FinishOnePie(wclValue, wcValue) {
      var myChart = this.$echarts.init(document.getElementById("FinishOnePie"));
      var option = {
        title: {
          text: "作业一区",
          left: "50%",
          bottom: 0,
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        color: ["#73c0de", "#5470c6"],
        legend: {
          show: true,
          left: "left",
          top: "2%",
          orient: "vertical",
          textStyle: {
            color: "#e9ebee",
          },
          itemWidth: 10,
          itemHeight: 10,
        },
        series: [
          {
            name: "作业一区",
            type: "pie",
            radius: ["30%", "60%"],
            center: ["70%", "40%"],
            minAngle: wcValue && wclValue ? 20 : "",
            avoidLabelOverlap: true,
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
            data: [
              { value: wcValue, name: "完成量" },
              { value: wclValue, name: "未完成量" },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    FinishSecondPie(wclValue, wcValue) {
      var myChart = this.$echarts.init(
        document.getElementById("FinishSecondPie")
      );

      var option = {
        title: {
          text: "作业二区",
          left: "50%",
          // left: "center",
          bottom: 0,
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight: "normal",
          },
        },
        color: ["#91cc75", "#fac858"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          show: true,
          left: "left",
          top: "2%",
          orient: "vertical",
          textStyle: {
            color: "#e9ebee",
          },
          itemWidth: 10,
          itemHeight: 10,
        },
        series: [
          {
            name: "作业二区",
            type: "pie",
            radius: ["30%", "60%"],
            center: ["70%", "40%"],
            minAngle: wcValue && wclValue ? 20 : "",
            avoidLabelOverlap: true,
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },

            data: [
              { value: wcValue, name: "完成量" },
              { value: wclValue, name: "未完成量" },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    FinishThreePie(wclValue, wcValue) {
      var myChart = this.$echarts.init(
        document.getElementById("FinishThreePie")
      );

      var option = {
        title: {
          text: "作业三区",
          left: "50%",
          // left:"center",
          bottom: 0,
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        color: ["#ee6666", "#5470c6"],
        legend: {
          show: true,
          left: "left",
          top: "2%",
          orient: "vertical",
          textStyle: {
            color: "#e9ebee",
          },
          itemWidth: 10,
          itemHeight: 10,
        },
        series: [
          {
            name: "作业三区",
            type: "pie",
            radius: ["30%", "60%"],
            center: ["70%", "40%"],
            minAngle: wcValue && wclValue ? 20 : "",
            avoidLabelOverlap: true,
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },

            data: [
              { value: wcValue, name: "完成量" },
              { value: wclValue, name: "未完成量" },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    FinishFourPie(wclValue, wcValue) {
      var myChart = this.$echarts.init(
        document.getElementById("FinishFourPie")
      );

      var option = {
        title: {
          text: "作业四区",
          left: "48%",
          // left:"center",
          bottom: 0,
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight: "normal",
          },
        },
        color: ["#ff81cb", "#2865aa"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          show: true,
          left: "left",
          top: "2%",
          orient: "vertical",
          textStyle: {
            color: "#e9ebee",
          },
          itemWidth: 10,
          itemHeight: 10,
        },
        series: [
          {
            name: "作业四区",
            type: "pie",
            radius: ["30%", "60%"],
            center: ["70%", "40%"],
            minAngle: wcValue && wclValue ? 20 : "",
            minAngle: 20,
            avoidLabelOverlap: true,
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },

            data: [
              { value: wcValue, name: "完成量" },
              { value: wclValue, name: "未完成量" },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    FinishFivePie(wclValue, wcValue) {
      var myChart = this.$echarts.init(
        document.getElementById("FinishFivePie")
      );

      var option = {
        title: {
          text: "作业五区",
          left: "48%",
          bottom: 0,
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          show: true,
          left: "left",
          top: "2%",
          orient: "vertical",
          textStyle: {
            color: "#e9ebee",
          },
          itemWidth: 10,
          itemHeight: 10,
        },
        series: [
          {
            name: "作业五区",
            type: "pie",
            radius: ["30%", "60%"],
            center: ["70%", "40%"],
            minAngle: wcValue && wclValue ? 20 : "",
            minAngle: 20,
            avoidLabelOverlap: true,
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },

            data: [
              { value: wcValue, name: "完成量" },
              { value: wclValue, name: "未完成量" },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    FinishSixPie(wclValue, wcValue) {
      var myChart = this.$echarts.init(document.getElementById("FinishSixPie"));

      var option = {
        title: {
          text: "作业六区",
          left: "50%",
          bottom: 0,
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight: "normal",
          },
        },
        color: ["#73c0de", "#fac858"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          show: true,
          top: "2%",
          left: "left",
          orient: "vertical",
          textStyle: {
            color: "#e9ebee",
          },
          itemWidth: 10,
          itemHeight: 10,
        },
        series: [
          {
            name: "作业六区",
            type: "pie",
            radius: ["30%", "60%"],
            center: ["70%", "40%"],
            minAngle: wcValue && wclValue ? 20 : "",
            avoidLabelOverlap: true,
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },

            data: [
              { value: wcValue, name: "完成量" },
              { value: wclValue, name: "未完成量" },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.realTimeMonitor-container {
  margin-top: 2%;
  padding-left: 5px;
  padding-right: 5px;
  .realTimeMonitor-box {
    display: flex;
    align-items: center;
    height: calc(100vh - 80px);
    .left-box {
      width: 23%;
      height: 100%;
      margin-right: 5px;
      //   出勤情况
      .left-top-box {
        height: 25%;
        .left-top-title {
          width: 40%;
          height: 22px;
          background-image: url("@/assets/image/tit01s.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          margin: 0 auto;
          font-size: 14px;
          color: #ffffff;
          text-align: center;
          margin: 0 auto;
        }
        .AttendancePie {
          height: 88%;
        }
      }
      //   安全公告
      .left-center-box {
        height: 40%;
        .left-center-title {
          width: 40%;
          height: 22px;
          background-image: url("@/assets/image/tit01s.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          margin: 0 auto;
          font-size: 14px;
          color: #ffffff;
          text-align: center;
          margin: 0 auto;
        }
        // .left-center-box-flex {
        //   width: 100%;
        //   height: 92%;
        //   display: flex;
        //   justify-content: center;
        //   align-items: center;
        //   .left-center-box-width{
        //     width: 100%;
        //     height: 100%;
        //   }
        // }
        .left-center-height0 {
          width: 100%;
          height: 58%;
          display: flex;
          align-items: center;
          padding: 1%;
        }
        .left-center-height1 {
          height: 42%;
        }
        .left-center-text {
          font-size: 12px;
          position: relative;
          .left-center-flex {
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            margin-top: 2%;
            margin-bottom: 2%;
            .border {
              width: 20%;
              border-top: 1px solid #ee6666;
            }
            .title-bg {
              color: #fff;
              background: #ee6666;
              width: 4.5rem;
              text-align: center;
              border-radius: 20px;
              position: relative;
            }
          }
          .rhombus-box {
            display: flex;
            align-items: center;
            padding-left: 4%;
            padding-right: 2%;

            .rhombus-bg {
              width: 1.6rem;
              height: 1.6rem;
              transform: rotate(140deg);
              color: #fff;
              font-weight: bold;
              text-align: center;
              line-height: 1.6rem;
            }
            .green-right,
            .orange-right {
              margin-left: 7%;
            }
            span {
              transform: rotate(-140deg);
              position: absolute;
              right: 5px;
            }
            .rhombus-border {
              width: 20%;
              border-bottom: 1px solid #ee6666;
            }
            .rhombus-border-left {
              width: 13%;
              border-bottom: 1px solid #ee6666;
            }
            .rhombus-round {
              width: 5px;
              height: 5px;
              border-radius: 5px;
              background-color: #ee6666;
              margin-right: 8px;
            }
            .rhombus-text {
              width: 62%;
              color: #fff;
              padding: 2px;
              border: 1px solid #ee6666;
              border-radius: 2px;
              padding-left: 10px;
            }
          }
          .square-flex {
            // width: 95%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #fff;
            font-weight: bold;
            margin: 0 auto;
            margin-top: 3%;
            padding-left: 5%;
            padding-right: 5%;
            .square-border {
              width: 2.4rem;
              height: 2.4rem;
              text-align: center;
              border: 1px solid;
              padding: 0.1rem;
              border-radius: 4px;
              .square-border-inner {
                width: 2.3rem;
                height: 2.3rem;
                border: 1px solid;
                border-radius: 4px;
              }
            }
          }
          .pink {
            background: #ff81cb;
          }
          .red {
            background-color: #ee6666;
          }
          .orange {
            background-color: #fac858;
          }
          .green {
            background-color: #91cc75;
          }
          .blue {
            background-color: #73c0de;
          }

          .text-in {
            text-indent: 2ch;
          }
        }
      }
      //   消息体
      .left-bottom-box {
        height: 34%;
        display: flex;
        align-items: center;
        .warp-box {
          height: 100%;
          overflow: hidden;
        }
        .border-inner {
          // padding-top: 2%;
          // padding-bottom: 10px;
        }

        .left-bottom-border {
          border: 1px solid #3490ba;
          border-radius: 2px;
          margin: 10px 5px 0 5px;
          padding-right: 5px;
          height: 80px !important;
          .header-box-flex {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #fff;
            .header-left-box {
              display: flex;
              align-items: center;
              .type-text {
                // width: 150px;
                background-image: url("@/assets/image/pushmessage_class.png");
                background-size: 100%;
                background-repeat: no-repeat;
                padding-left: 0.5rem;
                padding-right: 0.5rem;
                white-space: nowrap;
                line-height: 25px;
                color: #fff;
                font-size: 11px;
                text-align: center;
              }
              .name-text {
                background-image: url("@/assets/image/pushmessage_level03.png");
                background-size: 100%;
                background-repeat: no-repeat;
                // width: 10rem;
                padding-left: 0.5rem;
                padding-right: 0.5rem;
                white-space: nowrap;
                color: #fff;
                font-size: 10px;
                text-align: center;
                margin-left: 5%;
              }
            }
            .time-text {
              width: 100%;
              color: #4a97da;
              font-size: 10px;
              line-height: 25px;
              text-align: right;
              display: block;
              float: right;
              margin-right: 5px;
            }
          }
          .body {
            display: flex;
            justify-content: flex-start;
            font-size: 0.8rem;
            margin: 10px;
            color: #2c85d2;
            .body1 {
              margin-right: 5%;
            }
          }
        }
      }

      .maxHeight {
        .left-bottom-border {
          height: 60px !important;
        }
      }
    }
    .center-box {
      width: 54%;
      height: 100%;
      .center-top-title {
        width: 40%;
        height: 24px;
        background-image: url("@/assets/image/tit01s.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin: 0 auto;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
        margin: 0 auto;
      }
      //   月度计划
      .center-top-box {
        height: 65.5%;
        .el-table {
          border-top-left-radius: 8px !important;
          border-top-right-radius: 8px !important;
        }
      }
      //   作业计划
      .center-bottom-box {
        height: 34%;
        position: relative;
        .center-bottom-title {
          width: 40%;
          height: 24px;
          background-image: url("@/assets/image/tit01s.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          margin: 0 auto;
          font-size: 14px;
          color: #ffffff;
          text-align: center;
          margin: 0 auto;
        }
        .el-table {
          border-top-left-radius: 4px !important;
          border-top-right-radius: 4px !important;
        }
        .center-bottom-select {
          text-align: right;
          margin-bottom: 10px;
          margin-top: -10px;
          margin-right: 5px;
          // position: absolute;
          // right: 5px;
          // top: -50px;
        }
      }
    }
    .right-box {
      width: 23%;
      height: 100%;
      margin-left: 5px;
      //   本月计划产量
      .right-top-box {
        height: 25%;

        .right-top-title {
          height: 12%;
          padding-top: 2%;
          text-align: left;
          text-indent: 0.7em;
          font-size: 16px;
          font-weight: bold;
          color: white;
        }
        .right-top-text {
          height: 74%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 5%;
          color: #3490ba;
          font-size: 16px;
          padding: 3% 0;
          .title-flex {
            display: flex;
            .title-plan {
              width: 47%;
            }
            .title {
              width: 53%;
            }
            span {
              width: 70px;
              text-align: left;
              display: inline-block;
              color: #fff !important;
              font-size: 14px !important;
            }
          }
        }
      }
      //   作业区
      .right-center-box {
        height: 40%;
      }
      //   完成率与未完成量
      .right-bottom-box {
        height: 34%;
        .right-bottom-title {
          padding-top: 2%;
          text-align: left;
          text-indent: 0.7em;
          font-size: 16px;
          font-weight: bold;
          color: white;
          margin-bottom: 3%;
        }
        .FinishOnePie,
        .FinishSecondPie,
        .FinishThreePie,
        .FinishFourPie,
        .FinishFivePie,
        .FinishSixPie {
          width: 100%;
          height: 12vh;
        }
      }
    }
  }
  .border-out {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px #0174f5 solid;
    padding: 1px;
    box-sizing: border-box;
  }
  .border-inner {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px solid #016ae0;
    border-radius: 10px;
  }
  .box-top {
    margin-top: 5px;
  }
  .border-inner {
    background-color: rgba(2, 8, 23, 0.1);
  }
}
::v-deep {
  .dv-scroll-board {
    width: auto !important;
    height: 100% !important;
  }
  .dv-scroll-board .header {
    font-size: 10px !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
  }
  .dv-scroll-board .header .header-item,
  .dv-scroll-board .rows .ceil {
    padding: 0 !important;
    text-align: center !important;
  }
  .dv-scroll-board .rows .row-item {
    font-size: 10px !important;
  }

  .center-top-box {
    // .el-table th.el-table__cell {
    //   background-color: #072e7d !important;
    // }
    // .el-table .el-table__body tr.el-table__row:nth-child(even) ,.el-table__fixed tr.el-table__row:nth-child(even){
    //   background-color: #072e7d !important;
    // }
    // .el-table .el-table__fixed {
    //   background-color: #072e7d;
    // }
    // .el-table__row--striped td {
    //   background-color: #073e8a !important;
    // }
    .el-table--border .el-table__cell,
    .el-table__body-wrapper
      .el-table--border.is-scrolling-left
      ~ .el-table__fixed,
    .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
      border-color: rgba(52, 144, 186, 0.3) !important;
    }
    .el-table__body tr.hover-row.current-row > td,
    .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
    .el-table__body tr.hover-row.el-table__row--striped > td,
    .el-table__body tr.hover-row > td {
      background-color: #60b2ff33 !important;
    }
    .el-table__body tr:hover > td {
      background-color: #60b2ff33 !important;
    }
    .el-table--border th.el-table__cell.gutter:last-of-type {
      background-color: rgba(1, 1, 1, 0.3);
    }
  }
  .center-bottom-box {
    .el-table th.el-table__cell {
      background-color: #60b2ff33 !important;
    }
    .el-table .el-table__body tr.el-table__row:nth-child(even) {
      background-color: rgba(96, 178, 255, 0.1) !important;
    }
    .el-table--border .el-table__cell,
    .el-table__body-wrapper
      .el-table--border.is-scrolling-left
      ~ .el-table__fixed,
    .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
      border: none !important;
    }
    .el-table__body tr:hover > td {
      background-color: #072e7d !important;
    }
  }
}
</style>
