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">新办企业数</div>
          <div id="qkq_bj1"></div>
        </div>
        <div class="con_div">
          <div class="qkq_tit txt_t">即办件统计数</div>
          <div class="qkq_qkq_div clearfix">
            <div class="qkq_hz 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">公安办件统计</div>
          <div id="qkq_bj3"></div>
        </div>


      </div>
      <div class="con_left_f">

        <div class="con_div qkq_bjzs">
          <div class="qkq_bjzs_con">
            <h4>{{ HallHandling.hallTotal }}</h4>
            <p>大厅办件总数</p>
            <div class="qkq_bjzs_bg"></div>
            <div class="qkq_bjzs_txt clearfix">
              <div class="qkq_bjzs_txt_fl fl">
                <div class="bjzs_txt">
                  <p>建设用地(含临时建设</br>用地)规划许可证</p>
                  <p style="margin-top: 15px"><b>{{ HallHandling.buildLandUse }}</b>件</p>
                </div>
                <div class="bjzs_txt">
                  <p>建设工程(含临时建设</br>工程)规划许可证</p>
                  <p style="margin-top: 15px"><b>{{ HallHandling.architecturalEngineering }}</b>件</p>
                </div>
                <div class="bjzs_txt">
                  <p>建筑工程施工许可证</p>
                  <p><b>{{ HallHandling.architecturalLicence }}</b>件</p>
                </div>
                <div class="bjzs_txt">
                  <p>年度平均审批用时</br>项目用时</p>
                  <p style="margin-top: 15px"><b>{{ HallHandling.projectTime }}</b>件</p>
                </div>
              </div>
              <div class="qkq_bjzs_txt_fr fr">
                <div class="bjzs_txt">
                  <p>年度平均审批用时</br>立项用地阶段</p>
                  <p style="margin-top: 15px"><b>{{ HallHandling.projectApprovalStage }}</b>件</p>
                </div>
                <div class="bjzs_txt">
                  <p>年度平均审批用时</br>工程规划阶段</p>
                  <p style="margin-top: 15px"><b>{{ HallHandling.planStage }}</b>件</p>
                </div>
                <div class="bjzs_txt">
                  <p>年度平均审批用时</br>施工许可阶段</p>
                  <p style="margin-top: 15px"><b>{{ HallHandling.permitStage }}</b>件</p>
                </div>
                <div class="bjzs_txt">
                  <p>年度平均审批用时</br>竣工验收阶段</p>
                  <p style="margin-top: 15px"><b>{{ HallHandling.acceptancePhase }}</b>件</p>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="con_div">
          <div class="qkq_tit txt_t">待提供板块</div>
          <div class="qkq_bjs_con">
            <div class="qkq_bjs">
              <img src="../../assets/images/qkq_icon19.png"/>
              <div class="qkq_bjs_txt">
                <p>待提供板块1</p>
                <p><b>72</b>件</p>
              </div>
            </div>
            <div class="qkq_bjs">
              <img src="../../assets/images/qkq_icon19.png"/>
              <div class="qkq_bjs_txt">
                <p>待提供板块2</p>
                <p><b>72</b>件</p>
              </div>
            </div>
            <div class="qkq_bjs">
              <img src="../../assets/images/qkq_icon19.png"/>
              <div class="qkq_bjs_txt">
                <p>待提供板块3</p>
                <p><b>72</b>件</p>
              </div>
            </div>
            <div class="qkq_bjs">
              <img src="../../assets/images/qkq_icon19.png"/>
              <div class="qkq_bjs_txt">
                <p>待提供板块4</p>
                <p><b>72</b>件</p>
              </div>
            </div>
          </div>
          <div class="qkq_bjs_con">
            <div class="qkq_bjs">
              <img src="../../assets/images/qkq_icon19.png"/>
              <div class="qkq_bjs_txt">
                <p>待提供板块5</p>
                <p><b>72</b>件</p>
              </div>
            </div>
            <div class="qkq_bjs">
              <img src="../../assets/images/qkq_icon19.png"/>
              <div class="qkq_bjs_txt">
                <p>待提供板块6</p>
                <p><b>72</b>件</p>
              </div>
            </div>
            <div class="qkq_bjs">
              <img src="../../assets/images/qkq_icon19.png"/>
              <div class="qkq_bjs_txt">
                <p>待提供板块7</p>
                <p><b>72</b>件</p>
              </div>
            </div>
            <div class="qkq_bjs">
              <img src="../../assets/images/qkq_icon19.png"/>
              <div class="qkq_bjs_txt">
                <p>待提供板块8</p>
                <p><b>72</b>件</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="con_left_g">
        <div class="con_div">
          <div class="qkq_tit txt_t">好差评统计</div>
          <div id="qkq_bj4"></div>
        </div>
        <div class="con_div">
          <div class="qkq_tit txt_t">办结率统计</div>
          <div class="qkq_qkq_div clearfix">
            <div class="qkq_hz qkq_hz2 fl">
              <p>自然人办件数：<b>{{ CompletionRate.numberOfProcessedItems }}</b></p>
              <p>自然人办结数：<b>{{ CompletionRate.completedQuantity }}</b></p>
            </div>
            <div id="qkq_bj5" class="fr"></div>
          </div>
        </div>
        <div class="con_div">
          <div class="qkq_tit txt_t">高频事项Top10</div>
          <div class="qkq_sxtop">
            <p><a><i>1</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>5442件</span></p>
            <p><a><i>2</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>4322件</span></p>
            <p><a><i>3</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>3618件</span></p>
            <p><a><i>4</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>7214件</span></p>
            <p><a><i>5</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>3628件</span></p>
            <p><a><i>6</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>1578件</span></p>
            <p><a><i>7</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>2145件</span></p>
            <p><a><i>8</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>7652件</span></p>
            <p><a><i>9</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>3861件</span></p>
            <p><a><i>10</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>3728件</span></p>
          </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
} from "@/api/system/zwyx";


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

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

    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
      });
    },
    cameraList() {
      getCameraList().then(response => {
        this.cameras = response.data;
      })
    },
    //查询新办企业可视化
    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_bj5(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: 2.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 getmax = 100;
      //要改变的数据
      var getvalue = val.completionRate;

      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);
      }
    },

    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>