echarts--根据接口动态渲染series

<template>
  <div class="maincontainer1">
    <div class="echartsbox">
      <div class="textblock">
        <div class="titleGroup">
          <div class="flexTitle">
            <el-image :src="clientIcon" class="clientIconStyle" />
            <span class="clientTitleText">管理区月度用电统计(KW·h)</span>
          </div>
          <div class="moreBox">
            <div class="download" @click="download('GLQYDYDTJdownLoad', '管理区月度用电统计(KW·h).png')">下载</div>
            <div class="ccflex">
              <div class="more" @click="goPage('管理区月度用电统计')">更多</div>
              <el-icon size="11"><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </div>
      <el-date-picker style="position: absolute;z-index: 1000;margin-top: 4%;margin-left: 5%;height: 30px;width: 14.8%;"
        v-model="time" class="datePickerStyle" type="month" placeholder="月度" format="YYYY/MM" value-format="YYYY-MM"
        @blur="handleBlur" />
      <tableCharts :options="template[0]" id="GLQYDYDTJdownLoad" style="width: 100%; height: 37vh;background-color: rgb(18 49 86 / 43%);" :itemClickPermit="itemClickPermit"
        @itemClickValue='itemClickValue'></tableCharts>
    </div>
    <div class="echartsbox">
      <div class="textblock">
        <div class="titleGroup">
          <div class="flexTitle">
            <el-image :src="clientIcon" class="clientIconStyle" />
            <span class="clientTitleText">管理区每日开井数据(台)</span>
          </div>
          <div class="moreBox">
            <div class="download" @click="download('GLQMRKJdownLoad', '管理区每日开井数据(台).png')">下载</div>
            <div class="ccflex">
              <div class="more" @click="goPage('管理区每日开井数据')">更多</div>
              <el-icon size="11"><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </div>
      <el-date-picker
        style=" position: absolute; z-index: 1000; margin-top: 4%; margin-left: 5%; height: 30px; width: 30%; "
        v-model="time2" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
        @blur="handleBlur2" />
      <tableCharts :options="template[1]" id="GLQMRKJdownLoad" style="width: 100%; height: 37vh;background-color: rgb(18 49 86 / 43%);"></tableCharts>
    </div>
    <div class="echartsbox">
      <div class="textblock">
        <div class="titleGroup">
          <div class="flexTitle">
            <el-image :src="clientIcon" class="clientIconStyle" />
            <span class="clientTitleText">管理区用电统计(KW·h)</span>
          </div>
          <div class="moreBox">
            <div class="download" @click="download('GLQYDdownLoad', '管理区用电统计(KW·h).png')">下载</div>
            <div class="ccflex">
              <div class="more" @click="goPage('管理区用电统计')">更多</div>
              <el-icon size="11"><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </div>
      <el-date-picker style="position: absolute;z-index: 1000;margin-top: 4%;margin-left: 5%;height: 30px;width: 30%;"
        v-model="time3" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
        @blur="handleBlur3" />
      <tableCharts :options="template[2]" id="GLQYDdownLoad" style="width: 100%; height: 37vh;background-color: rgb(18 49 86 / 43%);"></tableCharts>
    </div>
    <div class="echartsbox">
      <div class="textblock">
        <div class="titleGroup">
          <div class="flexTitle">
            <el-image :src="clientIcon" class="clientIconStyle" />
            <span class="clientTitleText">管理区电力故障类型统计(次)</span>
          </div>
          <div class="moreBox">
            <div class="download" @click="download('GLQDLGZLXTJdownLoad', '管理区电力故障类型统计(次).png')">下载</div>
            <div class="ccflex">
              <div class="more" @click="goPage('管理区电力故障类型统计')">更多</div>
              <el-icon size="11"><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </div>
      <el-date-picker style="position: absolute;z-index: 1000;margin-top: 4%;margin-left: 5%;height: 30px;width: 30%;"
        v-model="time4" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
        @blur="handleBlur4" />
      <tableCharts :options="template[3]" id="GLQDLGZLXTJdownLoad" style="width: 100%; height: 37vh;background-color: rgb(18 49 86 / 43%);"></tableCharts>
    </div>
  </div>
</template>
<script lang="ts">
import tableCharts from "../Components/tableCharts.vue"
import { defineComponent, reactive, ref } from 'vue'
import clientIcon from '/@/assets/homeIcon/ClientIcon.png'
import { electricityTop10, openWellTop10, openWell2Top10, pumpAndJack2Top10, wellElectroSumAndAvg, pumpAndJackTop10, failureTop10 } from '/@/api/gd/powerGridCockpit/index'
import { annualStatistics } from "/@/api/gd/anomalyStatistics";
import html2canvas from "html2canvas"
import {useRouter} from 'vue-router'
export default defineComponent({
  components: { tableCharts, },
  setup() {
    // 设置echarts图数据是可点击的
    const itemClickPermit = true
    const itemClickValue = (val) => {
      console.log('val', val);
    }
    //工具方法
    /**
     * 格式化日期
     */
    const formatDate = (date) => {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    };
    /**
     * 格式化日期2
     */
    const formatDate2 = (date) => {
      const currentTime = new Date();
      const year = currentTime.getFullYear();
      const month = String(currentTime.getMonth() + 1).padStart(2, '0');
      return `${year}-${month}`;
    };

    // 数据区
    const currentTime = new Date();
    const time = ref(formatDate2(currentTime));
    // 设置结束时间为当前时间
    const endTime = currentTime;
    // 设置开始时间为一周前的时间
    const beginTime = new Date(currentTime.getTime() - 6 * 24 * 60 * 60 * 1000);
    const beginTime2 = new Date(currentTime.getTime() - 7 * 24 * 60 * 60 * 1000);
    const beginTime3 = new Date(currentTime.getTime() - 1 * 24 * 60 * 60 * 1000);
    // 将时间范围存储在time引用变量中
    const time2 = ref([beginTime, endTime]);
    const time3 = ref([beginTime2, beginTime3]);
    const time4 = ref([beginTime, endTime]);
    const colorList = [
      '#2f55eb', '#349cfe', '#ffbb30', '#5ade9d',
      '#20f8ff', '#bd6cff', '#fc5354','#2f55eb','#df4170'
    ];

    // 处理echarts y轴刻度
    const processNumber = (num: number): number => {
      if (num < 10) {
        return 10;
      } else if (num < 1000) {
        const remainder: number = num % 10;
        return num + (10 - remainder);
      } else {
        const remainder: number = num % 100;
        return num + (100 - remainder) + 100;
      }
    }
    // 统计图数据区
    const template = reactive([
      {
        tooltip: {
          backgroundColor: '#012c66', // 设置tooltip背景颜色
          textStyle: {
            color: '#fff', // 设置tooltip字体颜色
            fontSize: 12 // 设置tooltip字体大小
          },
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          orient: 'horizontal',
          right: '3%', // 将图例放置在右侧，距离容器右边界的距离为容器宽度的 20%
          top: '10%', // 将图例放置在上方，距离容器上边界的距离为容器高度的 10%
          show: true,
          textStyle: {
            color: 'white',
            // fontSize: '20px',
            fontWeight: 10
          },
          selectedMode: false,
        },
        grid: {
          top: '30%',
          left: '5%',
          right: '5%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              show: true,
              interval:0,//代表显示所有x轴标签显示
              textStyle: {
                color: 'white',
                fontSize: 10 //将x轴标签的字体大小缩小到10像素
              },
              rotate: -0 //将x轴标签旋转45度
            },
            interval: 0, //让x轴文字自适应宽度
            data: []
          }
        ],
        yAxis: [
          {
            min: 0,
            max: 0,
            interval: 1,
            type: 'value',
            show: true,
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              axisLabel: {
                interval: 0,
                rotate: -20
              },
              textStyle: {
                color: 'white'
              }
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true,
              axisLabel: {
                interval: 0,
                rotate: -20
              },
              lineStyle: {
                color: 'rgb(3, 42, 91)'
              }
            },
          }
        ],
        series: []
      },
      {
        tooltip: {
          backgroundColor: '#012c66', // 设置tooltip背景颜色
          textStyle: {
            color: '#fff', // 设置tooltip字体颜色
            fontSize: 12 // 设置tooltip字体大小
          },
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // color: ['#00feef', '#df4170'],
        legend: {
          orient: 'horizontal',
          right: '3%', // 将图例放置在右侧，距离容器右边界的距离为容器宽度的 20%
          top: '10%', // 将图例放置在上方，距离容器上边界的距离为容器高度的 10%
          show: true,
          data: ['油井', '水井'],
          selectedMode: false,
          textStyle: {
            color: 'white',
            // fontSize: '20px',
            fontWeight: 10
          },
        },
        grid: {
          top: '30%',
          left: '5%',
          right: '5%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              show: true,
              interval:0,//代表显示所有x轴标签显示
              textStyle: {
                color: 'white',
                fontSize: 10 //将x轴标签的字体大小缩小到10像素
              },
              rotate: -0 //将x轴标签旋转45度
            },
            interval: 0, //让x轴文字自适应宽度
            data: []
          }
        ],
        yAxis: [
          {
            min: 0,
            max: 0,
            interval: 1,
            type: 'value',
            show: true,
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              axisLabel: {
                interval: 0,
                rotate: -20
              },
              textStyle: {
                color: 'white'
              }
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgb(3, 42, 91)'
              }
            },
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: []
          }
        ]
      },
      {
        tooltip: {
          backgroundColor: '#012c66', // 设置tooltip背景颜色
          textStyle: {
            color: '#fff', // 设置tooltip字体颜色
            fontSize: 12 // 设置tooltip字体大小
          },
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          orient: 'horizontal',
          right: '3%', // 将图例放置在右侧，距离容器右边界的距离为容器宽度的 20%
          top: '12%', // 将图例放置在上方，距离容器上边界的距离为容器高度的 10%
          show: true,
          selectedMode: false,
          textStyle: {
            color: 'white',
            // fontSize: '20px',
            fontWeight: 10
          },
        },
        grid: {
          top: '30%',
          left: '5%',
          right: '5%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              show: true,
              interval:0,//代表显示所有x轴标签显示
              textStyle: {
                color: 'white',
                fontSize: 10 //将x轴标签的字体大小缩小到10像素
              },
              rotate: -0 //将x轴标签旋转45度
            },
            interval: 0, //让x轴文字自适应宽度
            data: []
          }
        ],
        yAxis: [
          {
            min: 0,
            max: 1000,
            interval: 100,
            type: 'value',
            name: '',
            nameLocation: 'start',     // 坐标轴名称显示位置
            nameTextStyle: {
              color: 'white',
              fontSize: 10 //将x轴标签的字体大小缩小到10像素
            },
            show: true,
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: 'white'
              }
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgb(3, 42, 91)'
              }
            },
          },
          // {
          //   min: 0,
          //   max: 10,
          //   interval: 1,
          //   type: 'value',
          //   show: true,
          //   splitLine: {
          //     show: false
          //   },
          //   axisLabel: {
          //     show: true,
          //     textStyle: {
          //       color: 'white'
          //     }
          //   },
          //   axisTick: {
          //     show: true
          //   },
          //   axisLine: {
          //     show: true,
          //     lineStyle: {
          //       color: 'rgb(3, 42, 91)'
          //     }
          //   },
          // },
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: []
          }
        ]
      },
      {
        tooltip: {
          backgroundColor: '#012c66', // 设置tooltip背景颜色
          textStyle: {
            color: '#fff', // 设置tooltip字体颜色
            fontSize: 12 // 设置tooltip字体大小
          },
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          selectedMode: false,
        },
        legend: {
          orient: 'horizontal',
          right: '3%', // 将图例放置在右侧，距离容器右边界的距离为容器宽度的 20%
          top: '10%', // 将图例放置在上方，距离容器上边界的距离为容器高度的 10%
          show: true,
          selectedMode: false,
          textStyle: {
            color: 'white',
            // fontSize: '20px',
            fontWeight: 10
          },
        },
        grid: {
          top: '30%',
          left: '5%',
          right: '5%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              show: true,
              interval:0,//代表显示所有x轴标签显示
              textStyle: {
                color: 'white',
                fontSize: 10 //将x轴标签的字体大小缩小到10像素
              },
              rotate: -0 //将x轴标签旋转45度
            },
            interval: 0, //让x轴文字自适应宽度
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            show: true,
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              interval:0,//代表显示所有y轴标签显示
              textStyle: {
                color: 'white'
              }
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgb(3, 42, 91)'
              }
            },
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: []
          }
        ]
      }
    ]);

    // 方法区
    const getTable1 = (params) => {
      electricityTop10(params).then(res => {
        let data = res.data.data;
        let yAxisData = data.map(item => item[0].xkey);
        let seriesData = {};
        let num = 0;
        let allDataArr = []
        data.forEach(list => {
          let i = 0
          list.forEach((item, index) => {
            const { key, value } = item;
            if(i < Number(value)){
              i = Number(value)
            }
            if (!seriesData[key]) {
              seriesData[key] = {
                name: key,
                type: 'bar',
                stack: 'total',
                label: {
                  show: true,
                  textStyle: { //数值样式
                    color: "#fff",
                    fontSize: 11,
                    fontWeight: 300,
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: 'white'
                  }
                },
                tooltip: {
                  valueFormatter: function (value) {
                    return value + 'kw·h';
                  }
                },
                data: [],
                barWidth: '20%',
                emphasis: { //高亮状态下的样式
                  focus: 'series',
                  itemStyle: {
                    normal: {
                      color: '#ff7f50' //柱形高亮颜色
                    }
                  }
                },
              };
            }
            seriesData[key].data.push({ value: value, name: 1 });
            // seriesData[key].data.push(value);
            num++;
          });
          allDataArr.push(i)
        });
        template[0].xAxis[0].data = yAxisData;
        template[0].series = Object.values(seriesData);
        let maxYNum = Math.max.apply(null, allDataArr);
        template[0].yAxis[0].max = processNumber(maxYNum)
        template[0].yAxis[0].interval = template[0].yAxis[0].max / 5
      })
    };
    const getTable2 = (params) => {
      openWell2Top10(params).then(res => {
        if (res.data.code == 200) {
          let data = res.data.data;
          let yAxisData = data.map(item => item[0].xkey);
          let seriesData = {};
          let num = 0;
          let allDataArr = []
          data.forEach((list, index) => {
            let i = 0
            list.forEach(item => {
              const { key, value } = item;
              if(i < Number(value)){
                i = Number(value)
              }
              if (!seriesData[key]) {
                seriesData[key] = {
                  name: key,
                  type: 'bar',
                  // stack: 'total',
                  label: {
                    show: true,
                    textStyle: { //数值样式
                      color: "#fff",
                      fontSize: 11,
                      fontWeight: 300,
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: 'white'
                    }
                  },
                  barWidth: '20%',
                  data: [],
                  tooltip: {
                    valueFormatter: function (value) {
                      return value + '台';
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: colorList[num+7],
                      barBorderRadius: [2, 2, 0, 0], //柱形边框圆角
                      barGap: '10%', //柱形之间的间隔
                      width: '100px' //柱形宽度
                    }
                  },
                  emphasis: { //高亮状态下的样式
                    focus: 'series',
                    itemStyle: {
                      normal: {
                        color: '#ff7f50' //柱形高亮颜色
                      }
                    }
                  },

                };
              }
              seriesData[key].data.push(value);
              num++;
            });
            allDataArr.push(i)
          });
          template[1].xAxis[0].data = yAxisData;
          template[1].series = Object.values(seriesData);
          let maxYNum = Math.max.apply(null, allDataArr);
          template[1].yAxis[0].max = processNumber(maxYNum)
          template[1].yAxis[0].interval = template[1].yAxis[0].max / 5
        }
      })
    };
    const getTable3 = (params) => {
      let seriesData = {};
      let num = 0;
      pumpAndJack2Top10(params).then(res => {
        if (res.data.code == 200) {
          let data = res.data.data;
          let yAxisData = data.map(item => item[0].xkey);
          let allDataArr = []
          data.forEach(list => {
            let i = 0
            list.forEach(item => {
              const { key, value } = item;
              if(i < Number(value)){
                i = Number(value)
              }
              if (!seriesData[key]) {
                seriesData[key] = {
                  name: key,
                  type: 'bar',
                  stack: 'total',
                  label: {
                    show: true,
                    textStyle: { //数值样式
                      color: "#fff",
                      fontSize: 11,
                      fontWeight: 300,
                    }
                  },
                  z: 1,
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: 'white'
                    }
                  },
                  tooltip: {
                    valueFormatter: function (value) {
                      return value + 'kw·h';
                    }
                  },
                  barWidth: '20%',
                  data: [],
                  yAxisIndex: 0,
                  itemStyle: {
                    normal: {
                      color: colorList[num],
                      barBorderRadius: [2, 2, 0, 0], //柱形边框圆角
                      barGap: '10%', //柱形之间的间隔
                      width: '100px' //柱形宽度
                    }
                  },
                  emphasis: { //高亮状态下的样式
                    focus: 'series',
                    itemStyle: {
                      normal: {
                        color: '#ff7f50' //柱形高亮颜色
                      }
                    }
                  },

                };
              }
              seriesData[key].data.push(value);
              num++;
            });
            allDataArr.push(i)
          });
          template[2].xAxis[0].data = yAxisData;
          template[2].series = Object.values(seriesData);
          let maxYNum = Math.max.apply(null, allDataArr);
          template[2].yAxis[0].max = processNumber(maxYNum)
          template[2].yAxis[0].interval = template[2].yAxis[0].max / 5
        }
      })
    };
    const getTable4 = (params) => {
      failureTop10(params).then(res => {
        if (res.data.code == 200) {
          let data = res.data.data;
          let yAxisData = data.map(item => item[0].xkey);
          let seriesData = {};
          let num = 0;
          let allDataArr = []
          data.forEach(list => {
            let i = 0
            list.forEach(item => {
              const { key, value } = item;
              if(i < Number(value)){
                i = Number(value)
              }
              if (!seriesData[key]) {
                seriesData[key] = {
                  name: key,
                  type: 'bar',
                  stack: 'total',
                  label: {
                    show: true,
                    textStyle: { //数值样式
                      color: "#fff",
                      fontSize: 11,
                      fontWeight: 300,
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: 'white'
                    }
                  },
                  tooltip: {
                    valueFormatter: function (value) {
                      return value + '次';
                    }
                  },
                  barWidth: '20%',
                  data: [],
                  itemStyle: {
                    normal: {
                      color: colorList[num],
                      barBorderRadius: [2, 2, 0, 0], //柱形边框圆角
                      barGap: '10%', //柱形之间的间隔
                      width: '100px' //柱形宽度
                    }
                  },
                  emphasis: { //高亮状态下的样式
                    focus: 'series',
                    itemStyle: {
                      normal: {
                        color: '#ff7f50' //柱形高亮颜色
                      }
                    }
                  },

                };
              }
              seriesData[key].data.push(value);
              num++;
            });
            allDataArr.push(i)
          });
          let maxYNum = Math.max.apply(null, allDataArr);
          template[3].yAxis[0].max = processNumber(maxYNum)
          template[3].yAxis[0].interval = template[3].yAxis[0].max / 5
          template[3].xAxis[0].data = yAxisData;
          template[3].series = Object.values(seriesData);
        }
      })
    };
    const handleBlur = () => {
      // 清除
      template[0].xAxis[0].data = [];
      template[0].series = [];
      let params = { 'monthTime': time.value };
      getTable1(params)
    };
    const handleBlur2 = () => {
      // 清除
      template[1].xAxis[0].data = [];
      template[1].series = [];
      let params = {
        "beginTime": formatDate(time2.value[0]),
        "endTime": formatDate(time2.value[1]),
      }
      getTable2(params)
    };
    const handleBlur3 = () => {
      // 清除
      template[2].xAxis[0].data = [];
      template[2].series = [];
      let params = {
        "beginTime": formatDate(time3.value[0]),
        "endTime": formatDate(time3.value[1]),
      }
      getTable3(params)
    };
    const handleBlur4 = () => {
      // 清除
      template[3].xAxis[0].data = [];
      template[3].series = [];
      let params = {
        "beginTime": formatDate(time4.value[0]),
        "endTime": formatDate(time4.value[1]),
      }
      getTable4(params)
    };
    getTable1({});
    getTable2({
      "beginTime": formatDate(time2.value[0]),
      "endTime": formatDate(time2.value[1]),
    });
    getTable3({
      "beginTime": formatDate(time3.value[0]),
      "endTime": formatDate(time3.value[1]),
    });
    getTable4({
      "beginTime": formatDate(time4.value[0]),
      "endTime": formatDate(time4.value[1]),
    });
    // 导出多张图表为一张图片
    // dmo元素里的内容转换为canvas,并将canvas下载为图片
    const download = (id, echarName) => {
      const ele = document.getElementById(id);
      if(ele){
        // 转换成canvas
        html2canvas(ele).then(function (canvas) {
          var img = canvas
            .toDataURL("image/png")
            .replace("image/png", "image/octet-stream");
          // 创建a标签，实现下载
          let creatIMg = document.createElement("a");
          creatIMg.download = echarName; // 设置下载的文件名，
          creatIMg.href = img; // 下载url
          document.body.appendChild(creatIMg);
          creatIMg.click();
          creatIMg.remove(); // 下载之后把创建的元素删除
        });
      }
    };
    const router = useRouter()
    const goPage = (pageTitle)=>{
      if(pageTitle == '管理区月度用电统计'){
        router.push({
          path:'/DistricTElec/index4',
          query:{
            "month": time.value,
            // "endTime": formatDate(time3.value[1]),
          }
        })
      }else if(pageTitle == '管理区每日开井数据'){
        router.push({
          path:'/DistrictDayOpenWell/index',
          query:{
            "beginTime": formatDate(time2.value[0]),
            "endTime": formatDate(time2.value[1]),
          }
        })
      }else if(pageTitle == '管理区用电统计'){
        router.push({
          path:'/DistricTElec/index1',
          query:{
            "beginTime": formatDate(time3.value[0]),
            "endTime": formatDate(time3.value[1]),
          }
        })
      }else if(pageTitle == '管理区电力故障类型统计'){
        router.push({
          path:'/DistrictFailureType/index',
          query:{
            "beginTime": formatDate(time4.value[0]),
            "endTime": formatDate(time4.value[1]),
          }
        })
      }
    }
    return {
      goPage,
      download,
      itemClickValue,
      itemClickPermit,
      clientIcon,
      template,
      time,
      time2,
      time3,
      time4,
      handleBlur,
      handleBlur2,
      handleBlur3,
      handleBlur4,
    }
  }
})
</script>
<style scoped>
.ccflex{
  display: flex;
  align-items: center;
  justify-content: center;
}
.download{
  font-size: 17px;
  font-family: TSHT;
  font-weight: 400;
}
.moreBox{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 12%;
  cursor: pointer;
  height: 100%;
}
.clientTitleText{
  font-size: 17px;
  font-weight: 400;
  font-family: TSHT;
}
.flexTitle{
  width: 80%;
  display: flex;
  justify-content: start;
  align-items: center;
}
::v-deep .el-date-editor .el-range-input {
  width: 44%;
}

.maincontainer1 {
  width: 100%;
  height: 100%;
  background-color: #003271;
  display: flex;
  justify-content: space-between;
  padding: 20px 20px 0px 20px;
  flex-wrap: wrap;
}

.more {
  display: inline-block;
  font-size: 17px !important;
  font-weight: 400;
  font-family: TSHT;
}
@font-face {
  font-family: TSHT;
  src: url('/@/assets/css/TSHT.TTF')
}
.page {
  height: 100%;
  flex-direction: row !important;
}

.line {
  display: inline-block;
  width: 5px;
  height: 15px;
  background-color: #00c1ec;
  border-radius: 20px;
  margin: 20px 15px 0px 20px;
}

.echartsbox {
  height: 47%;
  width: 49%;
  /*background-color: #013f88;*/
  position: relative;
  background: url("/@/assets/homeIcon/topClient.png") no-repeat center/100% 100%;
}

.clientIconStyle {
  width: 25px;
  height: 23px;
  display: block;
  margin-top: -3px;
}

.titleGroup {
  margin: 15px 15px 0px 10px;
  height: 100%;
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: space-around;
}

.textblock {
  color: white;
  position: relative;
  height: 8%;
  width: 100%;
}

::v-deep .el-date-editor .el-range-separator {
  color: white;
}

::v-deep .el-date-editor .el-range-input {
  color: white;
  font-size: 13px;
}

::v-deep .el-input__wrapper {
  background-color: #0a2b51;
  opacity: 1;
  box-shadow: 0 0 0 2px #164e87 inset;
  color: #fff;
}

.el-picker-panel {
  color: white;
  background: #0a2b51;
  line-height: 30px;
}

::v-deep .el-input__inner {
  color: #fff;
}
</style>