jn_sis_zhfx/src/views/economicsOperation/benchmarkingManagement/siteBenchmarking/index.vue

<template>
  <div class="parcel-box">
    <div class="form-wrapper">
      <el-select
        size="mini"
        :disabled="displayDetail"
        v-model="company"
        placeholder="请选择"
        @change="handleCompanyChange(company)"
      >
        <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' : '',
            displayDetail ? 'disabled' : '',
          ]"
          v-for="val in tabOptions"
          :key="val.id"
        >
          <span>{{ val.name }}</span>
        </div>
      </div>
      <div class="station">
        场站：
        <el-select
          size="mini"
          :disabled="displayDetail"
          v-model="stationObj"
          placeholder="请选择"
          @change="handleStationChange(stationObj)"
          clearable
        >
          <el-option
            v-for="item in stationList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="station">
        开始日期
        <div class="search-input">
          <el-date-picker
            :disabled="displayDetail"
            v-model="starTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择日期"
            popper-class="date-select"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="station">
        结束日期
        <div class="search-input">
          <el-date-picker
            :disabled="displayDetail"
            v-model="endTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择日期"
            popper-class="date-select"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="but">
        <el-button
          round
          size="mini"
          class="buttons"
          :disabled="displayDetail"
          @click="gerCndb"
          >搜索</el-button
        >
        <el-button
          round
          size="mini"
          class="buttons"
          @click="dbfx"
          :disabled="
            chooseList.length <= 5 && chooseList.length > 1 ? false : true
          "
          >对标分析</el-button
        >
        <el-button
          round
          size="mini"
          class="buttons"
          @click="goBack"
          v-if="displayDetail"
          >返回</el-button
        >
        <el-button round size="mini" class="buttons" @click="funthb"
          >同环比</el-button
        >
      </div>
    </div>
    <div class="bodys" v-if="!displayDetail">
      <div class="line">
        <div class="leftContent"><span>场内对标</span></div>
      </div>
      <div class="economicTable">
        <el-table
          :data="tableData"
          ref="multipleTable"
          size="mini"
          height="calc(100% - 40px)"
          :cell-style="{ padding: '4px' }"
          :row-style="{ height: '0' }"
          stripe
          @selection-change="handleCurrentChange"
        >
          <el-table-column type="selection" width="58" align="center">
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="date"
            label="日期"
            sortable
          >
            <template v-slot="scope">
              <span
                @click="goDetail(scope.row)"
                style="cursor: pointer; color: #05bb4c"
                >{{ scope.row.date }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            v-for="item in tabIndex == -1 ? tableHeader : tableHeaderG"
            :key="item.code"
            :prop="item.code"
            :label="item.name"
            :width="item.name.length == 4 ? 55 : 69"
            show-overflow-tooltip
            sortable
          >
          </el-table-column>
        </el-table>
        <div class="pagination-class">
          <el-pagination
            @current-change="handlePageChange"
            :current-page="page.currentPage"
            :page-size="page.pagesize"
            layout="total, prev, pager, next, jumper"
            :total="page.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="echarts" v-if="!displayDetail">
      <div class="pie-echarts">
        <div class="chart-name">
          <div class="point point-left bottom"></div>
          <div class="point point-right bottom"></div>
          损失电量分析
        </div>
        <PieChart
          :lossPower="lossPower"
          width="100%"
          height="calc(100% - 39px)"
          :showLable="false"
        ></PieChart>
      </div>
      <div class="bar-echarts">
        <div class="chart-name">
          <div class="point point-left bottom"></div>
          <div class="point point-right bottom"></div>
          五项损失
        </div>
        <BarCharts
          :list="barList"
          width="100%"
          height="calc(100% - 39px)"
          :showLegend="true"
          :xdate="false"
          :colorIndex="true"
        ></BarCharts>
      </div>
    </div>
    <div
      v-if="displayDetail"
      style="height: calc(100% - 43px - 35px); padding-bottom: 10px"
    >
      <el-table
        :data="detailTable"
        ref="multipleTable"
        size="mini"
        height="100%"
        :cell-style="{ padding: '0px' }"
        :row-style="{ height: '0' }"
        stripe
        @selection-change="handleCurrentChange"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="name"
          label="风机名称"
          sortable
        >
        </el-table-column>
        <el-table-column
          v-for="item in tabIndex == -1
            ? tableHeaderDetail
            : tableHeaderGDetail"
          :key="item.code"
          :prop="item.code"
          :label="item.name"
          align="center"
          :width="item.name.length == 4 ? 57 : 88"
          show-overflow-tooltip
          sortable
        >
        </el-table-column>
      </el-table>
      <div class="pagination-class">
        <el-pagination
          @current-change="handlePageDChange"
          :current-page="pageD.currentPage"
          :page-size="pageD.pagesize"
          layout="total, prev, pager, next, jumper"
          :total="pageD.total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      class="dialogs"
      width="90%"
      top="40px"
      v-model="dialogVisible"
      :show-close="true"
    >
      <template #title>
        <div class="dialog-title">
          <div class="title">对标排名分析</div>
        </div>
      </template>
      <div class="dialog-body">
        <img class="dialog-img" src="@assets/imgs/dialog.png" />
        <dayinfo
          :radarValue="radarValue"
          :title="[windNum, windNum2]"
          :windNum="windNum"
          :windNum2="windNum2"
          :windNum3="windNum3"
          :windNum4="windNum4"
          :windNum5="windNum5"
          :tabs="tabs"
          :analyisDialog="analyisDialog"
        />
      </div>
    </el-dialog>
    <el-dialog
      class="dialogs"
      width="94%"
      top="120px"
      v-model="thbVisible"
      :show-close="true"
    >
      <template #title>
        <div class="dialog-title">
          <div class="title">同环比分析</div>
        </div>
      </template>
      <div class="dialog-body">
        <img class="dialog-img" src="@assets/imgs/dialog.png" />
        <div class="economicTable" style="height: 300px">
          <el-table
            :data="thbData"
            ref="multipleTable1"
            size="mini"
            height="100%"
            :cell-style="{ padding: '4px' }"
            :row-style="{ height: '0' }"
            stripe
          >
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="zhpm"
              label="综合排名"
              minWidth="80"
              sortable
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="name"
              label="类型"
              sortable
              minWidth="100"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="fdlpm"
              label="发电量排名"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="fdl"
              label="发电量"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="gzssdlpm"
              label="故障损失排名"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="gzssdl"
              label="故障损失"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="jxssdlpm"
              label="检修损失排名"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="jxssdl"
              label="检修损失"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="xnssdlpm"
              label="性能损失排名"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="xnssdl"
              label="性能损失"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="xdssdlpm"
              label="限电损失排名"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="xdssdl"
              label="限电损失"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="slssdlpm"
              label="受累损失排名"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="slssdl"
              label="受累损失"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="fnlylpm"
              :label="(tabIndex === -1 ? '风能' : '光能') + '利用率排名'"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="fnlyl"
              :label="(tabIndex === -1 ? '风能' : '光能') + '利用率(%)'"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="gzsslpm"
              label="故障损失率排名"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="gzssl"
              label="故障损失率(%)"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="jxsslpm"
              label="检修损失率排名"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="jxssl"
              label="检修损失率(%)"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="qflpm"
              :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率排名'"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="qfl"
              :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率(%)'"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="xnsslpm"
              label="性能损失率排名"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="xnssl"
              label="性能损失率(%)"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="slsslpm"
              label="受累损失率排名"
              sortable
              minWidth="65"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label-class-name="s-tb-th"
              prop="slssl"
              label="受累损失率(%)"
              sortable
              minWidth="65"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {
  tableHeader,
  tableHeaderG,
  tableHeaderDetail,
  tableHeaderGDetail,
} from "@/utills//constant.js";
import { companys } from "@/api/curveAnalyse";
import { getStation, cndb, thb, details } from "@/api/performance";
import PieChart from "../../homePage/components/pieChart.vue";
import BarCharts from "../../homePage/components/barCharts.vue";
import dayinfo from "../compontent/dayinfo.vue";
export default {
  name: "siteBenchmarking", //场内对标
  components: {
    PieChart,
    BarCharts,
    dayinfo,
  },
  data() {
    return {
      tableHeader,
      tableHeaderG,
      tableHeaderDetail,
      tableHeaderGDetail,
      page: {
        pagesize: 11,
        currentPage: 1,
        total: 0,
      },
      pageD: {
        pagesize: 23,
        currentPage: 1,
        total: 0,
      },
      company: "",
      companyOptions: [],
      stationObj: "",
      stationList: [],
      starTime: "",
      endTime: "",
      tabIndex: -1,
      tabOptions: [
        { id: -1, name: "风电" },
        { id: -2, name: "光伏" },
      ],
      tableData: [],
      detailTable: [],
      chooseList: [],
      lossPower: [],
      barList: [],
      displayDetail: false,
      dialogVisible: false,
      radarValue: [],
      windNum: "",
      windNum2: "",
      windNum3: "",
      windNum4: "",
      windNum5: "",
      tabs: [],
      analyisDialog: [],
      //同环比
      thbVisible: false,
      thbData: [],
    };
  },
  created() {
    // let date = new Date();
    // date.setDate(1);
    // let month = parseInt(date.getMonth() + 1);
    // let day = date.getDate();
    // if (month < 10) {
    //   month = '0' + month;
    // }
    // if (day < 10) {
    //   day = '0' + day;
    // }
    // this.starTime = date.getFullYear() + '-' + month + '-' + day;
    this.starTime = dayjs(new Date().getTime() - 60000 * 60 * 24 * 7).format(
      "YYYY-MM-DD"
    );
    this.endTime = dayjs(new Date().getTime()).format("YYYY-MM-DD");
    this.initialization();
  },
  methods: {
    handlePageChange(val) {
      this.page.currentPage = val;
      this.gerCndb();
    },
    handlePageDChange(val) {
      this.pageD.currentPage = val;
      this.goDetail();
    },
    funthb() {
      thb({
        companys: this.company,
        type: this.tabIndex,
        // beginDate: this.starTime,
        // endDate: this.endTime,
        pageNum: 1,
        pageSize: 10,
        wpids: this.stationObj,
      }).then(({ data: res }) => {
        if (res.data) {
          this.thbData = res.data;
          this.thbVisible = true;
        }
      });
    },
    tabClick(val) {
      this.tabIndex = val;
      this.getStation(this.company);
      this.gerCndb();
      //   this.initialization();
    },
    initialization() {
      companys().then(({ data: res }) => {
        if (res.data) {
          this.company = res.data[0].id;
          this.companyOptions = res.data;
          this.getStation(res.data[0].id);
        }
      });
    },
    getStation(companyids) {
      getStation({
        companyids: companyids,
        type: this.tabIndex,
      }).then(({ data: res }) => {
        if (res.data.length) {
          this.stationList = res.data;
          this.stationObj = res.data[0].id;
          this.gerCndb();
        } else {
          this.stationList = [];
          this.stationObj = "";
          this.gerCndb();
        }
      });
    },
    gerCndb() {
      cndb({
        companys: this.company,
        type: this.tabIndex,
        beginDate: this.starTime,
        endDate: this.endTime,
        wpids: this.stationObj,
        pageSize: this.page.pagesize,
        pageNum: this.page.currentPage,
        target: "",
        sort: "",
      }).then(({ data: res }) => {
        if (res.data) {
          let barList = [
            {
              name: "故障损失电量",
              children: [],
              date: [],
            },
            {
              name: "检修损失电量",
              children: [],
            },
            {
              name: "性能损失电量",
              children: [],
            },
            {
              name: "限电损失电量",
              children: [],
            },
            {
              name: "受累损失电量",
              children: [],
            },
          ];
          this.tableData = res.data.resultList;
          this.page.total = res.data.total;
          let lossPower = [];
          res.data.resultList.forEach((item) => {
            let obj = {
              name: item.date,
              value: item.zssdl,
            };
            lossPower.push(obj);
            barList[0].date.push(item.date);
            barList[0].children.push(item.gzssdl);
            barList[1].children.push(item.jxssdl);
            barList[2].children.push(item.xnssdl);
            barList[3].children.push(item.xdssdl);
            barList[4].children.push(item.slssdl);
          });
          this.lossPower = lossPower;
          this.barList = barList;
        }
      });
    },
    handleStationChange(val) {
      this.stationObj = val;
      this.gerCndb();
    },
    handleCompanyChange(val) {
      this.company = val;
      this.getStation(val);
      this.gerCndb();
    },
    handleCurrentChange(val) {
      if (val.length > 5) {
        let del_row = val.shift();
        this.$refs.multipleTable.toggleRowSelection(del_row, false);
      }
      let arr = [];
      val.forEach((item, index) => {
        if (index < 5) {
          arr.push(item);
        }
      });
      this.chooseList = arr;
    },
    goDetail(row) {
      this.displayDetail = true;
      details({
        id: this.stationObj,
        beginDate: this.starTime,
        endDate: this.endTime,
        pageSize: this.pageD.pagesize,
        pageNum: this.pageD.currentPage,
        target: "",
        sort: "",
      }).then(({ data: res }) => {
        if (res.data) {
          this.detailTable = res.data.resultList;
          this.pageD.total = res.data.total;
        }
      });
    },
    goBack() {
      this.displayDetail = false;
    },
    dbfx() {
      if (this.chooseList.length <= 5) {
        this.dialogVisible = true;
        this.AjaxDbfx();
      }
    },
    AjaxDbfx() {
      var data = this.chooseList;
      this.windNum = data[0]?.date || data[0]?.name;
      this.windNum2 = data[1]?.date || data[1]?.name;
      this.windNum3 = data[2]?.date || data[2]?.name;
      this.windNum4 = data[3]?.date || data[3]?.name;
      this.windNum5 = data[4]?.date || data[4]?.name;
      let tabs = [
        {
          name: "发电量",
          code: "fdl",
        },
        {
          name: "故障损失电量",
          code: "gzssdl",
        },
        {
          name: "检修损失电量",
          code: "jxssdl",
        },
        {
          name: "性能未达标损失电量",
          code: "xnssdl",
        },
        {
          name: "受累损失电量",
          code: "slssdl",
        },
        {
          name: "风能利用率",
          code: "fnlyl",
        },
        {
          name: "故障损失率",
          code: "gzssl",
        },
        {
          name: "检修损失率",
          code: "jxssl",
        },
        {
          name: "弃风率",
          code: "qfl",
        },
        {
          name: "性能损失率",
          code: "xnssl",
        },
        {
          name: "受累损失率",
          code: "slssl",
        },
      ];
      tabs = tabs.map((item) => {
        if (item.code == "fnlyl") {
          if (this.tabIndex == -1) {
            item.name = "风能利用率";
          } else {
            item.name = "光能利用率";
          }
        }
        if (item.code == "qfl") {
          if (this.tabIndex == -1) {
            item.name = "弃风率";
          } else {
            item.name = "弃光率";
          }
        }
        return item;
      });
      tabs.forEach((val) => {
        data.forEach((item, index) => {
          val["windData" + (index + 1)] = item[val.code];
        });
      });
      this.tabs = tabs;
      let radarValue = [];
      data.forEach((item, index) => {
        let data = {
          indicator: [
            "风能利用率排名",
            "故障损失率排名",
            "检修损失率排名",
            "弃风率排名",
            "性能损失率排名",
            "受累损失率排名",
          ],
          data: [
            {
              value: [
                item.fnlylpm,
                item.gzsslpm,
                item.jxsslpm,
                item.qflpm,
                item.xnsslpm,
                item.slsslpm,
              ],
              name: item.name,
            },
          ],
        };
        if (this.tabIndex == -1) {
          data.indicator = [
            "风能利用率排名",
            "故障损失率排名",
            "检修损失率排名",
            "弃风率排名",
            "性能损失率排名",
            "受累损失率排名",
          ];
        } else {
          data.indicator = [
            "光能利用率排名",
            "故障损失率排名",
            "检修损失率排名",
            "弃光率排名",
            "性能损失率排名",
            "受累损失率排名",
          ];
        }
        radarValue.push(data);
      });
      this.radarValue = radarValue;
      var analyis = [],
        gzssdl = [],
        jxssdl = [],
        xnssdl = [],
        xdssdl = [],
        slssdl = [];
      data.forEach((item, index) => {
        gzssdl.push({
          text: item.date || item.name,
          value: item.gzssdl,
        });
        jxssdl.push({
          text: item.date || item.name,
          value: item.jxssdl,
        });
        xnssdl.push({
          text: item.date || item.name,
          value: item.xnssdl,
        });
        xdssdl.push({
          text: item.date || item.name,
          value: item.xdssdl,
        });
        slssdl.push({
          text: item.date || item.name,
          value: item.slssdl,
        });
      });
      analyis.push(
        {
          title: "故障损失电量",
          yAxisIndex: 0,
          value: gzssdl,
        },
        {
          title: "检修损失电量",
          yAxisIndex: 0,
          value: jxssdl,
        },
        {
          title: "性能损失电量",
          yAxisIndex: 0,
          value: xnssdl,
        },
        {
          title: "限电损失电量",
          yAxisIndex: 0,
          value: xdssdl,
        },
        {
          title: "受累损失电量",
          yAxisIndex: 0,
          value: slssdl,
        }
      );
      this.analyisDialog = analyis;
    },
  },

  watch: {
    screenHeight(val) {
      this.screenHeight = val;
      if (val > 1100) {
        this.echartsHeight = "58vh";
      } else {
        this.echartsHeight = "55vh";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.pagination-class {
  text-align: right;
  margin-top: 5px;
}
.parcel-box {
  height: 100%;
  width: 100%;
  padding: 0 30px;
  padding-bottom: 10px;
}
/deep/ .s-tb-th {
  height: 50px;
}
.form-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 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;
      border-right-width: 0;
    }

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

    .active {
      background-color: rgba(5, 187, 76, 0.9);
      color: #fff;
    }
    .disabled {
      cursor: not-allowed;
      pointer-events: none;
    }
  }

  .tabCut1 {
    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(3) {
      border-radius: 0px 13px 13px 0px;
    }

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

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

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

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

  .buttons {
    background-color: rgba(5, 187, 76, 0.2);
    border: 1px solid #3b6c53;
    color: #b3b3b3;
    font-size: 14px;

    &:hover {
      background-color: rgba(5, 187, 76, 0.5);
      color: #ffffff;
    }
  }
}

.bodys {
  width: 100%;
  height: calc(100% - 350px - 43px - 20px);
  background-color: rgba(0, 0, 0, 0.45);
  //   padding-bottom: 20px;
  border-radius: 5px;
}
.economicTable {
  width: 100%;
  height: calc(100% - 36px);
}
.line {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  .leftContent {
    width: 242px;
    height: 41px;
    display: flex;
    align-items: center;
    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;
    }
  }

  .rightContent {
    width: 212px;
    height: 28px;
    margin-top: 13px;
    background: url("../../../../assets/imgs/title_right_bg.png");
  }
}

.echarts {
  width: 100%;
  height: 350px;
  display: flex;
  flex-direction: row;
  align-items: center;

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

  .pie-echarts {
    width: 30%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 5px;
  }

  .bar-echarts {
    width: 69%;
    margin-left: 1%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 5px;
  }
}

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

  &.point-left {
    left: 0;
  }
  &.point-right {
    right: 0;
  }

  &.top {
    top: -1px;
  }

  &.bottom {
    bottom: -1px;
  }
}

/*去除表头全选框*/
::v-deep .el-table__header-wrapper .el-checkbox {
  display: none;
}
::v-deep .el-table__body-wrapper .el-checkbox {
  .el-checkbox__input {
    display: block;
  }
}
</style>