zhsq_qk_2.0/zhsq_qk-ui/src/views/fusion/bjzshz.vue

<template>
  <div>

    <!-- 阴影背景
    <div class="bj_left"><img src="@/assets/images/sprhbj-left.png"/></div>
    <div class="bj_right"><img src="@/assets/images/sprhbj-right.png"/></div>-->
    <div class="bj_bottom"><img src="@/assets/images/sprhbj-bottom.png"/></div>
    <!--头部开始-->
    <div class="header">
      <h1>城市运行一网统管指挥中心</h1>

    </div>
    <!--头部结束-->
    <!-- 小头部 开始 -->
    <div class="nav_min">
      <div class="top_txt">
        <b>汽开区</b>
        <!--        <span>小雨</span>-->
        <!--        <span>9~16℃</span>-->
      </div>
      <div class="top_txt top_txt2">
        <span>{{ currentTime }}</span>
        <!--  <span>星期六</span>
             <b>11:16:58</b> -->
      </div>
    </div>
    <!-- 小头部 结束 -->
    <!-- 中间内容 开始 -->
    <div class="qkq_con">


      <!--左侧开始-->
      <div class="con_left_e">
        <div class="con_div">
          <div class="qkq_tit txt_t">2024年上半年办理渠道统计</div>
          <div class="qkq_qkq_div clearfix">

            <div id="qkq_bj5"></div>
          </div>
        </div>
        <div class="con_div">
          <div class="qkq_tit txt_t">2024年上半年即办率统计</div>
          <div class="qkq_qkq_div clearfix">
            <div class="qkq_hz qkq_hz2 fl">
              <p>即办件：<b>{{ HandlingDocuments.instantProcessingQuantity }}</b></p>
              <p>承诺件：<b>{{ HandlingDocuments.promisedQuantity }}</b></p>
            </div>
            <div id="qkq_bj2" class="fr"></div>
          </div>
        </div>
        <div class="con_div">
          <div class="qkq_tit txt_t">2024年上半年新办企业数</div>
          <div id="qkq_bj1"></div>

        </div>

      </div>
      <div class="con_left_f">
        <div class="con_div">
          <div class="qkq_tit txt_t">2024年上半年好差评统计</div>
          <div id="qkq_bj4"></div>
        </div>
        <div class="con_div">
          <div class="qkq_tit txt_t">2024年上半年办结率统计</div>
          <!--  <div class="qkq_bjzs_con fl">
              <h4>{{ HallHandling.hallTotal }}</h4>
              <p>大厅办件总数</p>
              <div class="qkq_bjzs_bg"></div>

            </div> -->
          <div class="qkq_bjzs_txt clearfix fl">
            <div class="qkq_bjzs_txt_fl">
              <div class="qkq_bjs qkq_bjss">
                <p><b>{{ CompletionRate.completedQuantity }}</b><i>办件数</i></p>
              </div>
              <div class="qkq_bjs qkq_bjss">
                <p><b>{{ CompletionRate.numberOfProcessedItems }}</b><i>办结数</i></p>
              </div>
              <div class="qkq_bjs">
                <div id="qkq_bjs_01"></div>
              </div>
            </div>
          </div>
          <div class="clear"></div>
        </div>
        <div class="con_div">
          <div class="qkq_tit txt_t">2024年上半年高频事项Top5</div>
          <div class="qkq_sxtop">
            <p v-for="(item, index) in HighFrequencyMatters" :key="index">
              <a><i>{{ index + 1 }}</i>{{ item.eventName }}</a><span>{{ item.eventCount }}件</span>
            </p>
          </div>

        </div>
      </div>
      <div class="con_left_g">
        <div class="con_div qkq_bjzs">
          <div class="qkq_tit txt_t">工程建设项目审批</div>
          <div class="qkq_gc_con clearfix">
            <div class="qkq_gc_div">
              <p>建设用地(含临时建设用地)规划许可证</p>
              <p><b>6</b>个</p>
            </div>
            <div class="qkq_gc_div">
              <p>年度平均审批用时项目用时</p>
              <p><b>40</b>天</p>
            </div>
            <div class="qkq_gc_div">
              <p>建设工程(含临时建设工程)规划许可证</p>
              <p><b>11</b>个</p>
            </div>
            <div class="qkq_gc_div">
              <p>年度平均审批用时立项用地阶段</p>
              <p><b>13</b>天</p>
            </div>
            <div class="qkq_gc_div">
              <p>建筑工程施工许可证</p>
              <p><b>21</b>个</p>
            </div>
            <div class="qkq_gc_div">
              <p>年度平均审批用时工程规划阶段</p>
              <p><b>8</b>天</p>
            </div>
            <div class="qkq_gc_div">
              <p>市政公用办理项目数</p>
              <p><b>52</b>个</p>
            </div>
            <div class="qkq_gc_div">
              <p>年度平均审批用时施工许可阶段</p>
              <p><b>2</b>天</p>
            </div>
            <div class="qkq_gc_div">
              <p>联合验收项目数</p>
              <p><b>25</b>个</p>
            </div>
            <div class="qkq_gc_div">
              <p>年度平均审批用时竣工验收阶段</p>
              <p><b>17</b>天</p>
            </div>
          </div>
        </div>
        <div class="con_div">
          <div class="qkq_tit txt_t">公安政务服务数据统计</div>
          <div id="qkq_bj3"></div>
        </div>

      </div>


      <!--左侧结束-->
    </div>
    <!-- 中间内容 结束 -->


    <!--底部开始-->
    <div class="footer">
      <div class="nav-bottom">
        <div class="nav-bottom-left">
          <div class="nav-li-left" @click="handleNavigation('jjyx')">
            <span>经济运行</span>
          </div>
          <div class="nav-li-left" @click="handleNavigation('csgl')">
            <span>城市管理</span>
          </div>
          <div class="nav-li-left" @click="handleNavigation('jtzl')">
            <span>交通治理</span>
          </div>
          <div class="nav-li-left" @click="handleNavigation('jczl')">
            <span>基层治理</span>
          </div>
        </div>
        <div class="nav-home-middle" @click="homePage('weather')">
          <img src="@/assets/images/home-btn.png"/>
          <a>返回首页</a>
        </div>
        <div class="nav-bottom-right">
          <div class="nav-li-right" @click="handleNavigation('yshj_new')">
            <span>营商环境</span>
          </div>
          <div class="nav-li-right on" @click="handleNavigation('bjzshz')">
            <span>政务运行</span>
          </div>
          <div class="nav-li-right" @click="handleNavigation('aqyj')">
            <span>安全应急</span>
          </div>
          <div class="nav-li-right" @click="handleNavigation('fwyq')">
            <span>服务一汽</span>
          </div>
        </div>
      </div>
    </div>
    <!--底部开始-->
  </div>
</template>

<script>
import * as echarts from 'echarts'
import $ from 'jquery'
import jQuery from 'jquery'
import "@/assets/images/qkq_body.css";
import "@/assets/images/qkq_index.css";
import "@/assets/images/qkq_sprh.css";
import {
  getCameraList
} from "@/api/system/camera";
import supermap from "@/views/supermap/supermap";
import {
  lastOneBadList,
  lastOneBusinessList,
  lastOneRateList,
  lastOneHandlingList,
  lastOneDocumentsList, lastOneMattersList, lastOnePdocumentsList, visualizationChannelList
} from "@/api/system/zwyx";


export default {
  name: "bjzshz",
  components: {
    supermap
  },
  data() {
    return {
      dropdownVisible: false,
      HandlingDocuments: {},
      BadReview: {},
      Business: {},
      CompletionRate: {},
      HallHandling: {},
      HighFrequencyMatters: {},
      PublicSecurityDocuments: {},
      channel: [],
      sltProps: null,
      currentTime: '',
      btnOne: true,
      btnTwo: false,

    };
    // 可根据实际情况添加更多设备列表
  },
  created() {
    this.lastOneBadList();
    this.lastOneBusinessList();
    this.lastOneRateList();
    this.lastOneHandlingList();
    this.lastOneDocumentsList();
    this.lastOneMattersList();
    this.lastOnePdocumentsList();
    this.visualizationChannelList();
  },
  mounted() {
    // this.qkq_bj1();
    // this.qkq_bj2();
    //
    // this.qkq_bj3();
    // this.qkq_bj4();
    // this.qkq_bj5();

    // this.qkq_bjs_01();

    this.getCurrentTime();

    // 每秒刷新时间
    setInterval(() => {
      this.getCurrentTime();
    }, 1000);
  },

  methods: {
    sltHandle() {
      this.btnOne = true
      this.btnTwo = false
      this.$refs.supermap.getSupermap(null, null, null, "slt", null, null)
    },
    yxtHandle() {
      this.btnTwo = true
      this.btnOne = false
      this.$refs.supermap.getSupermap(null, null, null, "yxt", null, null)
    },
    handleNavigation(route) {
      this.$router.push({
        path: route
      });
    },
    homePage(route) {
      this.$router.push({
        path: route
      });
    },
    visualizationChannelList() {
      visualizationChannelList().then(response => {
        this.channel = response.data;
        this.qkq_bj5(this.channel)
      })
    },
    //查询新办企业可视化
    lastOneBusinessList() {
      lastOneBusinessList().then(response => {
        this.Business = response.data;
        this.qkq_bj1(this.Business)
      })
    },
    //查询好差评可视化
    lastOneBadList() {
      lastOneBadList().then(response => {
        this.BadReview = response.data;
        this.qkq_bj4(this.BadReview)
      })
    },
    //查询办结率可视化
    lastOneRateList() {
      lastOneRateList().then(response => {
        this.CompletionRate = response.data;
        this.qkq_bjs_01(this.CompletionRate);
      })
    },
    //查询大厅办件可视化
    lastOneHandlingList() {
      lastOneHandlingList().then(response => {
        this.HallHandling = response.data;
      })
    },
    //查询即办件可视化
    lastOneDocumentsList() {
      lastOneDocumentsList().then(response => {
        this.HandlingDocuments = response.data;
        this.qkq_bj2(this.HandlingDocuments)
      })
    },
    //查询高频事项可视化
    lastOneMattersList() {
      lastOneMattersList().then(response => {
        this.HighFrequencyMatters = response.data;
      })
    },
    //查询公安办件可视化
    lastOnePdocumentsList() {
      lastOnePdocumentsList().then(response => {
        this.PublicSecurityDocuments = response.data;
        this.qkq_bj3(this.PublicSecurityDocuments)
      })
    },
    toggleDropdown(event) {
      this.dropdownVisible = !this.dropdownVisible;
    },

    qkq_bj1(val) {
      //新办企业数
      var myChart = echarts.init(document.getElementById('qkq_bj1'));
      let labelData = val.labelData;
      let data = val.valueNewEnterprises;
      var json = {
        chart0: {
          xcategory: labelData,
          low: data,
          lowLine: [],
        }
      };
      var zrUtil = echarts.util;
      zrUtil.each(json.chart0.xcategory, function (item, index) {
        json.chart0.lowLine.push([{
          coord: [index, json.chart0.low[index]]
        }, {
          coord: [index + 1, json.chart0.low[index + 1]]
        }]);
      });
      var option = {
        grid: {
          top: 30,
          left: 10,
          right: 10,
          bottom: 0,
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(255,255,255,0)', // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(255,255,255,1)', // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(255,255,255,0)', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              formatter: '{value}',
              fontSize: 14,
              margin: 20,
              textStyle: {
                color: '#7ec7ff',
              },
            },
            axisLine: {
              lineStyle: {
                color: '#243753',
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#243753',
              },
            },
            axisTick: {
              show: false,
            },
            data: labelData,
          },
        ],
        yAxis: [
          {
            boundaryGap: false,
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#7ec7ff',
              },
            },
            nameTextStyle: {
              color: '#fff',
              fontSize: 12,
              lineHeight: 40,
            },
            splitLine: {
              lineStyle: {
                color: '#243753',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#283352',
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '报名',
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#19a3df',
              borderColor: '#a3c8d8',
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(88,255,255,0.2)',
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(88,255,255,0)',
                    },
                  ],
                  false
                ),
              },
            },
            data: data,
          },
          {
            name: '实施计划',
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            zlevel: 1,
            smooth: true,
            symbol: 'circle',
            effect: {
              show: true,
              smooth: true,
              period: 2,
              symbolSize: 8
            },
            lineStyle: {
              normal: {
                color: '#19a3df',
                width: 0,
                opacity: 0,
                curveness: 0,
              }
            },
            data: json.chart0.lowLine
          }
        ],
      };
      if (option) {
        myChart.setOption(option);
      }
    },

    qkq_bj2(val) {
      var myChart = echarts.init(document.getElementById('qkq_bj2'));
      var getmax = 100;
      //要改变的数据
      var getvalue = val.immediateRate;

      var option = {
        grid: {
          top: 0,
          bottom: 0,
          left: 0
        },
        angleAxis: {
          show: false,
          max: (getmax * 360) / 270, //-45度到225度，二者偏移值是270度除360度
          type: 'value',
          startAngle: 225, //极坐标初始角度
          splitLine: {
            show: false,
          },
        },
        barMaxWidth: 20, //圆环宽度
        radiusAxis: {
          show: false,
          type: 'category',
        },
        //圆环位置和大小
        polar: {
          center: ['50%', '50%'],
          radius: '170%',
        },

        series: [
          {
            type: 'bar',
            data: [
              {
                //上层圆环，显示数据
                value: getvalue,
                itemStyle: {
                  color: '#2AD2FB',
                },
              },
            ],
            barGap: '-100%', //柱间距离,上下两层圆环重合
            coordinateSystem: 'polar',
            roundCap: true, //顶端圆角
            z: 3, //圆环层级，同zindex
          },
          {
            //下层圆环，显示最大值
            type: 'bar',
            data: [
              {
                value: getmax,
                itemStyle: {
                  color: '#164B9F',
                  opacity: 1,
                  borderWidth: 0,
                },
              },
            ],
            barGap: '-100%',
            coordinateSystem: 'polar',
            roundCap: true,
            z: 1,
          },
          //仪表盘
          {
            type: 'gauge',
            startAngle: 225, //起始角度，同极坐标
            endAngle: -45, //终止角度，同极坐标
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitLabel: {
              show: false,
            },
            pointer: {
              // 分隔线
              shadowColor: 'auto', //默认透明
              shadowBlur: 5,
              length: '50%',
              width: '2',
              show: false,
            },
            itemStyle: {
              color: '#1598FF',
              borderColor: '#1598FF',
              borderWidth: 6,
            },
            detail: {
              formatter: function (params) {
                // return '完成率\n'+getvalue + '%';
                return `{wcl|即办率\n}{number|${getvalue + '%'}}`;
              },
              rich: {
                number: {
                  fontSize: 25,
                  textAlign: 'center',
                },
                wcl: {
                  fontSize: 16,
                  textAlign: 'center',
                },
              },
              color: '#fff',
              lineHeight: 30,
              offsetCenter: ['0', '0'],
            },
            title: {
              show: false,
            },
            data: [
              {
                value: getvalue,
              },
            ],
          },
          {
            name: '外部刻度',
            type: 'gauge',
            //  center: ['20%', '50%'],
            radius: '70%',
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [[1, 'rgba(0,0,0,0)']],
              },
            }, //仪表盘轴线
            axisLabel: {
              show: false,
              color: '#4d5bd1',
              distance: 25,
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 7,
              lineStyle: {
                color: '#086CAF', //用颜色渐变函数不起作用
                width: 2,
              },
              length: -8,
            }, //刻度样式
            splitLine: {
              show: false,
              length: -20,
              lineStyle: {
                color: '#C7CBCF', //用颜色渐变函数不起作用
              },
            }, //分隔线样式
            detail: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },
        ],
      };
      myChart.setOption(option);
      if (option) {
        myChart.setOption(option);
      }
    },
    qkq_bj3(val) {
      var myChart = echarts.init(document.getElementById('qkq_bj3'));
      var labelData = val.labelData;
      var data1 = val.valueForeigners;
      var data2 = val.valuePassport;
      var data3 = val.valueHongKong;
      var data4 = val.valueTaiwan;
      var json1 = {
        chart0: {
          xcategory: labelData,
          low: data1,
          lowLine: [],
        }
      };
      var zrUtil = echarts.util;
      zrUtil.each(json1.chart0.xcategory, function (item, index) {
        json1.chart0.lowLine.push([{
          coord: [index, json1.chart0.low[index]]
        }, {
          coord: [index + 1, json1.chart0.low[index + 1]]
        }]);
      });
      var option = {
        title: {
          text: '',
          textStyle: {
            align: 'center',
            color: '#fff',
            fontSize: 20,
          },
          top: '5%',
          left: 'center',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '14%',
          top: '16%',
          containLabel: true
        },
        legend: {
          data: ['护', '港', '台', "外国人"],
          right: 10,
          top: 12,
          textStyle: {
            color: "#fff"
          },
          itemWidth: 12,
          itemHeight: 10,
          // itemGap: 35
        },
        xAxis: {
          type: 'category',
          data: labelData,
          axisLine: {
            lineStyle: {
              color: 'white'

            }
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: 'Microsoft YaHei'
            }
          },
        },

        yAxis: {
          type: 'value',
          max: '1200',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisLabel: {}
        },
        "dataZoom": [{
          "show": true,
          "height": 8,
          "xAxisIndex": [
            0
          ],
          bottom: '8%',
          "start": 10,
          "end": 90,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle: {
            color: "#d3dee5",

          },
          textStyle: {
            color: "#fff"
          },
          borderColor: "#90979c"
        }, {
          "type": "inside",
          "show": true,
          "height": 15,
          "start": 1,
          "end": 35
        }],
        series: [{
          name: '护',
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#fccb05'
              }, {
                offset: 1,
                color: '#f5804d'
              }]),
              barBorderRadius: 12,
            },
            emphasis: {
              barBlur: 20,  // 流光效果宽度
              barShadowBlur: 20,  // 阴影的宽度
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#fccb05'
              }, {
                offset: 1,
                color: '#f5804d'
              }])  // 流光效果的颜色
            }
          },
          data: data2
        },
          {
            name: '港',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#8bd46e'
                }, {
                  offset: 1,
                  color: '#09bcb7'
                }]),
                barBorderRadius: 11,
              },
              emphasis: {
                barBlur: 20,
                barShadowBlur: 20,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#8bd46e'
                }, {
                  offset: 1,
                  color: '#09bcb7'
                }])
              }
            },
            data: data3
          },
          {
            name: '台',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#248ff7'
                }, {
                  offset: 1,
                  color: '#6851f1'
                }]),
                barBorderRadius: 11,
              },
              emphasis: {
                barBlur: 20,
                barShadowBlur: 20,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#248ff7'
                }, {
                  offset: 1,
                  color: '#6851f1'
                }])
              }
            },
            data: data4
          }, {
            name: "外国人",
            type: "line",
            symbolSize: 10,
            symbol: 'circle',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#0000ff'
                }, {
                  offset: 1,
                  color: '#00ffff'
                }]),
                barBorderRadius: 0,
                label: {
                  show: true,
                  position: "top",
                  formatter: function (p) {
                    return p.value > 0 ? (p.value) : '';
                  }
                }
              }
            },
            data: data1
          }, {
            name: '外国人',
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            zlevel: 1,
            smooth: true,
            symbol: 'circle',
            effect: {
              show: true,
              smooth: true,
              period: 4,
              symbolSize: 8
            },
            lineStyle: {
              normal: {
                color: '#00ffff',
                width: 0,
                opacity: 0,
                curveness: 0,
              }
            },
            data: json1.chart0.lowLine,
          },]
      };
      if (option) {
        myChart.setOption(option);
      }
    },

    qkq_bj4(val) {
      var myChart = echarts.init(document.getElementById('qkq_bj4'));
      var zdslColorList = ['#D0A00E', '#34DA62', '#00C0E9', '#0096F3', '#33CCFF'];
      // 假设这是满意度数据的最大值，用于流光效果的终点
      var maxSatisfaction = Math.max(...[100, 100, 100, 100, 100]);
      let valueData = val.valueData;
      let labelData = val.labelData;
      var option = {
        grid: {
          top: '5%',
          left: '3%',
          right: '3%',
          bottom: '0',
          containLabel: true
        },
        tooltip: {
          backgroundColor: 'rgba(65,114,231,0.8)',
          show: false,
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: [{
          type: 'category',
          data: labelData,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ADD6FF',
              fontSize: '12'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
        },
          {
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ADD6FF',
                fontSize: '12'
              }
            },
            data: valueData
          }
        ],

        series: [{
          name: "满意度", // bar图的外边框
          type: "bar",
          barWidth: "40%",
          yAxisIndex: 0,
          data: valueData.map((item, i) => {
            return {
              value: item,
              itemStyle: {
                color: "rgba(0,0,0,0)",
                barBorderColor: zdslColorList[i],
                borderWidth: 1,
                shadowColor: "#17209c",
                shadowBlur: 4
              }
            }
          }),
        },
          {
            name: "满意度", //这个是Bar图
            type: 'bar',
            yAxisIndex: 1,
            barWidth: "40%",
            data: valueData
          },
          {
            name: '流光效果',
            type: 'lines',
            zlevel: 1, // 确保流光在条形图之上
            coordinateSystem: 'cartesian2d',
            data: valueData.map((item, index) => {
              return {
                coords: [
                  [0, index],
                  [item / maxSatisfaction * 100, index] // 将满意度数据转换为百分比形式，以适应x轴的范围
                ]
              };
            }),
            effect: {
              show: true,
              period: 5,
              trailLength: 0.5, //控制拖尾长度
              symbolSize: [15, 2],
              symbol: this.$store.state.common.echarts_baseStreamer,
              loop: true,
              color: '#fff' //流光颜色
            },
            lineStyle: {
              width: 0,
              opacity: 0.6,
              curveness: 0
            },
          }
        ],
        itemStyle: {
          color: function (params) {
            return zdslColorList[params.dataIndex]
          }
        }
      }
      if (option) {
        myChart.setOption(option);
      }
    },
    qkq_bj5(val) {
      var myChart = echarts.init(document.getElementById('qkq_bj5'));
      var data = val.valueData;
      var className = val.labelData;
      var colorList = ['#39B3FF', '#47E0E0', '#7891D9', '#83D978', '#C7A530', '#FF8439'];
      var defaultData = [100, 100, 100, 100, 100, 100];
      var option = {
        legend: {
          data: ['渠道'],
          icon: 'circle',
          bottom: 10,
          textStyle: {
            color: '#ffffff'
          },
          show: false
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '10%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            return params[0].name + '<br/>' +
              "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
              // params[0].seriesName + ' : ' + Number((params[0].value.toFixed(4) / 10000).toFixed(2)).toLocaleString() + ' <br/>'
              params[0].seriesName + ' : ' + params[0].value
          }
        },
        xAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            },
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: className
        }, {
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          axisLabel: {
            textStyle: {
              color: '#ffffff',
              fontSize: '12'
            },
            formatter: function (value) {
              return value;
            },
          },
          data: data
        }],
        series: [{
          name: '渠道',
          type: 'bar',
          zlevel: 1,
          itemStyle: {
            normal: {
              barBorderRadius: 0,
              // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              //     offset: 0,
              //     color: 'rgb(57,89,255,1)'
              // }, {
              //     offset: 1,
              //     color: 'rgb(46,200,207,1)'
              // }]),
              color: (params) => {
                return colorList[params.dataIndex]
              }
            },
          },
          barWidth: 20,
          data: data
        }
        ]
      };

      if (option) {
        myChart.setOption(option);
      }
    },
    qkq_bjs_01(val) {
      var myChart = echarts.init(document.getElementById('qkq_bjs_01'));
      let angle = 0; //角度，用来做简单的动画效果的
      let max = 100;
      let value = val.completionRate;

      let rate = Math.round((value * 100) / max);
      var option = {
        title: [
          {
            text: '{a|办结率}\n{b|' + rate + '%}',
            show: true,
            x: 'center',
            y: 'center',
            textStyle: {
              rich: {
                a: {
                  fontSize: 18,
                  color: '#fff',
                  padding: [10, 0, 25, 0],
                },
                b: {
                  fontSize: 28,
                  color: '#00b6fd',
                  fontFamily: 'alibabaPuhuiM',
                },
              },
            },
          },
        ],
        polar: {
          center: ['50%', '50%'],
          radius: ['60%', '75%'],
        },
        angleAxis: {
          max: max,
          show: false,
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: '外1圈装饰',
            type: 'pie',
            zlevel: 1,
            silent: true,

            radius: ['98%', '97%'],
            hoverAnimation: false,
            color: "rgba(88,142,197,0.5)",
            // animation:false,    //charts3 no
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [1]
          },
          {
            name: '外2圈装饰',
            type: 'pie',
            zlevel: 2,
            silent: true,
            radius: ['90%', '91%'],
            startAngle: 0,
            hoverAnimation: false,
            // animation:false,    //charts3 no
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
              name: '',
              value: 10,
              itemStyle: {
                normal: {
                  color: "rgba(88,142,197,0.5)",
                  borderWidth: 0,
                  borderColor: "rgba(0,0,0,0)"
                }
              }
            },
              {
                name: '',
                value: 8,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 10,
                itemStyle: {
                  normal: {
                    color: "rgba(88,142,197,0.5)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 8,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 10,
                itemStyle: {
                  normal: {
                    color: "rgba(88,142,197,0.5)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 8,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 10,
                itemStyle: {
                  normal: {
                    color: "rgba(88,142,197,0.5)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 8,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              }
            ]
          },
          {
            name: '外3圈装饰',
            type: 'pie',
            zlevel: 3,
            silent: true,
            radius: ['88%', '87%'],
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
              name: '',
              value: 8,
              itemStyle: {
                normal: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0,
                  borderColor: "rgba(0,0,0,0)"
                }
              }
            },
              {
                name: '',
                value: 10,
                itemStyle: {
                  normal: {
                    color: "rgba(88,142,197,0.5)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 8,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 10,
                itemStyle: {
                  normal: {
                    color: "rgba(88,142,197,0.5)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 8,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 10,
                itemStyle: {
                  normal: {
                    color: "rgba(88,142,197,0.5)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 8,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 10,
                itemStyle: {
                  normal: {
                    color: "rgba(88,142,197,0.5)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },

            ]
          },
          {
            name: '外4圈装饰',
            type: 'pie',
            zlevel: 4,
            silent: true,
            radius: ['84%', '83%'],
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
              name: '',
              value: 1,
              itemStyle: {
                normal: {
                  color: "rgb(126,190,255)",
                  borderWidth: 0,
                  borderColor: "rgba(0,0,0,0)"
                }
              }
            },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgb(126,190,255)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgb(126,190,255)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgb(126,190,255)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgb(126,190,255)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgb(126,190,255)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgb(126,190,255)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgb(126,190,255)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgb(126,190,255)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgb(126,190,255)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgb(126,190,255)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgb(126,190,255)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              },
              {
                name: '',
                value: 1,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                  }
                }
              }
            ]
          },
          {
            name: '外5圈装饰',
            type: 'pie',
            zlevel: 5,
            silent: true,
            radius: ['80%', '78%'],
            color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,.2)"],
            startAngle: 50,
            hoverAnimation: false,
            // animation:false,    //charts3 no
            label: {
              normal: {
                show: false
              },
            },
            data: [50, 20, 40]
          },
          {
            name: '',
            type: 'bar',
            roundCap: true,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(19, 84, 146, .4)',
            },
            data: [value],
            coordinateSystem: 'polar',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: '#005DCF',
                  },
                  {
                    offset: 1,
                    color: '#00CCFF',
                  },
                ]),
              },
            },
          },
          {
            name: '',
            type: 'gauge',
            radius: '54%',
            axisLine: {
              lineStyle: {
                color: [
                  [
                    1,
                    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: 'rgba(0, 182, 253, 0)',
                      },
                      {
                        offset: 0.5,
                        color: 'rgba(0, 182, 253, .2)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(0, 182, 253, .4)',
                      },
                    ]),
                  ],
                ],
                width: 1,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [],
            pointer: {
              show: false,
            },
          },
        ],
      };
      if (option) {
        myChart.setOption(option);
      }
      var timer;

      function doing() {
        let option = myChart.getOption();
        option.series[3].startAngle = option.series[3].startAngle - 1;
        myChart.setOption(option);
      }

      function startTimer() {
        timer = setInterval(doing, 100);
      }

      // function stopTimer() {
      //   clearInterval(timer);
      //   xzTimer = null;
      // }
      setTimeout(startTimer, 500);
    },

    getCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const date = now.getDate();
      const day = now.getDay();
      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const hour = now.getHours();
      const minute = now.getMinutes();
      const second = now.getSeconds();

      const formattedMonth = month < 10 ? `0${month}` : month;
      const formattedDate = date < 10 ? `0${date}` : date;
      const formattedHour = hour < 10 ? `0${hour}` : hour;
      const formattedMinute = minute < 10 ? `0${minute}` : minute;
      const formattedSecond = second < 10 ? `0${second}` : second;

      this.currentTime =
        `${year}年${formattedMonth}月${formattedDate}日 ${weekDays[day]} ${formattedHour}:${formattedMinute}:${formattedSecond}`;
    },


  }
};


// import '@/assets/images/leftnav.js';
$(function () {
  var Accordion = function (el, multiple) {
    this.el = el || {};
    this.multiple = multiple || false;

    // Variables privadas
    var links = this.el.find('.link');
    // Evento
    links.on('click', {
      el: this.el,
      multiple: this.multiple
    }, this.dropdown)
  };

  Accordion.prototype.dropdown = function (e) {
    var $el = e.data.el;
    let $this = $(this);
    let $next = $this.next();

    $next.slideToggle();
    $this.parent().toggleClass('open');

    if (!e.data.multiple) {
      $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
    }
  };

  var accordion = new Accordion($('#accordion'), false);
  $('.submenu li').click(function () {
    $(this).addClass('current').siblings('li').removeClass('current');
  });
});
</script>

<style>
/* 添加你的CSS样式 */
</style>