<template>
  <!-- 系统首页 -->
  <div class="allPage">
    <!-- 页面最上面部分 -->
      <div class="top">
        <div class="intellTop" v-for="(item, index) in topMssage" :key="index" @click="changeDia(item)">
          <div class="intellTop_left" :class="item.num>0?'showIntell': ''"></div>
            <div class="intellTop_right" :style="{'background-color': item.color}">
              <div class="intellTop_msg">
                  <div class="num_box">{{item.num}}</div>
                  <div>{{item.name}}</div>
              </div>
              <img :src="item.img" alt="">
            </div>
        </div>
      </div>

    <!-- 页面中间部分 -->
    <div class="middle">
      <el-card style="width: 33%">
        <div class="tx">最新隐患报告</div>
        <el-table
          :data="reportTableData"
          border
          style="width: 100%; height: calc(100% - 20px); overflow-y: scroll"
        >
          <el-table-column
            prop="reportName"
            label="报告名称"
            align="center"
          />
          <!-- <el-table-column
            prop="stationName"
            label="风场名称"
            align="center"
            min-width="50"
          /> -->
          <el-table-column
            prop="reportDate"
            label="报告时间"
            align="center"
            min-width="50"
          />
          <el-table-column
            prop="checkReport"
            label="查看报告"
            align="center"
            min-width="50"
          >
            <template #default="scope">
              <el-button type="text" @click="Report(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <el-card class="mi_box">
        <div class="tx">设备隐患巡检</div>
        <div class="infoBox">
          <div class="infoItem" @click="jumpPage('statistics')">
            <div class="lineTop" style="width: 50%; left: 50%"></div>
            <div class="itemImg1"></div>
            <div class="comtentBox">
              <div class="contentItem" v-for="(item,index) in onSiteInspection.statistics" :key="index" @click="jumpPage('statistics', item)">
                <div class="desc">{{item.name}}</div>
                <div class="num">{{item.count}}</div>
                <div class="unit">(个)</div>
              </div>
              <div class="arr"></div>
              <div class="sanjiaoDown"></div>
            </div>
          </div>
          <div class="infoItem">
            <div class="lineTop"></div>
            <div class="itemImg2"></div>
            <div class="comtentBox">
              <div class="contentItem" @click="jumpPage('review')">
                <div class="desc">已审核</div>
                <div class="num">{{onSiteInspection.YSH}}</div>
                <div class="unit">(个)</div>
              </div>
              <div class="contentItem" @click="jumpPage('statistics')">
                <div class="desc">待审核</div>
                <div class="num">{{onSiteInspection.DSH}}</div>
                <div class="unit">(个)</div>
              </div>
              <div class="arr"></div>
              <div class="sanjiaoUp" style="bottom:96%;"></div>
              <div class="sanjiaoRight"></div>
            </div>
          </div>
          <div class="infoItem">
            <div class="lineTop"></div>
            <div class="itemImg3"></div>
            <div class="comtentBox">
              <div class="contentItem" @click="jumpPage('plan')">
                <div class="desc">已计划</div>
                <div class="num">{{onSiteInspection.YJH}}</div>
                <div class="unit">(个)</div>
              </div>
              <div class="contentItem" @click="jumpPage('plan')">
                <div class="desc">未计划</div>
                <div class="num">{{onSiteInspection.WJH}}</div>
                <div class="unit">(个)</div>
              </div>
              <div class="arr"></div>
              <div class="sanjiaoUp" style="bottom:96%;"></div>
              <div class="sanjiaoRight"></div>
            </div>
          </div>
          <div class="infoItem">
            <div class="lineTop" style="width: 50%; left: 0"></div>
            <div class="itemImg4"></div>
            <div class="comtentBox">
              <div class="contentItem" @click="jumpPage('result')">
                <div class="desc">已巡检</div>
                <div class="num">{{onSiteInspection.YXJ}}</div>
                <div class="unit">(个)</div>
              </div>
              <div class="contentItem" @click="jumpPage('result')">
                <div class="desc">待巡检</div>
                <div class="num">{{onSiteInspection.DXJ}}</div>
                <div class="unit">(个)</div>
              </div>
              <div class="arr"></div>
              <div class="sanjiaoDown"></div>
              <div class="sanjiaoRight"></div>
            </div>
          </div>
          <div class="lineBottom"></div>
        </div>
      </el-card>

      <!-- <el-card class="mi_box">
        <div class="tx">隐患排查统计及准确率</div>
        <div style="height: 100%; width: 100%" id="chartA"></div>
      </el-card> -->
    </div>

    <!-- 页面底部分 -->
    <div class="bottom">
      <el-card class="bo_box">
        <div style="display:flex;position:relative">
            <div class="tx">预警规则({{alertruleData.SUM}})</div>
            <div style="position: absolute;right: 0px;top: -13px;">
                <el-select v-model="alertruleWind" clearable placeholder="请选择机型" size="small" @change="changeAlertru">
                    <el-option
                    v-for="item in alertruleOptions"
                    :key="item.pointModels"
                    :label="item.pointModels"
                    :value="item.pointModels"
                    />
                </el-select>
            </div>
        </div>
        <div class="BaBian">
          <div class="No_one">
            <div class="YePian" @click="jumpIntell('YP')"></div>
            <div class="text">
              <div class="number">{{alertruleData.YP}}</div>
              <div class="number_unit">(个)</div>
            </div>

            <div class="CeFeng" @click="jumpIntell('CFXT')"></div>
            <div class="text">
              <div class="number">{{alertruleData.CFXT}}</div>
              <div class="number_unit">(个)</div>
            </div>
          </div>

          <div class="No_two">
            <div class="ChiLunXiang" @click="jumpIntell('CLX')"></div>
            <div class="text">
              <div class="number">{{alertruleData.CLX}}</div>
              <div class="number_unit">(个)</div>
            </div>

            <div class="ZhuZhou" @click="jumpIntell('ZZ')"></div>
            <div class="text">
              <div class="number">{{alertruleData.ZZ}}</div>
              <div class="number_unit">(个)</div>
            </div>
          </div>

          <div class="No_three">
            <div class="YeYa" @click="jumpIntell('YYXT')"></div>
            <div class="text">
              <div class="number">{{alertruleData.YY}}</div>
              <div class="number_unit">(个)</div>
            </div>

            <div class="BianJiang" @click="jumpIntell('BJXT')"></div>
            <div class="text">
              <div class="number">{{alertruleData.BJXT}}</div>
              <div class="number_unit">(个)</div>
            </div>
          </div>

          <div class="No_four">
            <div class="PianHang" @click="jumpIntell('PHXT')"></div>
            <div class="text">
              <div class="number">{{alertruleData.PHXT}}</div>
              <div class="number_unit">(个)</div>
            </div>

            <div class="FaDian" @click="jumpIntell('FDJ')"></div>
            <div class="text">
              <div class="number">{{alertruleData.FDJ}}</div>
              <div class="number_unit">(个)</div>
            </div>
          </div>

          <div class="No_five">
            <div class="JiaoPin" @click="jumpIntell('BXT')"></div>
            <div class="text">
              <div class="number">{{alertruleData.BPXT}}</div>
              <div class="number_unit">(个)</div>
            </div>

            <div class="QiTa" @click="jumpIntell('QT')"></div>
            <div class="text">
              <div class="number">{{alertruleData.QT}}</div>
              <div class="number_unit">(个)</div>
            </div>
          </div>
        </div>
      </el-card>

      <el-card class="bo_box">
        <div class="tx">预警分布</div>
        <div class="chartB" style="height: 100%; width: 100%" id="chartB" @click="HTjump('HT')"></div>
      </el-card>

      <el-card class="bo_box">
        <div class="tx">重要预警排行</div>
        <div id="reportChart" style="height: 100%; width: 100%" @click="ZTjump('ZT')"></div>
      </el-card>
    </div>
    <!-- 预警dialog对话框 -->
    <el-dialog v-model="dialogVisible" :title="diaTitle" width="70%" class="topIntellDia">
        <div class="diaMsg">
            <el-table :data="diaMsgTableData" border style="width: 100%">
                <el-table-column prop="windpowerstationName" label="场站名称" />
                <el-table-column prop="windturbineid" label="风机编号" />
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="description" label="描述" />
                <el-table-column prop="lastUpdateTime" label="预警时间" />
            </el-table>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 隐患报告dialog对话框 -->
    <el-dialog
      v-model="dialogReportVisible"
      width="80%"
      :before-close="dialogClose"
      custom-class="currentPdfDialogStyle"
    >
      <el-button style="margin-left: 20px" type="danger" @click="savePdf"
        >导出(PDF)</el-button
      >
      <div class="pdfDom">
        <!-- 标题 -->
        <div class="title" style="font-size: xx-large; text-align: center">
          {{ reportName }}
        </div>
        <!-- 内容 -->
        <el-descriptions size="large" :column="1" >
          <el-descriptions-item label="风场名称：">{{
            stationName
          }}</el-descriptions-item>
          <el-descriptions-item label="风机型号：">{{
            model
          }}</el-descriptions-item>
          <el-descriptions-item label="报告日期：">{{
            reportDate
          }}</el-descriptions-item>
          <el-descriptions-item label="分析时间："
            >{{ statStartDate }} 至 {{ statEndDate }}</el-descriptions-item
          >
          <el-descriptions-item label="分析规则：">{{
            ruleName
          }}</el-descriptions-item>
        </el-descriptions>
        <div class="ruleDescBox">
          <p
            class="ruleDesc"
            v-for="(item, index) in ruleDescArray"
            :key="index"
          >
            {{ index + 1 }}.&nbsp;{{ item }}
          </p>
        </div>
        <!-- 表1 -->
        <div class="ech1">
          <div style="margin: 12px 0 20px 0; font-weight: bolder;">
            根据以上规则上周表现最差的风机：
          </div>
          <el-table
            :data="tableData"
            style="width: 100%"
            :header-row-class-name="tableRowClassName"
          >
            <el-table-column prop="ruleName" label="风机编号" align="center" />
            <el-table-column
              :label="item.label"
              :align="item.align"
              v-for="(item, index) in tHeard"
              :key="index"
            >
              <el-table-column
                :prop="`${item.id}Count`"
                label="次数"
                align="center"
              />
              <el-table-column
                :prop="`${item.id}KeepTime`"
                label="时长(分钟)"
                align="center"
              />
            </el-table-column>
          </el-table>

          <!-- <div style="height: 500px; width: 100%" id="ChartA"></div> -->
        </div>

        <!-- 结论 -->
        <div>
          <div style="margin: 12px 0 20px 0; font-weight: bolder">结论：</div>
          <div class="conclusionBox">
            <div
              class="resultBox"
              v-for="(pItem, pIndex) in conclusionArray"
              :key="pIndex"
            >
              <p
                class="resultItem"
                v-for="(cItem, cIndex) in pItem"
                :key="cIndex"
                v-show="cItem"
              >
              <template v-if="cItem.split(':').length > 1">
                <span style="font-weight: 700;">{{cItem.split(':')[0]}}:</span>
                <span>{{ cItem.split(':')[1] }}</span>
              </template>
              <pre v-else>{{ cItem }}</pre>
              </p>
            </div>
          </div>

          <!-- 表2 -->
          <div class="ech2" v-if="showCompared">
            <div style="margin: 12px 0 20px 0; font-weight: bolder">
              本周与上周对比：
            </div>
            <el-table
              :data="tableDataTwo"
              style="width: 100%"
              :header-row-class-name="tableRowClassName"
            >
              <el-table-column
                prop="ruleName"
                label="风机编号"
                align="center"
              />
              <el-table-column
                :label="item.label"
                :align="item.align"
                v-for="(item, index) in tHeardTwo"
                :key="index"
              >
                <el-table-column label="本周" align="center"
                  ><el-table-column
                    :prop="`${item.id}BzCount`"
                    label="次数"
                    align="center" />
                  <el-table-column
                    :prop="`${item.id}BzKeepTime`"
                    label="时长(分钟)"
                    align="center"
                /></el-table-column>
                <el-table-column label="上周" align="center"
                  ><el-table-column
                    :prop="`${item.id}SzCount`"
                    label="次数"
                    align="center" />
                  <el-table-column
                    :prop="`${item.id}SzKeepTime`"
                    label="时长(分钟)"
                    align="center"
                /></el-table-column>
              </el-table-column>
            </el-table>
            <!-- <div style="height: 500px" height="100%" id="ChartB"></div> -->
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { timeout } from "q";
import { nextTick } from "vue";
import img1 from "../assets/img/topIntell.png";
import img2 from "../assets/img/topIntell1.png";
import img3 from "../assets/img/topIntell2.png";
import img4 from "../assets/img/topIntell3.png";
import {
  getintellList,
  getReportList,
  getHomeOrdercount,
  getHomeAlertrule,
  getHomeDangerHidden,
  getHomeDurationTotal,
  getReportDetail,
  getStationinfo,
} from "/@/api/api.js";
import Get_PDF from "/@/tools/htmlToPdf.js";
export default {
  data() {
    return {
      model: "",
      showCompared: false,
      reportTableData: [],
      dialogVisible: false,
      topMssage: [],
      diaMsgTableData: [],
      diaTitle: "",
      ordercountArr: {},
      onSiteInspection: {},
      alertruleData: {},
      alertruleWind: "",
      alertruleOptions: [],

      dialogReportVisible: false,
      tHeard: [],
      tHeardTwo: [],
      tableData: [],
      tableDataTwo: [],
      ruleDescArray: [],
      conclusionArray: [],
      tableRowClassName: "cuttentTableStyle",
      timer: null, //定时器名称
    };
  },
  created() {
    this.sendRequest();
  },

  mounted() {
    this.$nextTick(() => {
      this.getHomeDangerHiddenData();
      this.getDetailDistribution();
    });
    this.timer = setInterval(() => {
      this.sendRequest();
    }, 1000 * 30);
  },

  unmounted() {
    clearInterval(this.timer);
    this.timer = null;
  },

  methods: {
    sendRequest() {
      this.$nextTick(() => {
        this.getintellTopList();
        this.getReportTopList();
        this.getCount();
        this.getHomeAlertrule();
        this.getdatadictionaryList();
      });
    },
    //最新隐患报告
    getReportTopList() {
      let params = {
        pagenum: "1",
        pagesize: "12",
        stationid: "",
      };
      getReportList(params).then((res) => {
        if (res && res.status === 20000) {
          if (res.data.records) {
            this.reportTableData = res.data.records;
          }
        }
      });
    },
    //获取设备隐患巡检数量
    getCount() {
      getHomeOrdercount().then((res) => {
        if (res && res.data) {
          this.ordercountArr = res.data;
          this.onSiteInspection = {
            statistics: res.data.report,
            YSH: res.data.order.YSH,
            DSH: 0,
            YJH: res.data.order.YJH,
            WJH: res.data.order.WJH,
            YXJ: res.data.order.YXJ,
            DXJ: res.data.order.DXJ,
          };
          let count = 0;
          res.data.report.forEach((item) => {
            count += item.count;
          });
          this.onSiteInspection.DSH = count;
        }
      });
    },
    //获取头部报警信息
    getintellTopList() {
      getintellList("").then((res) => {
        if (res && res.status === 20000) {
          if (res.data) {
            let intellArr = [];
            for (let i in res.data) {
              let obj = {};
              if (i === "1") {
                obj.name = "紧急风险预警";
                obj.color = "#3f90ec";
                obj.num = res.data[i].length;
                obj.data = res.data[i];
                obj.img = img1;
              } else if (i === "2") {
                obj.name = "实时风险预警";
                obj.color = "#eb5f7f";
                obj.num = res.data[i].length;
                obj.data = res.data[i];
                obj.img = img2;
              } else if (i === "windturbine") {
                obj.name = "SCADA报警";
                obj.color = "#7860e9";
                obj.num = res.data[i].length;
                obj.data = res.data[i];
                obj.img = img3;
              } else if (i === "SYZ") {
                obj.name = "升压站报警";
                obj.color = "#ec803c";
                obj.num = res.data[i].length;
                obj.data = res.data[i];
                obj.img = img4;
              }
              intellArr.push(obj);
            }
            this.topMssage = intellArr;
          }
        }
      });
    },
    // 预警规则
    getHomeAlertrule(val) {
      let params = {
        station: "",
        modelid: val ? val : "",
      };
      getHomeAlertrule(params).then((res) => {
        if (res && res.status === 20000) {
          this.alertruleData = res.data;
        }
      });
    },
    // 隐患分布数据
    getHomeDangerHiddenData() {
      getHomeDangerHidden().then((res) => {
        if (res && res.count > 0) {
          let pieArr = [];
          res.data.forEach((item) => {
            let obj = {
              value: Math.ceil(item.time),
              name: item.codeName,
            };
            pieArr.push(obj);
          });
          this.getIntellPie("chartB", pieArr);
        }
      });
    },
    // 明细分布数据
    getDetailDistribution() {
      getHomeDurationTotal().then((res) => {
        if (res && res.count > 0) {
          let yAxis = [];
          let series = [];
          res.data.forEach((item, index) => {
            if (index < 7) {
              yAxis.unshift(item.windturbineName);
              series.unshift(Math.ceil(item.time));
            }
          });
          this.getAccuracyBar("reportChart", yAxis, series);
        }
      });
    },
    //机型
    async getdatadictionaryList() {
      const data = await getStationinfo("");
      if (data && data.count > 0) {
        let alertruleOptions = [];

        data.data.forEach((pEle) => {
          pEle.modelList.forEach((pointModels) => {
            alertruleOptions.push({
              pointModels,
            });
          });
        });
        this.alertruleOptions = alertruleOptions;
      }
      // let arr = []
      // data.forEach(e => {
      // arr.push(...e.pointModelList)
      // });
      // state.modelList = [...new Set(arr)]
    },
    changeAlertru(val) {
      this.getHomeAlertrule(val);
    },
    jumpPage(type) {
      if (type === "statistics") {
        this.$router.push({ path: "/faultDiagnosis/dangerReportReview" });
      } else {
        this.$router.push({ path: "/faultDiagnosis/patrolInspectionPlan" });
      }
    },
    jumpIntell(type) {
      this.$router.push({ path: "/alarmConfig/custom", query: { name: type } });
    },
    HTjump(type) {
      this.$router.push({
        path: "/faultDiagnosis/statistics",
        query: { name: type },
      });
    },
    ZTjump(type) {
      this.$router.push({
        path: "/faultDiagnosis/warning",
        query: { name: type },
      });
    },
    changeDia(item) {
      this.dialogVisible = true;
      this.diaTitle = item.name;
      this.diaMsgTableData = item.data;
    },
    getIntellPie(item, series) {
      const chartDom = document.getElementById(item);
      chartDom && chartDom.removeAttribute("_echarts_instance_");
      let myChart = echarts.init(chartDom);
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "1%",
          left: "center",
        },
        series: [
          {
            name: "时长",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: series,
          },
        ],
      };
      // 基于准备好的dom，初始化echarts实例
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    getAccuracyBar(item, yaxis, seriesFn) {
      const chartDom = document.getElementById(item);
      chartDom.removeAttribute("_echarts_instance_");
      let myChart = echarts.init(chartDom);
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          top: "10%",
          left: "3%",
          right: "8%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          name: "分钟",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          name: "风机",
          data: yaxis,
        },
        series: [
          {
            name: "时长",
            type: "bar",
            data: seriesFn,
          },
        ],
      };
      // 基于准备好的dom，初始化echarts实例
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // dialog弹框关闭
    dialogClose(done) {
      done();
    },
    // 导出PDF
    savePdf() {
      Get_PDF.downloadPDF(document.querySelector(".pdfDom"), "诊断报告");
    },
    //点击查看诊断报告
    Report(item) {
      this.getData(item.id);
    },
    getData(id) {
      getReportDetail(id).then((jsonData) => {
        let tHeard = [];
        let tHeardTwo = [];
        let tableData = [];
        let tableDataTwo = [];
        let ruleDescArray = [];
        let conclusionArray = [];
        this.showCompared = false;

        let newData = jsonData.data.reportWindturbineInfoList.find(
          (item) => item.windturbineId === "全场平均"
        ); //返回对象
        tHeard.push({
          id: newData.id,
          label: newData.windturbineId,
          align: "center",
        });

        jsonData.data.reportWindturbineInfoList.forEach((cEle, index) => {
          if (index === 0) {
            cEle.alarmInfoList.forEach((cEle) => {
              tableData.push({
                ruleName: cEle.ruleName,
              });
              tableDataTwo.push({
                ruleName: cEle.ruleName,
              });
            });
          }
          if (cEle.compared) {
            tHeardTwo.push({
              id: cEle.id,
              label: cEle.windturbineId,
              align: "center",
            });
          } else {
            if (cEle.windturbineId !== "全场平均") {
              tHeard.push({
                id: cEle.id,
                label: cEle.windturbineId,
                align: "center",
              });
            }
          }
        });

        jsonData.data.reportWindturbineInfoList.forEach((pEle, pIndex) => {
          // 如果compared为空，则将数据渲染到表1,不为空则渲染到表2
          if (pEle.compared) {
            this.showCompared = true;
          }
          if (pEle.compared) {
            pEle.alarmInfoList.forEach((cEle, cIndex) => {
              // 表2数据时长与次数渲染  本周
              tableDataTwo[cIndex][`${pEle.id}BzCount`] = cEle.count;
              tableDataTwo[cIndex][`${pEle.id}BzKeepTime`] = cEle.keepTime;
            });

            pEle.compareAlarmInfoList.forEach((element, elementIndex) => {
              // 表2数据时长与次数渲染  上周
              tableDataTwo[elementIndex][`${pEle.id}SzCount`] = element.count;
              tableDataTwo[elementIndex][`${pEle.id}SzKeepTime`] =
                element.keepTime;
            });
          } else {
            pEle.alarmInfoList.forEach((cEle, cIndex) => {
              // 表1数据时长与次数渲染
              tableData[cIndex][`${pEle.id}Count`] = cEle.count;
              tableData[cIndex][`${pEle.id}KeepTime`] = cEle.keepTime;
              if (!pIndex) {
                ruleDescArray.push(`${cEle.ruleName}：${cEle.ruleDescription}`);
              }
            });
          }
          // 结论数据渲染
          if (pEle.conclusion) {
            pEle.conclusion &&
              conclusionArray.push(pEle.conclusion.split("\n"));
          }
        });

        this.tHeard = tHeard;
        this.tHeardTwo = tHeardTwo;
        this.tableData = tableData;
        this.tableDataTwo = tableDataTwo;
        this.ruleDescArray = ruleDescArray;
        this.statStartDate = jsonData.data.statStartDate;
        this.statEndDate = jsonData.data.statEndDate;
        this.conclusionArray = conclusionArray;
        this.reportDate = jsonData.data.reportDate;
        this.reportName = jsonData.data.reportName;
        this.stationId = jsonData.data.stationId;
        this.stationName = jsonData.data.stationName;
        this.model = jsonData.data.reportWindturbineInfoList[0].model;
        this.dialogReportVisible = true;
      });
    },
    //getData获取表格数据，并进行排序
    async getReportData() {
      const data = await earlyreport_info({ id: "" });

      data.sort((a, b) => {
        return b.reportDate - a.reportDate;
      });
      this.dataList = data;
      // this.dataListOld = data;
    },
  },
};
</script>

<style lang="less">
.allPage {
  width: 100%;
  height: 98%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .ech1 {
    .el-table--border,
    .el-table--group {
      border: 1px solid #000;
    }
    .el-table td,
    .el-table th.is-leaf {
      border-bottom: 1px solid #000;
    }
    .el-table--border td,
    .el-table--border th {
      border-right: 1px solid #000;
    }
    .el-table--border th {
      border-bottom: 1px solid #000;
    }
  }
  .top {
    width: 100%;
    height: 12%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .card_box {
      margin: 5px 50px 5px 50px;
      width: 20%;
      height: 70px;
      text-align: center;
      cursor: pointer;
    }
    .intellTop {
      width: 20%;
      height: 100%;
      padding: 0 10px;
      display: flex;
      justify-content: space-around;
      .intellTop_left {
        height: 100%;
        width: 20px;
        border-radius: 5px;
        margin-right: 5px;
        background: #d4d4d4;
      }
      .showIntell {
        animation: magentaPulse 1s infinite;
      }
      @-webkit-keyframes magentaPulse {
        // from { background-color: #630030; -webkit-box-shadow: 0 0 9px #333; }
        // 50% { background-color: #a9014b; -webkit-box-shadow: 0 0 18px #a9014b; }
        // to { background-color: #630030; -webkit-box-shadow: 0 0 9px #333; }
        from {
          background-color: #d45500;
          -webkit-box-shadow: 0 0 9px #333;
        }
        50% {
          background-color: #ff5c00;
          -webkit-box-shadow: 0 0 18px #ff5c00;
        }
        to {
          background-color: #d45500;
          -webkit-box-shadow: 0 0 9px #333;
        }
      }
      .intellTop_right {
        width: 90%;
        height: 100%;
        // padding-top: 10px;
        border-radius: 5px;
        color: #fff;
        cursor: pointer;
        position: relative;
      }
      .intellTop_msg {
        position: absolute;
        top: 12%;
        left: 15%;
      }
      img {
        width: 60px;
        height: 60px;
        position: absolute;
        top: 20%;
        right: 15%;
        opacity: 0.5;
      }
    }
    .el-card {
      height: 100%;
      width: 100%;
      .el-card__body {
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .middle {
    width: 100%;
    height: 47%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .mi_box {
      width: 67%;
      height: 100%;

      .infoBox {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .infoItem {
          width: 25%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          position: relative;
          background: #fff;

          .itemImg1 {
            margin-top: 10px;
            width: 85px;
            height: 85px;
            position: relative;
            z-index: 10;

            background: #fff url("../assets/img/yujinga.png") no-repeat;
            background-size: 100% 100%;

            &:hover {
              position: relative;
              z-index: 10;
              cursor: pointer;
              background: #fff url("../assets/img/yujingb.png") no-repeat;
              background-size: 100% 100%;
            }
          }
          .itemImg2 {
            margin-top: 10px;
            width: 85px;
            height: 85px;
            position: relative;
            z-index: 10;

            background: #fff url("../assets/img/zhuanjiaA.png") no-repeat;
            background-size: 100% 100%;

            &:hover {
              position: relative;
              z-index: 10;
              cursor: pointer;
              background: #fff url("../assets/img/zhuanjiaB.png") no-repeat;
              background-size: 100% 100%;
            }
          }
          .itemImg3 {
            margin-top: 10px;
            width: 85px;
            height: 85px;
            position: relative;
            z-index: 10;

            background: #fff url("../assets/img/xunjianA.png") no-repeat;
            background-size: 100% 100%;

            &:hover {
              position: relative;
              z-index: 10;
              cursor: pointer;
              background: #fff url("../assets/img/xunjianB.png") no-repeat;
              background-size: 100% 100%;
            }
          }
          .itemImg4 {
            margin-top: 10px;
            width: 85px;
            height: 85px;
            position: relative;
            z-index: 10;

            background: #fff url("../assets/img/resultA.png") no-repeat;
            background-size: 100% 100%;

            &:hover {
              position: relative;
              z-index: 10;
              cursor: pointer;
              background: #fff url("../assets/img/resultB.png") no-repeat;
              background-size: 100% 100%;
            }
          }
          // 向上的三角
          .sanjiaoUp {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-bottom-color: #506587;
            position: absolute;
            left: calc(50% - 9px);
          }
          .sanjiaoRight {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left-color: #506587;
            position: absolute;
            left: calc(50% - 54px);
            top: -21.5%;
          }
          .sanjiaoDown {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top-color: #506587;
            position: absolute;
            left: calc(50% - 9px);
            top: 93%;
          }

          .comtentBox {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;

            .contentItem {
              width: 90%;
              box-sizing: border-box;
              border: 1px solid #506587;
              &:hover {
                border: 1px solid #409eff;
                .desc {
                  color: #409eff;
                }
              }
              padding: 8px;
              margin-bottom: 12px;
              display: flex;
              justify-content: center;
              align-items: center;
              background: #fff;
              position: relative;
              z-index: 50;
              cursor: pointer;

              .desc {
                width: 35%;
                color: #506587;
              }

              .num {
                display: inline-block;
                font-weight: 700;
                width: 50px;
                color: orange;
                text-align: center;
              }

              .unit {
                color: #999;
              }

              &:last-child {
                margin-bottom: 0;
              }
            }
            // 竖线
            .arr {
              width: 1px;
              height: calc(100% - 20px);
              background: #506587;
              position: absolute;
              z-index: 10;
            }
          }
          // 上方线
          .lineTop {
            width: 100%;
            height: 1px;
            background: #506587;
            position: absolute;
            left: 0;
            top: 52px;
            z-index: 5;
          }
        }
        // 下方线
        .lineBottom {
          width: 63%;
          height: 1px;
          background: #506587;
          position: absolute;
          top: 61%;
        }
      }
    }

    .el-card {
      height: 100%;
      margin: 5px 10px 5px 10px;
    }
    .el-card__body {
      width: calc(100% - 40px);
      height: calc(100% - 40px);
    }
  }

  .bottom {
    width: 100%;
    height: 38%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .bo_box {
      margin: 5px 10px 5px 10px;
      width: 33%;
      height: 100%;

      .BaBian {
        width: 100%;
        height: 90%;
        display: flex;

        .No_one {
          width: 20%;
          height: 100%;

          .YePian {
            width: 85%;
            height: 35%;
            margin-top: 10%;
            margin-bottom: 20%;
            background: url("../assets/img/yepianA.png") no-repeat;
            background-size: 100% 100%;

            &:hover {
              cursor: pointer;
              background: url("../assets/img/yepianB.png") no-repeat;
              background-size: 100% 100%;
            }
          }
          .CeFeng {
            width: 85%;
            height: 35%;
            margin-bottom: 20%;
            background: url("../assets/img/cefengA.png") no-repeat;
            background-size: 100% 100%;

            &:hover {
              cursor: pointer;
              background: url("../assets/img/cefengB.png") no-repeat;
              background-size: 100% 100%;
            }
          }
        }
        .No_two {
          width: 20%;
          height: 100%;

          .ChiLunXiang {
            width: 85%;
            height: 35%;
            margin-top: 45%;
            margin-bottom: 20%;
            background: url("../assets/img/chilunA.png") no-repeat;
            background-size: 100% 100%;

            &:hover {
              cursor: pointer;
              background: url("../assets/img/chilunB.png") no-repeat;
              background-size: 100% 100%;
            }
          }
          .ZhuZhou {
            width: 85%;
            height: 35%;
            margin-bottom: 20%;
            background: url("../assets/img/zhuzhouA.png") no-repeat;
            background-size: 100% 100%;

            &:hover {
              cursor: pointer;
              background: url("../assets/img/zhuzhouB.png") no-repeat;
              background-size: 100% 100%;
            }
          }
        }
        .No_three {
          width: 20%;
          height: 100%;

          .YeYa {
            width: 85%;
            height: 35%;
            margin-top: 5%;
            margin-bottom: 30%;
            background: url("../assets/img/yeyaA.png") no-repeat;
            background-size: 100% 100%;

            &:hover {
              cursor: pointer;
              background: url("../assets/img/yeyaB.png") no-repeat;
              background-size: 100% 100%;
            }
          }
          .BianJiang {
            width: 85%;
            height: 35%;
            margin-bottom: 20%;
            background: url("../assets/img/bianjiangA.png") no-repeat;
            background-size: 100% 100%;

            &:hover {
              cursor: pointer;
              background: url("../assets/img/bianjiangB.png") no-repeat;
              background-size: 100% 100%;
            }
          }
        }
        .No_four {
          width: 20%;
          height: 100%;

          .PianHang {
            width: 85%;
            height: 35%;
            margin-top: 45%;
            margin-bottom: 20%;
            background: url("../assets/img/pianhangA.png") no-repeat;
            background-size: 100% 100%;

            &:hover {
              cursor: pointer;
              background: url("../assets/img/pianhangB.png") no-repeat;
              background-size: 100% 100%;
            }
          }
          .FaDian {
            width: 85%;
            height: 35%;
            margin-bottom: 20%;
            background: url("../assets/img/fadianA.png") no-repeat;
            background-size: 100% 100%;

            &:hover {
              cursor: pointer;
              background: url("../assets/img/fadianB.png") no-repeat;
              background-size: 100% 100%;
            }
          }
        }
        .No_five {
          width: 20%;
          height: 100%;

          .JiaoPin {
            width: 85%;
            height: 35%;
            margin-top: 10%;
            margin-bottom: 20%;
            background: url("../assets/img/bianpinA.png") no-repeat;
            background-size: 100% 100%;

            &:hover {
              cursor: pointer;
              background: url("../assets/img/bianpinB.png") no-repeat;
              background-size: 100% 100%;
            }
          }
          .QiTa {
            width: 85%;
            height: 35%;
            margin-bottom: 20%;
            background: url("../assets/img/qitaA.png") no-repeat;
            background-size: 100% 100%;

            &:hover {
              cursor: pointer;
              background: url("../assets/img/qitaB.png") no-repeat;
              background-size: 100% 100%;
            }
          }
        }
        .text {
          width: 100%;
          height: 10%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: -20%;

          .number {
            display: inline-block;
            font-weight: 700;
            color: #2a73e9;
            text-align: center;
          }
          .number_unit {
            color: #999;
          }
        }
      }
    }
    .el-card {
      height: 100%;
      width: 100%;
    }
    .el-card__body {
      width: calc(100% - 40px);
      height: calc(100% - 40px);
    }
  }

  .currentPdfDialogStyle {
    .cuttentTableStyle th {
      background: rgb(189, 215, 238) !important;
      color: #000;
      font-weight: 700;
    }
    .conclusionBox {
      margin: 12px 0 20px 0;
      .resultBox {
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 10px;
        .resultItem {
          text-indent: 2em;
          margin-bottom: 8px;
        }
      }
    }
  }

  .num_box {
    font-size: 40px;
  }

  .el-card__body {
    width: 100%;
    height: 100%;
  }

  .tx {
    width: 100%;
    height: 20px;
    font-weight: bolder;
    // background-color: #409eff;
    border-left: 5px solid #409eff;
    padding-left: 5px;
    color: #303030;
    margin: -10px 2px 10px -10px;
  }
  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      width: 40%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .quan_num {
        display: inline-block;
        width: 15px;
        height: 15px;
        background-color: grey;
        border-radius: 50%;
        text-align: center;
        border: 1px solid grey;
      }
      .null_color {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        text-align: center;
        border: 1px solid grey;
      }
    }

    .right {
      width: 60%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
}
</style>
