platform_largeScreen/src/views/economicsOperation/thematicAnalysis/comprehensiveAnalysis/index.vue

<template>
  <div class="comAnalysis">
    <div class="comAnalysis_top">
      <el-select
        size="mini"
        v-model="companyVal"
        placeholder="请选择"
        @change="changeCompan"
      >
        <el-option
          v-for="item in companyOptions"
          :key="item.id"
          :label="item.aname"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <div class="tabCut">
        <div
          @click="tabClick(val.id)"
          :class="tabIndex === val.id ? 'active' : ''"
          v-for="val in tabOptions"
          :key="val.id"
        >
          <span>{{ val.name }}</span>
        </div>
      </div>
      <div class="station">
        时间：
        <div class="">
          <el-date-picker
            size="mini"
            v-model="pickerTimer"
            type="month"
            value-format="YYYY-MM"
            placeholder="选择日期"
            popper-class="date-select"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="but">
        <el-button round size="mini" class="buttons" @click="seachData"
          >搜 索</el-button
        >
        <el-button round size="mini" class="buttons" @click="downXlsxFn"
          >导出</el-button
        >
      </div>
    </div>
    <div class="comAnalysis_title">
      <div class="leftContent"><span>综合分析</span></div>
    </div>
    <div class="downPdf" id="downPdf">
      <div class="comAnalysis_Table">
        <div class="table_month" style="margin-right: 5px">
          <div class="table_top">
            <div class="table_top_tit">
              <span>月度</span>
              <span>万kWh</span>
            </div>
            <!-- :cell-style="{ padding: '6px' }"  :row-style="{ height: '0' }"  -->
            <el-table
              :data="comAnalysisData"
              size="mini"
              stripe
              ref="stand_table"
              style="width: 100%"
              height="100%"
            >
              <el-table-column prop="type" align="center"> </el-table-column>
              <el-table-column
                v-for="(item, index) in tableHeaderMonth"
                :key="index"
                width="64"
                :prop="item.code"
                :label="item.title"
                align="center"
              >
                <template #header="scope">
                  <div v-if="scope.column.label.indexOf('(') > 0">
                    <div>
                      {{
                        scope.column.label.slice(
                          0,
                          scope.column.label.indexOf("(")
                        )
                      }}
                    </div>
                    <div>
                      {{
                        scope.column.label.slice(
                          scope.column.label.indexOf("(")
                        )
                      }}
                    </div>
                  </div>
                  <div v-else>{{ scope.column.label }}</div>
                </template>
                <template #default="scope">
                  <div class="columFlex">
                    <div style="width: 80%">
                      <span>{{ scope.row[item.code] }}</span>
                    </div>
                    <div>
                      <Bottom
                        class="botSvg"
                        v-if="comAnalysisDataCompare[item.code] * 1 === 2"
                      />
                      <Top
                        class="topSvg"
                        v-else-if="comAnalysisDataCompare[item.code] * 1 === 1"
                      />
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="table_bot">
            <el-table
              :data="samePeriodOfTheMonth"
              size="mini"
              height="100%"
              stripe
              ref="stand_table"
              class="lvTable"
              style="width: 100%"
            >
              <el-table-column prop="wpid" align="center">
                <el-table-column prop="wpid" align="center"></el-table-column>
              </el-table-column>
              <el-table-column
                v-for="(item, index) in tabIndex === -1
                  ? tableHeaderBot
                  : tableHeaderBot1"
                :key="index"
                width="64"
                :label="item.title"
                align="center"
              >
                <el-table-column :prop="item.code1" label="当月" align="center">
                  <template #default="scope">
                    <div class="columFlex">
                      <div style="width: 80%">
                        <span>{{ scope.row[item.code1] }}</span>
                      </div>
                      <div>
                        <Bottom
                          class="botSvg"
                          v-if="scope.row[item.code3] * 1 === 2"
                        />
                        <Top class="topSvg" v-else />
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column :prop="item.code2" label="同期" align="center">
                  <template #default="scope">
                    <span>{{ scope.row[item.code2] }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="table_year" style="margin-left: 5px">
          <div class="table_top">
            <div class="table_top_tit">
              <span>年度</span>
              <span>万kWh</span>
            </div>
            <!-- :cell-style="{ padding: '6px' }"  :row-style="{ height: '0' }"  -->
            <el-table
              :data="comAnalysisData"
              size="mini"
              stripe
              ref="stand_table"
              style="width: 100%"
              height="calc(100% - 24px)"
            >
              <el-table-column prop="type" align="center"> </el-table-column>
              <el-table-column
                v-for="(item, index) in tableHeaderYear"
                :key="index"
                width="63"
                :prop="item.code"
                :label="item.title"
                align="center"
              >
                <template #header="scope">
                  <div v-if="scope.column.label.indexOf('(') > 0">
                    <div>
                      {{
                        scope.column.label.slice(
                          0,
                          scope.column.label.indexOf("(")
                        )
                      }}
                    </div>
                    <div>
                      {{
                        scope.column.label.slice(
                          scope.column.label.indexOf("(")
                        )
                      }}
                    </div>
                  </div>
                  <div v-else>{{ scope.column.label }}</div>
                </template>
                <template #default="scope">
                  <div class="columFlex">
                    <div style="width: 80%">
                      <span>{{ scope.row[item.code] }}</span>
                    </div>
                    <div>
                      <Bottom
                        class="botSvg"
                        v-if="comAnalysisDataCompare[item.code] * 1 === 2"
                      />
                      <Top
                        class="topSvg"
                        v-else-if="comAnalysisDataCompare[item.code] * 1 === 1"
                      />
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="table_bot">
            <el-table
              :data="samePeriodOfTheYear"
              size="mini"
              height="100%"
              stripe
              ref="stand_table"
              style="width: 100%"
            >
              <el-table-column prop="wpid" align="center">
                <el-table-column prop="wpid" align="center"></el-table-column>
              </el-table-column>
              <el-table-column
                v-for="(item, index) in tabIndex === -1
                  ? tableHeaderBot
                  : tableHeaderBot1"
                :key="index"
                width="64"
                :label="item.title"
                align="center"
              >
                <el-table-column :prop="item.code1" label="当月" align="center">
                  <template #default="scope">
                    <div class="columFlex">
                      <div style="width: 80%">
                        <span>{{ scope.row[item.code1] }}</span>
                      </div>
                      <div>
                        <Bottom
                          class="botSvg"
                          v-if="scope.row[item.code3] * 1 === 2"
                        />
                        <Top class="topSvg" v-else />
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column :prop="item.code2" label="同期" align="center">
                  <template #default="scope">
                    <span>{{ scope.row[item.code2] }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="comAnalysis_Echarts">
        <div class="echarts_month">
          <div class="echartsWid" style="margin-right: 15px">
            <div class="chart-name">
              <div class="point point-left bottom"></div>
              <div class="point point-right bottom"></div>
              <span>当月电量分析</span>
            </div>
            <div id="monthChart" class="echartsSty"></div>
          </div>
          <div class="echartsWid">
            <div class="chart-name">
              <div class="point point-left bottom"></div>
              <div class="point point-right bottom"></div>
              <span>同期电量分析</span>
            </div>
            <div id="monthTqChart" class="echartsSty"></div>
          </div>
        </div>
        <div class="echarts_year">
          <div class="echartsWid" style="margin: 0 15px 0 5px">
            <div class="chart-name">
              <div class="point point-left bottom"></div>
              <div class="point point-right bottom"></div>
              <span>当年电量分析</span>
            </div>
            <div id="yearChart" class="echartsSty"></div>
          </div>
          <div class="echartsWid">
            <div class="chart-name">
              <div class="point point-left bottom"></div>
              <div class="point point-right bottom"></div>
              <span>同期电量分析</span>
            </div>
            <div id="yearTqChart" class="echartsSty"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getApicompanyslist,
  getApimaintoplist,
  getApimaincenterlist,
} from "@/api/monthlyPerformanceAnalysis";
import Get_PDF from "@/tools/htmlToPdf.js";
import * as echarts from "echarts";
import dataJson from "./dataJson.json"
export default {
  name: "comprehensiveAnalysis",
  data() {
    return {
      companyVal: "",
      companyOptions: [],
      pickerTimer: "",
      comAnalysisData: [],
      comAnalysisDataCompare: {},
      samePeriodOfTheMonth: [],
      samePeriodOfTheYear: [],
      showBtn: true,
      tabIndex: -1,
      tabOptions: [
        { id: -1, name: "风电" },
        { id: -2, name: "光伏" },
      ],
      tableHeaderMonth: [
        { title: "理论发电量", code: "yllfdl" },
        { title: "实际发电量", code: "ysjfdl" },
        { title: "风能利用率(%)", code: "yfnlyl" },
        { title: "维护损失电量", code: "ywhssdl" },
        { title: "维护损失率(%)", code: "ywhssl" },
        { title: "故障损失电量", code: "ygzssdl" },
        { title: "故障损失率(%)", code: "ygzssl" },
        { title: "限电损失电量", code: "yxdssdl" },
        { title: "限电损失率(%)", code: "yxdssl" },
        { title: "性能损失电量", code: "yxnssdl" },
        { title: "性能损失率(%)", code: "yxnssl" },
        { title: "受累损失电量", code: "yslssdl" },
        { title: "受累损失率(%)", code: "yslssl" },
      ],
      tableHeaderYear: [
        { title: "理论发电量", code: "nllfdl" },
        { title: "实际发电量", code: "nsjfdl" },
        { title: "风能利用率(%)", code: "nfnlyl" },
        { title: "维护损失电量", code: "nwhssdl" },
        { title: "维护损失率(%)", code: "nwhssl" },
        { title: "故障损失电量", code: "ngzssdl" },
        { title: "故障损失率(%)", code: "ngzssl" },
        { title: "限电损失电量", code: "nxdssdl" },
        { title: "限电损失率(%)", code: "nxdssl" },
        { title: "性能损失电量", code: "nxnssdl" },
        { title: "性能损失率(%)", code: "nxnssl" },
        { title: "受累损失电量", code: "nslssdl" },
        { title: "受累损失率(%)", code: "nslssl" },
      ],
      tableHeaderBot: [
        {
          title: "复位及时率(%)",
          code1: "fwjsl",
          code2: "tqfwjsl",
          code3: "fwjslCompare",
        },
        {
          title: "状态转换率(%)",
          code1: "ztzhl",
          code2: "tqztzhl",
          code3: "ztzhlCompare",
        },
        {
          title: "消缺及时率(%)",
          code1: "xqjsl",
          code2: "tqxqjsl",
          code3: "xqjslCompare",
        },
        { title: "MTBF", code1: "mtbf", code2: "tqmtbf", code3: "mtbfCompare" },
        { title: "MTTR", code1: "mttr", code2: "tqmttr", code3: "mttrCompare" },
      ],
      tableHeaderBot1: [
        {
          title: "系统效率(%)",
          code1: "fwjsl",
          code2: "tqfwjsl",
          code3: "fwjslCompare",
        },
        {
          title: "离散率(%)",
          code1: "ztzhl",
          code2: "tqztzhl",
          code3: "ztzhlCompare",
        },
        {
          title: "转换率(%)",
          code1: "xqjsl",
          code2: "tqxqjsl",
          code3: "xqjslCompare",
        },
        { title: "MTBF", code1: "mtbf", code2: "tqmtbf", code3: "mtbfCompare" },
        { title: "MTTR", code1: "mttr", code2: "tqmttr", code3: "mttrCompare" },
      ],
    };
  },
  created() {
    this.getCompanyData();
  },
  watch: {
    tabIndex(val) {
      this.tableHeaderMonth = this.tableHeaderMonth.map((item) => {
        if (val == -1) {
          if (item.code == "yfnlyl") {
            item.title = "风能利用率(%)";
          }
        } else {
          if (item.code == "yfnlyl") {
            item.title = "光能利用率(%)";
          }
        }
        return item;
      });
      this.tableHeaderYear = this.tableHeaderYear.map((item) => {
        if (val == -1) {
          if (item.code == "nfnlyl") {
            item.title = "风能利用率(%)";
          }
        } else {
          if (item.code == "nfnlyl") {
            item.title = "光能利用率(%)";
          }
        }
        return item;
      });
    },
  },
  mounted() {
      this.dataChange(dataJson.data)
      this.tabledataChange(dataJson.data)
      this.changePieData();
  },
  methods: {
    // 获取公司列表
    async getCompanyData() {
      this.companyOptions = [];
      this.pickerTimer = this.getchangeTime(new Date());
      const { data: datas } = await getApicompanyslist();
      this.companyOptions = datas.data;
      this.companyVal = datas.data[0]?.id;
      this.getTableTopData();
      this.getTableCenterData();
    },
    changeCompan(val) {
      this.companyVal = val;
      this.seachData();
    },
    tabClick(data) {
      this.tabIndex = data;
      if (data == -2) {
        this.companyVal = "SXJ_KGDL_GFFD_ZGS";
      } else {
        this.companyVal = this.companyOptions[0].id;
      }
      this.seachData();
    },
    changeBtn(id) {
      this.tabIndex = id;
      this.seachData();
    },
    seachData() {
      this.getTableTopData();
      this.getTableCenterData();
    },
    async getTableTopData() {
      let params = {
        companys: this.companyVal,
        type: this.tabIndex,
        month: this.pickerTimer,
      };
      this.comAnalysisData = [];
      this.comAnalysisDataCompare = {};
      const { data: datas } = await getApimaintoplist(params);
      this.dataChange(datas)
      this.changePieData();
    },
    dataChange(datas) {
        if (datas.data.length > 0) {
        datas.data.forEach((it) => {
          if (it.type !== "比较") {
            this.comAnalysisData.push(it);
          } else {
            this.comAnalysisDataCompare = it;
          }
        });
      }
    },
    async getTableCenterData() {
      this.samePeriodOfTheMonth = [];
      this.samePeriodOfTheYear = [];
      let params = {
        companys: this.companyVal,
        type: this.tabIndex,
        month: this.pickerTimer,
      };
      const { data: datas } = await getApimaincenterlist(params);
      this.tabledataChange(datas)
    },
    tabledataChange(datas) {
        if (datas.code === 200) {
            if (datas && datas.data) {
                this.samePeriodOfTheMonth = datas.data["当月"];
                this.samePeriodOfTheYear = datas.data["当年"];
            }
        } else {
            if (datas && datas.tabledata) {
                this.samePeriodOfTheMonth = datas.tabledata["当月"];
                this.samePeriodOfTheYear = datas.tabledata["当年"];
            }
        }
    },
    // 处理饼状图数据
    changePieData() {
      let lenged = ["性能损失", "维护损失", "故障损失", "限电损失", "受累损失"];
      let series = [];
      let series2 = [];
      let series3 = [];
      let series4 = [];
      this.comAnalysisData.forEach((it) => {
        if (it.type === "本期") {
          series = [
            { name: "性能损失", value: it.yxnssdl },
            { name: "维护损失", value: it.ywhssl },
            { name: "故障损失", value: it.ygzssdl },
            { name: "限电损失", value: it.yxdssdl },
            { name: "受累损失", value: it.yslssdl },
          ];
          series3 = [
            { name: "性能损失", value: it.nxnssdl },
            { name: "维护损失", value: it.nwhssl },
            { name: "故障损失", value: it.ngzssdl },
            { name: "限电损失", value: it.nxdssdl },
            { name: "受累损失", value: it.nslssdl },
          ];
        } else if (it.type === "同期") {
          series2 = [
            { name: "性能损失", value: it.yxnssdl },
            { name: "维护损失", value: it.ywhssl },
            { name: "故障损失", value: it.ygzssdl },
            { name: "限电损失", value: it.yxdssdl },
            { name: "受累损失", value: it.yslssdl },
          ];
          series4 = [
            { name: "性能损失", value: it.nxnssdl },
            { name: "维护损失", value: it.nwhssl },
            { name: "故障损失", value: it.ngzssdl },
            { name: "限电损失", value: it.nxdssdl },
            { name: "受累损失", value: it.nslssdl },
          ];
        }
      });
      this.getPieChart("当月电量分析", lenged, series, "monthChart");
      this.getPieChart("同期电量分析", lenged, series2, "monthTqChart");
      this.getPieChart("当年电量分析", lenged, series3, "yearChart");
      this.getPieChart("同期电量分析", lenged, series4, "yearTqChart");
    },
    //转换时间
    getchangeTime(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      return y + "-" + m;
    },
    headerArr(label) {
      let arr = label.split("");
      let Newarr = [];
      let num = 0;
      let str = "";
      arr.forEach((it, index) => {
        num++;
        str += it;
        if (label.indexOf(it) + 1 !== label.length) {
          if (num % 3 === 0) {
            Newarr.push(str);
            str = "";
          }
        } else {
          Newarr.push(str);
        }
      });
      return Newarr;
    },
    getPieChart(nameTit, lenged, series, name) {
      let option = {
        color: ["#05bb4c", "#ba3237", "#e17e23", "#fff", "#c531c7"],
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 15,
          top: "30%",
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          formatter(params) {
            switch (params) {
              case "实发电量":
                return (
                  params +
                  "       " +
                  series.find((val) => val.name === params)?.value
                );

              case "故障损失":
                return (
                  params +
                  "       " +
                  series.find((val) => val.name === params)?.value
                );

              case "维护损失":
                return (
                  params +
                  "       " +
                  series.find((val) => val.name === params)?.value
                );

              case "受累损失":
                return (
                  params +
                  "       " +
                  series.find((val) => val.name === params)?.value
                );

              case "限电损失":
                return (
                  params +
                  "       " +
                  series.find((val) => val.name === params)?.value
                );

              case "性能损失":
                return (
                  params +
                  "       " +
                  series.find((val) => val.name === params)?.value
                );
            }
          },
          data: lenged,
        },
        radar: [
          {
            indicator: [{ text: "" }],
            center: ["38%", "50%"],
            radius: [0, 79],
            startAngle: 60,
            splitNumber: 5,
            shape: "circle",
            name: {
              formatter: "",
              textStyle: {
                color: "#0000FF",
              },
            },
            splitArea: {
              areaStyle: {
                color: "rgba(0, 0, 0, 0)",
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(0, 0, 0, 0)",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#0a389c",
                shadowColor: "#0a389c",
                shadowBlur: 10,
              },
            },
          },
        ],
        tooltip: {
          trigger: "item",
        },
        toolbox: {
          show: true,
        },
        series: [
          {
            // name: nameTit,
            type: "pie",
            radius: [0, 80],
            center: ["38%", "50%"],
            roseType: "area",
            label: {
              normal: {
                color: "#fff",
                formatter: "{d}%",
              },
            },

            itemStyle: {
              normal: {
                // 阴影的大小
                shadowBlur: 20,
                // 阴影水平方向上的偏移
                shadowOffsetX: 0,
                // 阴影垂直方向上的偏移
                shadowOffsetY: 0,
                // 阴影颜色
                shadowColor: "rgba(0,70,199, 0.8)",
              },
              borderRadius: 2,
            },
            labelLine: {
              length: 0,
              length2: 10,
              maxSurfaceAngle: 80,
            },
            data: series,
          },
        ],
      };
      let dom = document.getElementById(name);
      dom.removeAttribute("_echarts_instance_");
      let myChart = echarts.init(dom);
      myChart.clear();
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    downXlsxFn() {
      // Get_PDF.downloadPDF(document.querySelector(".comAnalysis"), "综合分析"+new Date(), false);
      Get_PDF.downloadPDF(
        document.getElementById("downPdf"),
        "综合分析" + new Date(),
        false
      );
    },
  },
};
</script>

<style lang="less">
.comAnalysis {
  padding: 0 20px;
  height: 100%;

  .comAnalysis_title {
    background: rgba(0, 0, 0, 0.45);
    .leftContent {
      width: 242px;
      height: 45px;
      line-height: 45px;
      background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;

      span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #05bb4c;
        margin-left: 25px;
      }
    }
  }

  .comAnalysis_top {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;

    .station {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #b3b3b3;
      margin-right: 10px;
      margin-left: 10px;
    }

    .tabCut {
      display: inline-block;
      margin: 0 10px;

      div {
        display: inline-block;
        width: 60px;
        height: 27px;
        border: 1px solid #274934;
        text-align: center;
        line-height: 25px;
        cursor: pointer;
      }

      div:nth-child(1) {
        border-radius: 13px 0px 0px 13px;
      }

      div:nth-child(2) {
        border-radius: 0px 13px 13px 0px;
        // cursor: not-allowed;
      }

      .active {
        background-color: rgba(5, 187, 76, 0.9);
        color: #fff;
      }
    }

    .search-input {
      margin-left: 10px;

      .el-input__inner {
        width: 175px;
      }

      .el-input__suffix {
        right: -50px;
      }
    }

    .but {
      display: flex;
      flex-direction: row;
      align-content: center;
      margin-left: 20px;

      .buttons:nth-child(1) {
        background: rgba(5, 187, 76, 0.6);
        border: 1px solid #3b6c53;
        border-radius: 13px;
        color: #fff;

        &:hover {
          background: rgba(5, 187, 76, 0.9);
          border-radius: 13px;
          color: #fff;
        }
      }

      .buttons:nth-child(2) {
        background: rgba(67, 81, 107, 0.3);
        border: 1px solid #3b6c53;
        border-radius: 13px;
        font-size: 14px;
        color: #b3b3b3;
      }
    }
  }

  .downPdf {
    height: calc(100% - 58px - 32px);
    padding-bottom: 10px;
    .comAnalysis_Table {
      padding-bottom: 10px;
      display: flex;
      height: calc(100% - 300px);
      .table_month,
      .table_year {
        width: 50%;
        height: 100%;
        background: rgba(0, 0, 0, 0.45);

        .table_top {
          height: 174px;
          .el-table--mini {
            .el-table__header-wrapper {
              tr {
                background: rgba(83, 89, 104, 0.3) !important;
                th {
                  vertical-align: top !important;
                }

                .cell {
                  color: #b3b3b3;
                  font-family: MicrosoftYaHei;
                  font-size: 14px;
                }
              }
            }

            .el-table__body-wrapper {
              tr {
                .cell {
                  color: #d8d8d9;
                  font-family: ArialMT;
                  font-size: 13px;
                  height: 25px !important;
                }
              }
            }
          }

          .columFlex {
            display: flex;
            justify-content: space-between;

            .topSvg {
              width: 1em;
              height: 1em;
              color: #1c99ff;
            }

            .botSvg {
              width: 1em;
              height: 1em;
              color: #ff8300;
            }
          }

          .table_top_tit {
            text-align: center;
            height: 30px;
            background: rgba(22, 31, 30, 1);
            span:nth-child(1) {
              font-size: 16px;
              color: #fff;
              line-height: 30px;
              font-family: MicrosoftYaHei;
            }

            span:nth-child(2) {
              float: right;
              font-family: MicrosoftYaHei;
              font-size: 12px;
              color: #b3b3b3;
              line-height: 30px;
              margin-right: 10px;
            }
          }
        }

        .table_bot {
          height: calc(100% - 174px - 20px);
          margin-top: 20px;
          .el-table--mini .el-table__cell {
            padding: 3px 0;
          }
          .el-table--mini {
            .el-table__header-wrapper {
              tr {
                .cell {
                  color: #b3b3b3;
                  font-family: MicrosoftYaHei;
                  font-size: 14px;
                }
              }
              tr:nth-child(1) {
                background: rgba(83, 89, 104, 0.3) !important;
              }
            }

            .el-table__body-wrapper {
              tr {
                .cell {
                  color: #d8d8d9;
                  font-family: ArialMT;
                  font-size: 13px;
                }
              }
            }
          }

          .columFlex {
            display: flex;
            justify-content: space-between;

            .topSvg {
              width: 1em;
              height: 1em;
              color: #1c99ff;
            }

            .botSvg {
              width: 1em;
              height: 1em;
              color: #ff8300;
            }
          }
        }
      }
    }

    .comAnalysis_Echarts {
      height: 300px;
      display: flex;

      .echarts_month,
      .echarts_year {
        width: 50%;
        display: flex;
        height: 100%;
        .echartsWid {
          width: calc(50% - 10px);
          background: rgba(0, 0, 0, 0.45);
          position: relative;
          height: 100%;
          // border-bottom: 1px solid rgba(153, 153, 153, 0.5);
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;

          .chart-name {
            display: flex;
            align-items: center;
            padding: 0 5px 0 20px;
            position: relative;
            height: 39px;
            width: 100%;
            border-bottom: 1px solid rgba(153, 153, 153, 0.5);
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
            background: rgba(22, 31, 30, 1);
          }

          p {
            font-size: 16px;
            font-family: Microsoft YaHei;
            color: #fff;
            margin-left: 20px;
            margin-top: 10px;
          }

          .echartsSty {
            width: 100%;
            height: calc(100% - 39px);
            background: rgba(96, 103, 105, 0.2);
          }

          .point {
            width: 6px;
            height: 1px;
            background-color: #ffffff;
            position: absolute;

            &.point-left {
              left: 0;
            }

            &.point-right {
              right: 0;
            }

            &.top {
              top: -1px;
            }

            &.bottom {
              bottom: -1px;
            }
          }
        }
      }
    }
  }
}
</style>