powerForecast-ui/src/views/modules/load-forecasting/index.vue

<template>
  <div class="main-content" :style="{ width: '100%', padding: '20px 30px', fontSize: '15px' }">
    <!-- 列表页 -->
    <template v-if="!analysisFlag">
      <el-form
        class="center-form-pv"
        :style="{
          border: '0px solid #fff',
          padding: '10px',
          margin: '0',
          flexWrap: 'wrap',
          background: '#ffffff',
          display: 'flex',
          width: '100%',
        }"
        :inline="true"
        :model="searchForm"
      >
        <el-row
          :style="{
            padding: '10px',
            alignItems: 'center',
            flexWrap: 'wrap',
            background: 'none',
            display: 'flex',
          }"
        >
          <div
            :style="{
              alignItems: 'center',
              margin: '0 10px 0 0',
              display: 'flex',
            }"
          >
            <label
              :style="{
                margin: '0 10px 0 0',
                whiteSpace: 'nowrap',
                color: '#666',
                display: 'inline-block',
                lineHeight: '40px',
                fontSize: 'inherit',
                fontWeight: '500',
                height: '40px',
              }"
              class="item-label"
              >变电站</label
            >
            <el-select style="width: 100%" v-model="searchForm.subId" placeholder="变电站" @keydown.enter.native="search()" clearable>
              <el-option v-for="item in subList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div
            :style="{
              alignItems: 'center',
              margin: '0 10px 0 0',
              display: 'flex',
            }"
          >
            <label
              :style="{
                margin: '0 10px 0 0',
                whiteSpace: 'nowrap',
                color: '#666',
                display: 'inline-block',
                lineHeight: '40px',
                fontSize: 'inherit',
                fontWeight: '500',
                height: '40px',
              }"
              class="item-label"
              >归属县旗</label
            >
            <el-select style="width: 100%" v-model="searchForm.compId" placeholder="归属县旗" @keydown.enter.native="search()" clearable>
              <el-option v-for="item in compList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div :style="{ alignItems: 'center', margin: '0 10px 0 0', display: 'flex' }">
            <label
              :style="{
                margin: '0 10px 0 0',
                whiteSpace: 'nowrap',
                color: '#666',
                display: 'inline-block',
                lineHeight: '40px',
                fontSize: 'inherit',
                fontWeight: '500',
                height: '40px',
              }"
              class="item-label"
              >温度</label
            >
            <el-input v-model="searchForm.temperature" placeholder="温度" clearable></el-input>
          </div>
          <div
            :style="{
              alignItems: 'center',
              margin: '0 10px 0 0',
              display: 'flex',
            }"
          >
            <label
              :style="{
                margin: '0 10px 0 0',
                whiteSpace: 'nowrap',
                color: '#666',
                display: 'inline-block',
                lineHeight: '40px',
                fontSize: 'inherit',
                fontWeight: '500',
                height: '40px',
              }"
              class="item-label"
              >时间范围</label
            >
            <el-date-picker
              size="large"
              v-model="searchForm.dateRange"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </div>
          <el-button class="search" type="success" @click="search()">
            <span
              class="icon iconfont icon-fangdajing07"
              :style="{
                margin: '0 2px',
                fontSize: '16px',
                color: '#fff',
                display: 'none',
                height: '40px',
              }"
            ></span>
            搜索
          </el-button>
        </el-row>

        <el-row
          class="actions"
          :style="{
            padding: '10px',
            margin: '0px 0',
            flexWrap: 'wrap',
            background: 'none',
            display: 'flex',
          }"
        >
          <el-button class="add" type="danger" @click="ycForecastHandler()">
            <span
              class="icon iconfont icon-xihuan"
              :style="{
                margin: '0 2px',
                fontSize: '14px',
                color: '#fff',
                display: 'none',
                height: '34px',
              }"
            ></span>
            预测
          </el-button>
          <el-button class="add" type="danger" @click="analysisHandler()">
            <span
              class="icon iconfont icon-xihuan"
              :style="{
                margin: '0 2px',
                fontSize: '14px',
                color: '#fff',
                display: 'none',
                height: '34px',
              }"
            ></span>
            数据分析
          </el-button>
          <el-button class="add" type="danger" @click="exportHandler()">
            <span
              class="icon iconfont icon-xihuan"
              :style="{
                margin: '0 2px',
                fontSize: '14px',
                color: '#fff',
                display: 'none',
                height: '34px',
              }"
            ></span>
            导出
          </el-button>
        </el-row>
      </el-form>
      <div
        :style="{
          border: '0px solid #fff',
          width: '100%',
          padding: '0 20px 20px',
          fontSize: '14px',
          color: '#000',
          background: '#fff',
        }"
      >
        <el-table
          class="tables"
          :stripe="false"
          :style="{
            padding: '0px 0',
            borderColor: '#f0f0f0',
            borderRadius: '0',
            borderWidth: '0px 0 0 1px',
            background: '#fff',
            width: '100%',
            fontSize: 'inherit',
            borderStyle: 'solid',
          }"
          :border="true"
          :data="dataList"
          v-loading="dataListLoading"
        >
          <el-table-column :resizable="true" :sortable="true" label="序号" type="index" width="50" />
          <el-table-column :resizable="true" :sortable="true" prop="recordDate" label="日期" />
          <el-table-column :resizable="true" :sortable="true" prop="subNm" label="变电站">
            <template slot-scope="scope" :resizable="true" :sortable="true">
              {{ scope.row.subNm }}
            </template>
          </el-table-column>
          <el-table-column :resizable="true" :sortable="true" prop="compNm" label="归属旗县">
            <template slot-scope="scope">
              {{ scope.row.compNm }}
            </template>
          </el-table-column>
          <el-table-column :resizable="true" :sortable="true" prop="voltageLevel" label="电压等级">
            <template slot-scope="scope">
              {{ scope.row.voltageLevel }}
            </template>
          </el-table-column>
          <el-table-column :resizable="true" :sortable="true" prop="mainNum" label="主变台数">
            <template slot-scope="scope">
              {{ scope.row.mainNum }}
            </template>
          </el-table-column>
          <el-table-column :resizable="true" :sortable="true" prop="mainCapacity" label="主变容量(MVA)">
            <template slot-scope="scope">
              {{ scope.row.mainCapacity }}
            </template>
          </el-table-column>
          <el-table-column :resizable="true" :sortable="true" prop="temperature" label="温度(℃)" />
          <el-table-column :resizable="true" :sortable="true" prop="peakLoad" label="最大负荷(MW)" />
          <el-table-column :resizable="true" :sortable="true" prop="loadRate" label="负载率(%)">
            <template slot-scope="scope">
              {{ scope.row.loadRate ? (Number(scope.row.loadRate) * 100).toFixed(2) : '--' }}
            </template>
          </el-table-column>
          <el-table-column :resizable="true" :sortable="true" prop="baseLoad" label="基础负荷(MW)" />
          <el-table-column :resizable="true" :sortable="true" prop="electricHeatingLoad" label="电采暖负荷(MW)" />
          <el-table-column :resizable="true" :sortable="true" prop="usersNum" label="用户数" />
          <el-table-column :resizable="true" :sortable="true" prop="joinElectricHeatingNum" label="接入电暖用户数" />
          <el-table-column :resizable="true" :sortable="true" prop="confidence" label="置信度(%)">
            <template slot-scope="scope">
              {{ scope.row.confidence ? (Number(scope.row.confidence) * 100).toFixed(2) : '--' }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        background
        :page-sizes="[10, 50, 100, 200]"
        :page-size="pageSize"
        :layout="layouts.join()"
        :total="totalPage"
        prev-text="< "
        next-text="> "
        :hide-on-single-page="false"
        :style="{
          padding: '0 20px 20px',
          margin: '0px auto',
          whiteSpace: 'nowrap',
          color: '#333',
          textAlign: 'left',
          background: '#fff',
          width: '100%',
          fontSize: 'inherit',
          position: 'relative',
          fontWeight: '500',
        }"
      ></el-pagination>
    </template>
    <div v-if="analysisFlag">
      <el-form
        class="center-form-pv"
        :style="{
          border: '0px solid #fff',
          padding: '10px',
          margin: '0',
          flexWrap: 'wrap',
          background: '#ffffff',
          display: 'flex',
          width: '100%',
        }"
        :inline="true"
        :model="searchForm"
      >
        <el-row
          :style="{
            padding: '10px',
            alignItems: 'center',
            flexWrap: 'wrap',
            background: 'none',
            display: 'flex',
          }"
        >
          <div
            v-if="false"
            :style="{
              alignItems: 'center',
              margin: '0 10px 0 0',
              display: 'flex',
            }"
          >
            <label
              :style="{
                margin: '0 10px 0 0',
                whiteSpace: 'nowrap',
                color: '#666',
                display: 'inline-block',
                lineHeight: '40px',
                fontSize: 'inherit',
                fontWeight: '500',
                height: '40px',
              }"
              class="item-label"
              >变电站</label
            >
            <el-select style="width: 100%" v-model="searchForm.subId" placeholder="变电站" @keydown.enter.native="search()" clearable>
              <el-option v-for="item in subList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div
            :style="{
              alignItems: 'center',
              margin: '0 10px 0 0',
              display: 'flex',
            }"
          >
            <label
              :style="{
                margin: '0 10px 0 0',
                whiteSpace: 'nowrap',
                color: '#666',
                display: 'inline-block',
                lineHeight: '40px',
                fontSize: 'inherit',
                fontWeight: '500',
                height: '40px',
              }"
              class="item-label"
              >归属县旗</label
            >
            <el-select style="width: 100%" v-model="searchForm.compId" placeholder="归属县旗" @keydown.enter.native="search()" clearable>
              <el-option v-for="item in compList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div
            :style="{
              alignItems: 'center',
              margin: '0 10px 0 0',
              display: 'flex',
            }"
          >
            <label
              :style="{
                margin: '0 10px 0 0',
                whiteSpace: 'nowrap',
                color: '#666',
                display: 'inline-block',
                lineHeight: '40px',
                fontSize: 'inherit',
                fontWeight: '500',
                height: '40px',
              }"
              class="item-label"
              >时间范围</label
            >
            <el-radio-group size="large" v-model="searchForm.timeStatType" @change="searchForm.record_date_end = undefined">
              <el-radio-button label="daily">日</el-radio-button>
              <el-radio-button label="monthly">月</el-radio-button>
              <el-radio-button label="yearly">年</el-radio-button>
            </el-radio-group>
          </div>
          <div
            :style="{
              alignItems: 'center',
              margin: '0 10px 0 0',
              display: 'flex',
            }"
          >
            <label
              :style="{
                margin: '0 10px 0 0',
                whiteSpace: 'nowrap',
                color: '#666',
                display: 'inline-block',
                lineHeight: '40px',
                fontSize: 'inherit',
                fontWeight: '500',
                height: '40px',
              }"
              class="item-label"
              >日期</label
            >
            <el-date-picker
              size="large"
              v-model="searchForm.record_date_end"
              :type="timeTtpeMap[searchForm.timeStatType]"
              :value-format="timeValueFormatMap[searchForm.timeStatType]"
              placeholder="选择日期"
            />
            <!-- value-format="yyyy-MM-dd" -->
          </div>
          <el-button class="search" type="success" @click="initAnalysisData()">
            <span
              class="icon iconfont icon-fangdajing07"
              :style="{
                margin: '0 2px',
                fontSize: '16px',
                color: '#fff',
                display: 'none',
                height: '40px',
              }"
            ></span>
            搜索
          </el-button>
        </el-row>

        <el-row
          class="actions"
          :style="{
            padding: '10px',
            margin: '0px 0',
            flexWrap: 'wrap',
            background: 'none',
            display: 'flex',
          }"
        >
          <el-button class="add" type="danger" @click="analysisFlag = false">
            <span
              class="icon iconfont icon-xihuan"
              :style="{
                margin: '0 2px',
                fontSize: '14px',
                color: '#fff',
                display: 'none',
                height: '34px',
              }"
            ></span>
            返回
          </el-button>
        </el-row>
      </el-form>
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card header="最大负荷">
            <div id="chart1" style="height: 260px"></div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card header="基础负荷">
            <div id="chart2" style="height: 260px"></div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card header="电采暖负荷">
            <div id="chart3" style="height: 260px"></div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="12" style="margin-top: 12px">
        <el-col :span="8">
          <el-card header="负荷率">
            <div id="chart4" style="height: 260px"></div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card header="用户数">
            <div id="chart5" style="height: 260px"></div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card header="接入电暖用户数">
            <div id="chart6" style="height: 260px"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  components: {},
  data() {
    return {
      searchForm: {
        subId: '',
        compId: '',
        temperature: '',
        dateRange: [],
        timeStatType: 'daily',
        record_date_end: '',
      },
      timeRangeList: [
        {
          label: '日',
          value: 'daily',
        },
        {
          label: '月',
          value: 'monthly',
        },
        {
          label: '年',
          value: 'yearly',
        },
      ],
      timeTtpeMap: {
        daily: 'date',
        monthly: 'month',
        yearly: 'year',
      },
      timeValueFormatMap: {
        daily: 'yyyy-MM-DD',
        monthly: 'yyyy-MM',
        yearly: 'yyyy',
      },
      dataList: [],
      subList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      layouts: ['prev', 'pager', 'next', 'sizes'],
      compList: [],
      analysisFlag: false,
      barOption: {
        grid: { top: 10, left: 15, right: 15, bottom: 20 },
        color: ['#0977fd'],
        tooltip: { trigger: 'item', formatter: '{b} : {c}', backgroundColor: 'transparent' },
        xAxis: {
          type: 'category',
          data: ['-'],
        },
        yAxis: {
          name: 'MW',
          type: 'value',
        },
        series: [
          {
            data: [],
            type: 'bar',
          },
        ],
      },
      pie: {
        grid: { top: 10, left: 15, right: 15, bottom: 20 },
        color: ['#0977fd'],
        tooltip: { trigger: 'item', formatter: '{b} : {c}', backgroundColor: 'transparent' },
        series: [
          {
            type: 'pie',
            radius: ['25%', '55%'],
            center: ['50%', '60%'],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      },
      lineOption: {
        grid: { top: 10, left: 15, right: 15, bottom: 20 },
        color: ['#0977fd'],
        tooltip: { trigger: 'item', formatter: '{b} : {c}', backgroundColor: 'transparent' },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [],
            type: 'line',
            smooth: true,
          },
        ],
      },
    };
  },
  created() {
    this.getSubList();
    this.getCompList();
    this.getDataList();
  },
  methods: {
    exportHandler() {
      let params = {
        page: this.pageIndex,
        limit: this.pageSize,
        sort: 'id',
        order: 'desc',
      };
      if (this.searchForm.subId != '' && this.searchForm.subId != undefined) {
        params['subId'] = Number(this.searchForm.subId);
      }
      if (this.searchForm.compId != '' && this.searchForm.compId != undefined) {
        params['compId'] = Number(this.searchForm.compId);
      }
      if (this.searchForm.temperature != '' && this.searchForm.temperature != undefined) {
        params['temperature'] = Number(this.searchForm.temperature);
      }
      if (this.searchForm.dateRange != '' && this.searchForm.dateRange != undefined) {
        params['record_date_start'] = this.searchForm.dateRange[0];
        params['record_date_end'] = this.searchForm.dateRange[1];
      }
      this.$http({
        url: '/electric-heating/export',
        method: 'get',
        params: params,
        responseType: 'blob',
      }).then(({ data }) => {
        const blob = new Blob([data], { type: 'application/vnd.ms-excel' });
        const fileName = '负荷预测.xlsx';
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = fileName;
        a.click();
        URL.revokeObjectURL(a.href);
        this.$message.success('导出成功');
      });
    },
    // 获取变电站列表
    async getSubList() {
      this.subList = [];
      let params = {
        page: this.pageIndex,
        limit: this.pageSize,
        sort: 'id',
        order: 'desc',
      };
      const { data } = await this.$http({
        url: '/sub/page',
        method: 'get',
        params: params,
      });
      if (data && data.code === 0) {
        this.subList = data.data.list.map(item => ({
          label: item.subName,
          value: String(item.id),
        }));
      }
    },
    // 获取公司列表
    async getCompList() {
      this.compList = [];
      const { data } = await this.$http({
        url: `/company/lists`,
        method: 'get',
      });
      if (data && data.code === 0) {
        this.compList = data.data.map(item => ({
          label: item.compName,
          value: String(item.id),
        }));
      }
    },
    // 初始化分析数据
    initAnalysisData(initType = 'value') {
      if (initType != 'init' && !this.searchForm.compId) {
        this.$message.warning('请选择归属县旗');
        return;
      }
      if (initType != 'init' && !this.searchForm.record_date_end) {
        this.$message.warning('请选择日期');
        return;
      }
      this.getAnalysisData(initType);
    },
    getAnalysisData(initType = 'value') {
      const columns = ['peak_load', 'base_load', 'electric_heating_load', 'load_rate ', 'users_num', 'join_electric_heating_num'];
      const params = {
        subId: this.searchForm.subId,
        companyId: this.searchForm.compId,
        recordDate: this.searchForm.record_date_end,
      };
      columns.forEach((item, i) => {
        this.$http({
          url: `/electric-heating/${initType}/${item}/${this.searchForm.timeStatType}`,
          method: 'get',
          params: params,
        }).then(({ data }) => {
          const chart = echarts.init(document.getElementById(`chart${i + 1}`), 'carp');
          const res = initType === 'init' ? data?.data?.result || [] : data?.data || [];
          // 使用刚指定的配置项和数据显示图表。
          // if ([0, 1, 2].includes(i)) {
          chart.setOption({
            ...this.lineOption,
            xAxis: {
              type: 'category',
              data: res?.map(item => item.subName),
            },
            series: [
              {
                data: res?.map(item => item.total),
                type: 'line',
              },
            ],
          });
          // }
          //根据窗口的大小变动图表
          window.onresize = function () {
            chart.resize();
          };
          console.log(data, item);
        });
      });
    },
    // 预测
    ycForecastHandler() {
      if (this.searchForm.temperature == '' || this.searchForm.temperature == undefined) {
        this.$message.warning('请输入温度');
        return;
      }
      if (!this.searchForm.dateRange || this.searchForm.dateRange?.length === 0) {
        this.$message.warning('请选择日期范围');
        return;
      }
      this.dataListLoading = true;
      let params = {
        page: this.pageIndex,
        limit: this.pageSize,
        sort: 'id',
        order: 'desc',
      };
      if (this.searchForm.subId != '' && this.searchForm.subId != undefined) {
        params['subId'] = Number(this.searchForm.subId);
      }
      if (this.searchForm.compId != '' && this.searchForm.compId != undefined) {
        params['compId'] = Number(this.searchForm.compId);
      }
      if (this.searchForm.temperature != '' && this.searchForm.temperature != undefined) {
        params['temperature'] = Number(this.searchForm.temperature);
      }
      if (this.searchForm.dateRange != '' && this.searchForm.dateRange != undefined) {
        params['startDate'] = this.searchForm.dateRange[0];
        params['endDate'] = this.searchForm.dateRange[1];
      }
      this.$http({
        url: '/electric-heating/predict',
        method: 'post',
        data: params,
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message.success(data.msg);
        } else {
          this.$message.error(data.msg);
        }
        this.dataListLoading = false;
      });
    },
    // 显示数据分析
    analysisHandler(row) {
      this.analysisFlag = true;
      this.searchForm.timeStatType = 'daily';
      this.searchForm.subId = undefined;
      this.searchForm.compId = undefined;
      this.searchForm.record_date_end = undefined;
      this.$nextTick(() => {
        this.initAnalysisData('init');
      });
    },
    search() {
      this.pageIndex = 1;
      this.getDataList();
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      let params = {
        page: this.pageIndex,
        limit: this.pageSize,
        sort: 'id',
        order: 'desc',
      };
      if (this.searchForm.subId != '' && this.searchForm.subId != undefined) {
        params['subId'] = Number(this.searchForm.subId);
      }
      if (this.searchForm.compId != '' && this.searchForm.compId != undefined) {
        params['compId'] = Number(this.searchForm.compId);
      }
      if (this.searchForm.temperature != '' && this.searchForm.temperature != undefined) {
        params['temperature'] = Number(this.searchForm.temperature);
      }
      if (this.searchForm.dateRange != '' && this.searchForm.dateRange != undefined) {
        params['record_date_start'] = this.searchForm.dateRange[0];
        params['record_date_end'] = this.searchForm.dateRange[1];
      }
      this.$http({
        url: '/electric-heating/page',
        method: 'get',
        params: params,
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.data.list;
          this.totalPage = data.data.total;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
  },
};
</script>
<style lang="scss" scoped>
.center-form-pv {
  .el-date-editor.el-input {
    width: auto;
  }
}

.el-input {
  width: auto;
}

// form
.center-form-pv .el-input {
  width: auto;
}
.center-form-pv .el-input ::v-deep .el-input__inner {
  border: 1px solid #ddd;
  border-radius: 0px;
  padding: 0 12px;
  color: #666;
  width: 150px;
  font-size: 15px;
  height: 40px;
}
.center-form-pv .el-select {
  width: auto;
}
.center-form-pv .el-select ::v-deep .el-input__inner {
  border: 1px solid #ddd;
  border-radius: 0px;
  padding: 0 10px;
  color: #666;
  width: 150px;
  font-size: 15px;
  height: 40px;
}
.center-form-pv .el-date-editor {
  width: auto;
}

.center-form-pv .el-date-editor ::v-deep .el-input__inner {
  border: 1px solid #ddd;
  border-radius: 0px;
  padding: 0 10px 0 30px;
  color: #666;
  width: 150px;
  font-size: 15px;
  height: 40px;
}

.center-form-pv .search {
  border: 0;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 20px;
  color: #fff;
  background: #0977fd;
  width: auto;
  font-size: 16px;
  min-width: 90px;
  height: 40px;
}

.center-form-pv .search:hover {
  opacity: 0.8;
}

.center-form-pv .actions .add {
  border: 1px solid #0977fd60;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 10px;
  margin: 4px;
  color: #0977fd;
  background: #fff;
  width: auto;
  font-size: inherit;
  height: 34px;
}

.center-form-pv .actions .add:hover {
  opacity: 0.8;
}

.center-form-pv .actions .del {
  border: 1px solid #cc000060;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 10px;
  margin: 4px;
  color: #c00;
  background: #fff;
  width: auto;
  font-size: inherit;
  height: 34px;
}

.center-form-pv .actions .del:hover {
  opacity: 0.8;
}

.center-form-pv .actions .statis {
  border: 1px solid #e0970460;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 20px;
  margin: 4px;
  color: #e09704;
  background: #fff;
  width: auto;
  font-size: inherit;
  height: 34px;
}

.center-form-pv .actions .statis:hover {
  opacity: 0.8;
}

.center-form-pv .actions .btn18 {
  border: 1px solid #ed9a0d60;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 10px;
  margin: 4px;
  color: #ed9a0d;
  background: #fff;
  width: auto;
  font-size: inherit;
  height: 34px;
}

.center-form-pv .actions .btn18:hover {
  opacity: 0.8;
}

// table
.el-table ::v-deep .el-table__header-wrapper thead {
  color: #999;
  background: #fff;
  font-weight: 500;
  width: 100%;
}

.el-table ::v-deep .el-table__header-wrapper thead tr {
  background: #cae2ff;
}

.el-table ::v-deep .el-table__header-wrapper thead tr th {
  padding: 8px 0;
  background: none;
  border-color: #f6f6f6;
  border-width: 0 0px 0px 0;
  border-style: solid;
  text-align: left;
}

.el-table ::v-deep .el-table__header-wrapper thead tr th .cell {
  padding: 0 0 0 5px;
  word-wrap: normal;
  color: #0977fd;
  white-space: normal;
  font-weight: bold;
  display: flex;
  vertical-align: middle;
  font-size: 14px;
  line-height: 24px;
  text-overflow: ellipsis;
  word-break: break-all;
  width: 100%;
  align-items: center;
  position: relative;
  min-width: 110px;
}

.el-table ::v-deep .el-table__body-wrapper {
  position: relative;
}
.el-table ::v-deep .el-table__body-wrapper tbody {
  width: 100%;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr {
  background: #fff;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td {
  padding: 4px 0;
  color: #333;
  background: #fff;
  font-size: inherit;
  border-color: #0977fd30;
  border-width: 0 0px 1px 0;
  border-style: solid;
  text-align: left;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr:hover td {
  padding: 4px 0;
  color: #333;
  background: #f4f9ff;
  border-color: #0977fd30;
  border-width: 0 0px 1px 0;
  border-style: solid;
  text-align: left;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td {
  padding: 4px 0;
  color: #333;
  background: #fff;
  font-size: inherit;
  border-color: #0977fd30;
  border-width: 0 0px 1px 0;
  border-style: solid;
  text-align: left;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .cell {
  padding: 0 0 0 5px;
  overflow: hidden;
  word-break: break-all;
  white-space: normal;
  font-size: inherit;
  line-height: 24px;
  text-overflow: ellipsis;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .view {
  border: 1px solid #0977fd60;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 10px;
  margin: 0 5px 5px 0;
  color: #0977fd;
  background: #fff;
  width: auto;
  font-size: 14px;
  height: 32px;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .view:hover {
  opacity: 0.8;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .add {
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .add:hover {
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .edit {
  border: 1px solid #21c79260;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 10px;
  margin: 0 5px 5px 0;
  color: #21c792;
  background: #fff;
  width: auto;
  font-size: 14px;
  height: 32px;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .edit:hover {
  opacity: 0.8;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .del {
  border: 1px solid #cc000060;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 10px;
  margin: 0 5px 5px 0;
  color: #c00;
  background: #fff;
  width: auto;
  font-size: 14px;
  height: 32px;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .del:hover {
  opacity: 0.8;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .btn8 {
  border: 1px solid #ed9a0d60;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 10px;
  margin: 0 5px 5px 0;
  color: #ed9a0d;
  background: #fff;
  width: auto;
  font-size: 14px;
  height: 32px;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .btn8:hover {
  opacity: 0.8;
}

// pagination
.main-content .el-pagination ::v-deep .el-pagination__total {
  margin: 0 10px 0 0;
  color: #666;
  font-weight: 400;
  display: inline-block;
  vertical-align: top;
  font-size: inherit;
  line-height: 28px;
  height: 28px;
}

.main-content .el-pagination ::v-deep .btn-prev {
  border: none;
  border-radius: 100px;
  padding: 0;
  margin: 0 5px;
  color: #fff;
  background: #000;
  display: inline-block;
  vertical-align: top;
  width: 28px;
  font-size: 16px;
  line-height: auto;
  height: 28px;
}

.main-content .el-pagination ::v-deep .btn-next {
  border: none;
  border-radius: 100%;
  padding: 0;
  margin: 0 5px;
  color: #fff;
  background: #000;
  display: inline-block;
  vertical-align: top;
  width: 28px;
  font-size: 16px;
  line-height: auto;
  height: 28px;
}

.main-content .el-pagination ::v-deep .btn-prev:disabled {
  border: none;
  cursor: not-allowed;
  padding: 0;
  margin: 0 5px;
  color: #666;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  line-height: auto;
  border-radius: 100px;
  background: #ccc;
  width: 28px;
  height: 28px;
}

.main-content .el-pagination ::v-deep .btn-next:disabled {
  border: none;
  cursor: not-allowed;
  padding: 0;
  margin: 0 5px;
  color: #666;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  line-height: auto;
  border-radius: 100px;
  background: #ccc;
  width: 28px;
  height: 28px;
}

.main-content .el-pagination ::v-deep .el-pager {
  padding: 0;
  margin: 0;
  display: inline-block;
  vertical-align: top;
}

.main-content .el-pagination ::v-deep .el-pager .number {
  cursor: pointer;
  border-radius: 100%;
  padding: 0 10px;
  margin: 0 2px;
  color: #fff;
  background: #b9b9b9;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  height: 28px;
}

.main-content .el-pagination ::v-deep .el-pager .number:hover {
  cursor: pointer;
  border-radius: 100%;
  padding: 0 10px;
  margin: 0 2px;
  color: #fff;
  background: #0977fd;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  height: 28px;
}

.main-content .el-pagination ::v-deep .el-pager .number.active {
  cursor: default;
  border-radius: 100%;
  padding: 0 10px;
  margin: 0 2px;
  color: #fff;
  background: #0977fd;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  height: 28px;
}

.main-content .el-pagination ::v-deep .el-pagination__sizes {
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
  line-height: 28px;
  height: 28px;
}

.main-content .el-pagination ::v-deep .el-pagination__sizes .el-input {
  margin: 0 5px;
  width: 100px;
  position: relative;
}

.main-content .el-pagination ::v-deep .el-pagination__sizes .el-input .el-input__inner {
  border: 1px solid #dcdfe6;
  cursor: pointer;
  padding: 0 25px 0 8px;
  color: #606266;
  display: inline-block;
  font-size: 15px;
  line-height: 28px;
  border-radius: 10px;
  outline: 0;
  background: #fff;
  width: 100%;
  text-align: center;
  height: 28px;
}

.main-content .el-pagination ::v-deep .el-pagination__sizes .el-input span.el-input__suffix {
  top: 0;
  position: absolute;
  right: 0;
  height: 100%;
}

.main-content .el-pagination ::v-deep .el-pagination__sizes .el-input .el-input__suffix .el-select__caret {
  cursor: pointer;
  color: #c0c4cc;
  width: 25px;
  font-size: 14px;
  line-height: 28px;
  text-align: center;
}

.main-content .el-pagination ::v-deep .el-pagination__jump {
  margin: 0 0 0 24px;
  color: #606266;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
  line-height: 28px;
  height: 28px;
}

.main-content .el-pagination ::v-deep .el-pagination__jump .el-input {
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 2px;
  display: inline-block;
  width: 50px;
  font-size: 15px;
  line-height: 18px;
  position: relative;
  text-align: center;
  height: 28px;
}

.main-content .el-pagination ::v-deep .el-pagination__jump .el-input .el-input__inner {
  border: 1px solid #dcdfe6;
  cursor: pointer;
  padding: 0 3px;
  color: #606266;
  display: inline-block;
  font-size: 15px;
  line-height: 28px;
  border-radius: 3px;
  outline: 0;
  background: #fff;
  width: 100%;
  text-align: center;
  height: 28px;
}

// list one
.one .list1-view {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 15px;
  margin: 0 5px 5px 0;
  outline: none;
  color: #fff;
  background: #157ed2;
  width: auto;
  font-size: 14px;
  height: 32px;
}

.one .list1-view:hover {
  opacity: 0.8;
}

.one .list1-edit {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 15px;
  margin: 0 5px 5px 0;
  outline: none;
  color: #fff;
  background: #409eff;
  width: auto;
  font-size: 14px;
  height: 32px;
}

.one .list1-edit:hover {
  opacity: 0.8;
}

.one .list1-del {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 15px;
  margin: 0 5px 5px 0;
  outline: none;
  color: #fff;
  background: rgba(255, 0, 0, 1);
  width: auto;
  font-size: 14px;
  height: 32px;
}

.one .list1-del:hover {
  opacity: 0.8;
}

.one .list1-btn8 {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 24px;
  margin: 0 5px 5px 0;
  outline: none;
  color: #fff;
  background: rgba(255, 128, 0, 1);
  width: auto;
  font-size: 14px;
  height: 32px;
}

.one .list1-btn8:hover {
  opacity: 0.8;
}

.main-content .el-table .el-switch {
  display: inline-flex;
  vertical-align: middle;
  line-height: 30px;
  position: relative;
  align-items: center;
  height: 30px;
}
.main-content .el-table .el-switch ::v-deep .el-switch__label--left {
  cursor: pointer;
  margin: 0 10px 0 0;
  color: #333;
  font-weight: 500;
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  transition: 0.2s;
  height: 30px;
}
.main-content .el-table .el-switch ::v-deep .el-switch__label--right {
  cursor: pointer;
  margin: 0 0 0 10px;
  color: #333;
  font-weight: 500;
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  transition: 0.2s;
  height: 30px;
}
.main-content .el-table .el-switch ::v-deep .el-switch__core {
  border: 1px solid #75c0d6;
  cursor: pointer;
  border-radius: 15px;
  margin: 0;
  background: #75c0d6;
  display: inline-block;
  width: 42px;
  box-sizing: border-box;
  transition: border-color 0.3s, background-color 0.3s;
  height: 20px;
}
.main-content .el-table .el-switch ::v-deep .el-switch__core::after {
  border-radius: 100%;
  top: 1px;
  left: 1px;
  background: #fff;
  width: 16px;
  position: absolute;
  transition: all 0.3s;
  height: 16px;
}
.main-content .el-table .el-switch.is-checked ::v-deep .el-switch__core::after {
  margin: 0 0 0 -18px;
  left: 100%;
}

.main-content .el-table .el-rate ::v-deep .el-rate__item {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
  position: relative;
}
.main-content .el-table .el-rate ::v-deep .el-rate__item .el-rate__icon {
  margin: 0 3px;
  display: inline-block;
  font-size: 18px;
  position: relative;
  transition: 0.3s;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: #0977fd;
}
</style>