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

<template>
  <div>
    <div class="map">
      <!--            <img src="@/assets/images/qkq_mapbg.png"/>-->
      <supermap ref="supermap" style="height: 100%;width: 100%;position: absolute;z-index: 0;"
                :yxtSltProps="sltProps"></supermap>
    </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 class="map_tab_zw">
        <button @click="sltHandle" :class="{ 'on': btnOne }">矢量图</button>
        <button @click="yxtHandle" :class="{ 'on': btnTwo }">影像图</button>
      </div>
    </div>
    <!--头部结束-->
    <!-- 中间开始 -->
    <div class="center-bar">
      <div class="center-list">
        <h4>事项可网办率</h4>
        <h5>94.85%</h5>
      </div>
      <div class="center-list">
        <h4>办件率</h4>
        <h5>869件</h5>
      </div>
      <div class="center-list">
        <h4>锁定提前办结效率</h4>
        <h5>98.57%</h5>
      </div>
      <div class="center-list">
        <h4>承诺提前办结效率</h4>
        <h5>94.85%</h5>
      </div>
      <div class="center-list">
        <h4>逾期率</h4>
        <h5>0%</h5>
      </div>
      <div class="center-list">
        <h4>平均办理时间</h4>
        <h5>0天1小时36分</h5>
      </div>
    </div>
    <!-- 中间结束 -->
    <!-- 中间左侧  开始 -->
    <div class="zwyx_left">
      <div class="zwyx_con">
        <div class="qkq_tit ">事项逾期率</div>
        <div id="sxyql"></div>
      </div>
      <div class="zwyx_con">
        <div class="qkq_tit ">部门办件数</div>
        <div id="bmbjs"></div>
      </div>
      <div class="zwyx_con">
        <div class="qkq_tit ">部门办件率</div>
        <div id="bmbjl"></div>
      </div>
      <div class="zwyx_con">
        <div class="qkq_tit ">部门逾期率</div>
        <div id="bmyql"></div>
      </div>
    </div>
    <!-- 中间左侧  结束 -->


    <!--左侧开始-->
    <div class="left_con">
      <div class="top_txt">
        <b>汽开区</b>
        <span>小雨</span>
        <span>9~16℃</span>
      </div>
      <!-- 土地资源 -->
      <!-- 区域办件量TOP -->
      <div class="qkq_tdzy">
        <div class="qkq_tit">区域办件量TOP</div>
        <div class="selectDate">
          <!--          <span class="_selectData">程锦街道</span>-->
          <!--          <a class="icon_more" @click="smalClick(this)"-->
          <!--          ><img src="@/assets/images/down.png"-->
          <!--          /></a>-->
          <!--          <div class="_moreMenu">-->
          <!--            <ul>-->
          <!--              <li class="change">东风街道</li>-->
          <!--              <li>锦城街道</li>-->
          <!--            </ul>-->
          <!--          </div>-->
        </div>
      </div>
      <div
        id="sprh-zyfb"
        style="margin: 10px auto; width: 350px; height: 240px"
      ></div>
      <!-- 区域办件量TOP -->
      <!-- 办件趋势统计 -->
      <div class="qkq_tdzy">
        <div class="qkq_tit ">办件趋势统计</div>
      </div>
      <div
        id="sprh-bjqstj"
        style="margin: 10px auto; width: 350px; height: 300px"
      ></div>
      <!-- 办件趋势统计 -->
    </div>
    <!--左侧结束-->
    <!--右侧开始-->
    <div class="right_con">
      <div class="top_txt">
        <span>{{ currentTime }}</span>
<!--        <span>星期六</span>-->
<!--        <b>11:16:58</b>-->
      </div>
      <!-- 事项办件量Top10 -->
      <div class="qkq_tdzy">
        <div class="qkq_tit ">事项办件量Top10</div>
      </div>
      <div
        id="sprh-sxbjl10"
        style="margin: 10px auto; width: 350px; height: 260px"
      ></div>
      <!-- 事项办件量Top10 -->
      <!-- 事项办件率Top10 -->
      <div class="qkq_tdzy">
        <div class="qkq_tit ">事项办件率Top10</div>
      </div>
      <div
        id="sprh-sxbjl-top"
        style="margin: 10px auto; width: 350px; height: 260px"
      ></div>
      <!-- 事项办件率Top10 -->
    </div>
    <!--右侧结束-->
    <!--底部开始-->
    <div class="footer">
      <div class="nav-bottom">
        <div class="nav-bottom-left">
          <div class="nav-li-left">
            <span>经济运行</span>
          </div>
          <div class="nav-li-left">
            <span>城市管理</span>
          </div>
          <div class="nav-li-left" @click="serviceFAW('jtzl')">
            <span>交通治理</span>
          </div>
          <div class="nav-li-left" @click="serviceFAW('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">
            <span>营商环境</span>
          </div>
          <div class="nav-li-right on">
            <span>政务运行</span>
          </div>
          <div class="nav-li-right " @click="serviceFAW('sprh')">
            <span>安全应急</span>
          </div>
          <div class="nav-li-right">
            <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 supermap from "@/views/supermap/supermap";


export default {
  name: "yshj",
  components: {supermap},
  data() {
    return {
      sltProps: null,
      btnOne: true,
      btnTwo: false,
      currentTime: '',
    }
  },

  created() {
  },
  mounted() {
    this.regionTop();
    this.trend();
    this.matterUpTop();
    this.matterTop();
    this.sxyql();
    this.bmbjs();
    this.bmbjl();
    this.bmyql();
    // 每秒刷新时间
    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)
    },
    homePage(route) {
      this.$router.push({path: route});
    },
    serviceFAW(route) {
      this.$router.push({path: route});
    },
    smalClick(val) {
      var node = $(val).next();
      if (node.is(":hidden")) {
        //如果node是隐藏的则显示node元素，否则隐藏
        node.show();
      } else {
        node.hide();
      }
    },

    regionTop() {
      var myChart = echarts.init(document.getElementById('sprh-zyfb'));
      let data = [
        {value: 0, label: '前程街道'},
        {value: 0, label: '富民街道'},
        {value: 0, label: '广兴街道'},
        {value: 0, label: '东风街道'},
        {value: 0, label: '锦绣街道'},
        {value: 0, label: '锦城街道'}
      ];

      let option = {
        grid: {
          top: 10,
          left: 33,
          right: 20,
          bottom: 5,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          show: true,
          inverse: true,
          type: 'category',
          axisLine: {
            show: false
          }
        },
        series: [
          {
            name: 'label',
            type: 'bar',
            barWidth: 10,
            yAxisIndex: 0,
            label: {
              show: true,
              position: 2,
              color: '#fff',
              fontSize: 12
            },
            data: data.map((item) => {
              return {
                value: 0,
                label: {
                  formatter() {
                    return item.label;
                  }
                }
              };
            })
          },
          {
            name: 'value',
            type: 'bar',
            barWidth: 10,
            barMinHeight: 10,
            yAxisIndex: 0,
            label: {
              show: true,
              position: 'right',
              color: '#00d5e1',
              fontSize: 12,
              rich: {
                value: {
                  color: '#00e1ce'
                }
              },
              formatter({
                          value
                        }) {
                return `{value|${value}个}`;
              }
            },
            itemStyle: {
              barBorderRadius: 3
            },
            data: data.map(({value}, index) => {
              let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
                offset: 1,
                color: '#004eaf'
              }, {
                offset: 0,
                color: '#089aa2'
              }], false);

              return {
                value,
                label: {color},
                itemStyle: {color}
              };
            })
          }
        ]
      };

      let updateInterval = 1000; // 更新间隔，单位：毫秒
      let updateRegionTop = () => {
        data.forEach((item) => {
          item.value += Math.floor(Math.random() * 10); // 模拟逐渐增加的数据
          if (item.value >= 100) {
            item.value = 0; // 当增加到1000时重新开始
          }
        });

        option.series[1].data = data.map(({value}, index) => {
          let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
            offset: 1,
            color: '#004eaf'
          }, {
            offset: 0,
            color: '#089aa2'
          }], false);

          return {
            value,
            label: {color},
            itemStyle: {color}
          };
        });

        myChart.setOption(option);
      };

      updateRegionTop(); // 首次更新数据

      let timer = setInterval(updateRegionTop, updateInterval);

    },

    trend() {
      //办件趋势
      var myChart = echarts.init(document.getElementById('sprh-bjqstj'));
      var monthData = [];
      var lineData = [];
      for (var i = 1; i <= 12; i++) {
        monthData.push(i + '月');
        var lineNumber = Math.floor(Math.random() * 10000);
        lineData.push(lineNumber);
      }

      let option = {

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          top: '5%',
          left: '15%',
          right: '5%',
          bottom: '25%',
          // containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: '#502297',
                width: 1,
                type: 'dashed',
              },
            },
            splitLine: {
              show: true,
              interval: 'auto',
              lineStyle: {
                color: ['#502297'],
                type: 'dashed',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#FFFFFF', //X轴文字颜色
                fontSize: 12,
              },
              margin: 12,
              interval: 0,
            },
            axisTick: {
              show: false,
            },
            data: monthData,
          },
        ],
        yAxis: [
          {
            splitNumber: 6,
            splitLine: {
              show: true,
              interval: 'auto',
              lineStyle: {
                color: ['#502297'],
                type: 'dashed',
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: '#502297',
                width: 1,
                type: 'dashed',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff',
              },
            },
          },
        ],
        series: [
          {
            name: '成绩',
            type: 'line',
            symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            smooth: true,
            symbolSize: 8,
            lineStyle: {
              normal: {
                color: '#FE7B00', // 线条颜色
              },
              borderColor: '#ffffff',
            },
            itemStyle: {
              color: '#ffffff',
              borderColor: '#FE7B00',
              borderWidth: 2,
            },

            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(125, 14, 255, 0.4)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(116, 0, 216, 0.1)',
                    },
                  ],
                  false
                ),
              },
            },
            data: lineData,
          },
        ],
      };
      var currentIndex = -1;
      var timer = setInterval(function () {
        // 生成新的随机数据
        currentIndex++;
        if (currentIndex >= 12) {
          currentIndex = 0;
          for (var i = 0; i < lineData.length; i++) {
            lineData[i] = Math.floor(Math.random() * 1000);
          }
        } else {
          lineData[currentIndex] = Math.floor(Math.random() * 1000);
        }

        // 更新 option 中的数据
        option.series[0].data = lineData;

        // 重新渲染图表
        myChart.setOption(option);
      }, 1000); // 每秒更新一次数据

      if (option) {
        myChart.setOption(option);
      }
    },
    matterUpTop() {
      var myChart = echarts.init(document.getElementById('sprh-sxbjl10'));
      var datas = [{
        "value": 30,
        "name": "特种设备安全管.."
      },
        {
          "value": 20,
          "name": "特种设备使用登.."
        },
        {
          "value": 10,
          "name": "特种设备安全管2.."
        },
        {
          "value": 40,
          "name": "一孩、二孩、三孩.."
        },
        {
          "value": 50,
          "name": "失业登记"
        },
        {
          "value": 60,
          "name": "医师执业注册（.."
        },
        {
          "value": 70,
          "name": "残疾人证新办"
        },
        {
          "value": 80,
          "name": "护士执业注册(.."
        },
        {
          "value": 90,
          "name": "失业登记2"
        },
        {
          "value": 100,
          "name": "一孩、二孩、三孩1.. "
        }
      ]
      var maxArr = (new Array(datas.length)).fill(100);
      let option = {
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'none'
          },
          formatter: function (params) {
            return params[0].name + ' : ' + params[0].value
          }
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLabel: {
            show: true,
            align: 'right',
            textStyle: {
              fontSize: 14,
              color: '#ffffff',
              rich: {
                index: {
                  color: '#9d9d9d',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                index1: {
                  color: '#f8777b',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                index2: {
                  color: '#ffa145',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                index3: {
                  color: '#6ade8d',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                name: {
                  width: 7 * 14,
                  align: 'left',
                  textAlign: 'left'
                }
              }
            },
            formatter: (name) => {
              var index = (datas.map(item => item.name)).indexOf(name) + 1;
              return [
                '{' + (index > 3 ? 'index' : 'index' + index) + '|' + index + '}',
                '{name|' + name + '}'
              ].join(' ')
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: datas.map(item => item.name)
        },
          {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: '#3196fa',
                fontSize: '12'
              },
              formatter: '{value}'
            },
            data: datas.map(item => item.value)
          }
        ],
        series: [{
          name: '值',
          type: 'bar',
          zlevel: 1,
          itemStyle: {
            normal: {
              barBorderRadius: 5,
              color: '#3196fa',
            },
            emphasis: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          barWidth: 10,
          data: datas
        },
          {
            name: '背景',
            type: 'bar',
            barWidth: 10,
            barGap: '-100%',
            data: maxArr,
            itemStyle: {
              normal: {
                color: '#042039',
                barBorderRadius: 5,
              }
            },
          }
        ]
      };

      setInterval(function () {
        // 更新数据和名字，并重新渲染图表
        datas.forEach(function (item) {
          item.value = Math.floor(Math.random() * 100); // 随机生成新的值
        });

        myChart.setOption({
          yAxis: [{
            data: datas.map(item => item.name)
          }, {
            data: datas.map(item => item.value)
          }],
          series: [{
            data: datas
          },
            {
              data: maxArr
            }
          ]
        });
      }, 1000); // 每隔3秒钟更新一次数据

      // 初次渲染图表
      if (option) {
        myChart.setOption(option);
      }
    },
    matterTop() {
      var myChart = echarts.init(document.getElementById('sprh-sxbjl-top'));
      var datas = [{
        "value": 0,
        "name": "民办学校的举办.."
      },
        {
          "value": 0,
          "name": "失业登记.."
        },
        {
          "value": 0,
          "name": "民办学校的终止.."
        },
        {
          "value": 0,
          "name": "医师执业注册(.."
        },
        {
          "value": 0,
          "name": "一孩、二孩、三孩.."
        },
        {
          "value": 0,
          "name": "药品零售企业许.."
        },
        {
          "value": 0,
          "name": "护士执业注册"
        },
        {
          "value": 0,
          "name": "残疾人证新办"
        },
        {
          "value": 0,
          "name": "医疗广告审查"
        },
        {
          "value": 0,
          "name": "变更施工单位项.."
        },

      ]
      var maxArr = (new Array(datas.length)).fill(100);
      let option = {
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'none'
          },
          formatter: function (params) {
            return params[0].name + ' : ' + params[0].value
          }
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLabel: {
            show: true,
            align: 'right',
            textStyle: {
              fontSize: 14,
              color: '#ffffff',
              rich: {
                index: {
                  color: '#9d9d9d',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                index1: {
                  color: '#f8777b',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                index2: {
                  color: '#ffa145',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                index3: {
                  color: '#6ade8d',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                name: {
                  width: 7 * 14,
                  align: 'left',
                  textAlign: 'left'
                }
              }
            },
            formatter: (name) => {
              var index = (datas.map(item => item.name)).indexOf(name) + 1;
              return [
                '{' + (index > 3 ? 'index' : 'index' + index) + '|' + index + '}',
                '{name|' + name + '}'
              ].join(' ')
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: datas.map(item => item.name)
        }, {
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          axisLabel: {
            textStyle: {
              color: '#3196fa',
              fontSize: '12'
            },
            formatter: '{value}%'
          },
          data: datas.map(item => item.value)
        }],
        series: [{
          name: '值',
          type: 'bar',
          zlevel: 1,
          itemStyle: {
            normal: {
              barBorderRadius: 5,
              color: '#3196fa',
            },
          },
          barWidth: 10,
          data: datas
        },
          {
            name: '背景',
            type: 'bar',
            barWidth: 10,
            barGap: '-100%',
            data: maxArr,
            itemStyle: {
              normal: {
                color: '#042039',
                barBorderRadius: 5,
              }
            },
          },
        ]
      };

      if (option) {
        myChart.setOption(option);
      }
      // 设置定时器，每隔一段时间更新数据并重绘图表
      setInterval(function () {
        // 更新数据和名字，并重新渲染图表
        datas.forEach(function (item) {
          item.value = Math.floor(Math.random() * 100); // 随机生成新的值
        });

        myChart.setOption({
          yAxis: [{
            data: datas.map(item => item.name)
          }, {
            data: datas.map(item => item.value)
          }],
          series: [{
            data: datas
          },
            {
              data: maxArr
            }
          ]
        });
      }, 1000); // 每隔3秒钟更新一次数据
    },
    sxyql() {
      var myChart = echarts.init(document.getElementById('sxyql'));
      var data = [
        {
          name: 'xxxx事项',
          value: 10,
        },
        {
          name: 'xxxx事项',
          value: 20,
        },
        {
          name: 'xxxx事项',
          value: 60,
        },
        {
          name: 'xxxx事项',
          value: 50,
        },
        {
          name: 'xxxx事项',
          value: 70,
        },
      ];
      var defaultData = [100, 100, 100, 100, 100, 100];

      let labelData = ['cxxxx事项', 'xxxx事项', 'xxxx事项', 'xxxx事项', 'xxxx事项']
      let valueData = [];
      for (var i = 0; i < data.length; i++) {
        let object = {}
        labelData.push(data[i]);
        var lineNumber = Math.floor(Math.random() * 900);
        this.$set(object, "name", data[i]);
        this.$set(object, "value", lineNumber);
        valueData.push(object);
      }
      var getArrByKey = (data, k) => {
        let key = k || 'value';
        let res = [];
        if (data) {
          data.forEach(function (t) {
            res.push(t[key]);
          });
        }
        return res;
      };
      var getSymbolData = (data) => {
        let arr = [];
        for (var i = 0; i < data.length; i++) {
          arr.push({
            value: data[i].value,
            symbolPosition: 'end',
          });
        }
        return arr;
      };
      // console.log(getSymbolData(data));
      var option = {
        grid: {
          top: '9%',
          bottom: -15,
          right: -50,
          left: 0,
          containLabel: true,
        },
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            triggerEvent: false,
            show: true,
            inverse: true,
            data: getArrByKey(data, 'name'),
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              interval: 0,
              color: '#fff',
              align: 'left',
              margin: 10,
              fontSize: 12,
              formatter: function (value, index) {
                return '{title|' + value + '}';
              },
              rich: {
                title: {
                  width: 500,
                },
              },
            },
          },
          {
            triggerEvent: false,
            show: true,
            inverse: true,
            data: getArrByKey(data, 'name'),
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },

            axisLabel: {
              interval: 0,
              shadowOffsetX: '-110px',
              // color: ['#fff'],
              align: 'right',
              verticalAlign: 'bottom',
              lineHeight: 24,
              fontSize: 11,
              color: '#fff',
              formatter: function (value, index) {
                return (
                  '逾期: ' + data[index].value + '%'
                );
              },
              rich: {
                percentNumber: {
                  color: '#ff8e2e',
                },
              },
            },
          },
        ],
        series: [
          {
            // name: 'XXX',
            // type: 'pictorialBar',
            // symbol:
            //   'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
            // symbolSize: [50, 50],
            // symbolOffset: [20, 0],
            // z: 12,
            // itemStyle: {
            //   normal: {
            //     color: '#fff',
            //   },
            // },
            // data: getSymbolData(data),
            name: 'XXX',
            type: 'bar',
            barWidth: 10,
            barGap: '-100%',
            z: 1,
            data: getSymbolData(data),
            itemStyle: {
              normal: {
                color: '#0b2645',
                barBorderRadius: 10,
              },
            },
          },
          {
            name: '背景',
            type: 'bar',
            barWidth: 10,
            barGap: '-100%',
            z: 1,
            data: defaultData,
            itemStyle: {
              normal: {
                color: '#0b2645',
                barBorderRadius: 10,
              },
            },
          },
          {
            name: '条',
            type: 'bar',
            showBackground: true,
            // backgroundColor:'#fff',
            barBorderRadius: 30,
            yAxisIndex: 0,
            data: data,
            barWidth: 10,
            // align: left,
            itemStyle: {
              normal: {
                // color: "rgba(41, 162, 245, 1)",
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: 'rgb(0,251,253,0)',
                  },
                  {
                    offset: 1,
                    color: 'rgb(0,251,253,1)',
                  },
                ]),
                barBorderRadius: 10,
              },
              // color: '#A71A2B',
              barBorderRadius: 4,
            },
            label: {
              normal: {
                color: '#fff',
                show: true,
                position: [0, '-20px'],
                textStyle: {
                  fontSize: 12,
                },
                formatter: function (a, b) {
                  return a.name;
                },
              },
            },
          },
        ],
      };

      // 更新数据并重新设置图表选项
      function updateData() {
        let newData = [];
        for (var i = 0; i < data.length; i++) {
          let object = {};
          object.name = data[i].name;
          object.value = Math.floor(Math.random() * 1000);
          newData.push(object);
        }
        option.series[2].data = newData;
        myChart.setOption(option);
      }

// 每隔一段时间更新数据
      setInterval(function () {
        updateData();
      }, 1000);


      if (option) {
        myChart.setOption(option);
      }
    },
    bmbjs() {
      var myChart = echarts.init(document.getElementById('bmbjs'));
      let data = ['xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门']
      let valueData = [];
      let labelData = []
      for (var i = 0; i < data.length; i++) {
        labelData.push(data[i]);
        var lineNumber = Math.floor(Math.random() * 900);
        valueData.push(lineNumber);
      }
      var option = {
        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
              }
            },
          },

        },
        grid: {
          top: '18%',
          left: '1%',
          right: '1%',
          bottom: '25%',
          // containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          axisLine: { //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.4)'
            },
          },
          axisLabel: { //坐标轴刻度标签的相关设置
            textStyle: {
              color: '#d1e6eb',
              margin: 15,
            },
          },
          axisTick: {
            show: false,
          },
          data: labelData,
        }],
        yAxis: [{
          type: 'value',
          min: 0,
          // max: 140,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
            margin: 20,
            textStyle: {
              color: '#d1e6eb',

            },
          },
          axisTick: {
            show: false,
          },
        }],
        series: [{
          name: '办件数',
          type: 'line',
          // smooth: true, //是否平滑曲线显示
          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          // symbol: 'image://./static/images/guang-circle.png',
          symbolSize: 8,
          lineStyle: {
            normal: {
              color: "#53fdfe", // 线条颜色
            },
            borderColor: '#f0f'
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#fff',
            }
          },
          itemStyle: {
            normal: {
              color: "rgba(255,255,255,1)",
            }
          },
          tooltip: {
            show: true
          },
          areaStyle: { //区域填充样式
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0,150,239,0.3)'
              },
                {
                  offset: 1,
                  color: 'rgba(0,253,252,0)'
                }
              ], false),
              shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
              shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          },
          data: valueData
        }]
      };
      var currentIndex = -1;
      var timer = setInterval(function () {
        // 生成新的随机数据
        currentIndex++;
        if (currentIndex >= 12) {
          currentIndex = 0;
          for (var i = 0; i < valueData.length; i++) {
            valueData[i] = Math.floor(Math.random() * 700);
          }
        } else {
          valueData[currentIndex] = Math.floor(Math.random() * 700);
        }

        // 更新 option 中的数据
        option.series[0].data = valueData;

        // 重新渲染图表
        myChart.setOption(option);
      }, 1000); // 每秒更新一次数据
      if (option) {
        myChart.setOption(option);
      }
    },
    bmbjl() {
      var myChart = echarts.init(document.getElementById('bmbjl'));
      const color = ['rgba(0, 181, 255, 0.3)']; //线条边框颜色
      // const backgroundColor = '#101736';
      const typeList = ['xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门'];
      const number = [10, 23, 14, 17, 20, 18, 10, 23, 14, 17];
      // const maxData = Math.max(...number) * 1.1;

      let valueData = [];
      let labelData = []
      for (var i = 0; i < typeList.length; i++) {
        labelData.push(typeList[i]);
        var lineNumber = Math.floor(Math.random() * 100);
        valueData.push(lineNumber);
      }
      const maxData = Math.max(...valueData) * 1.1;
      const title = {
        show: false,
      };
      const legend = {
        show: false,
      };
      const tooltip = {
        show: true,
      };
      const indicator = labelData.reduce((acc, cur) => {
        acc.push({name: cur, max: maxData});
        return acc;
      }, []);
      const dataArr = [
        {
          name: '部门办件率',
          value: valueData,
          symbolSize: 0,
          symbol: 'circle',

          lineStyle: {
            width: 1,
          },
          areaStyle: {
            // 单项区域填充样式
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 1, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: color[0],
                },
                {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)',
                },
                {
                  offset: 1,
                  color: color[0],
                },
              ],
              global: false,
            },
            opacity: 1, // 区域透明度
          },
        },
      ];

      var option = {
        color,
        title,
        legend,
        tooltip,
        radar: {
          center: ['50%', '50%'], //圆心坐标距离左边和上边的距离
          radius: ['0%', '75%'], //内外半径，不写默认是75%
          startAngle: 90, //可以旋转图形
          shape: 'circle',
          axisName: {
            color: '#fff',
            fontSize: 11,
          },
          indicator: indicator,
          splitArea: {
            show: false, //默认显示颜色分割区域，不需要显示
          },
          axisLine: {
            show: true, //是否显示十字交叉线
            symbol: ['none', 'circle'],
            symbolSize: [8, 8],

            lineStyle: {
              color: '#fff',
              width: 0,

            },
          },
          axisLabel: {show: false},
          splitLine: {
            //雷达一圈圈
            show: true,
            lineStyle: {
              type: 'solid',
              color: '#455063', // 雷达一圈圈颜色分隔线颜色
              width: 1, // 分隔线线宽
            },
          },
        },
        series: [
          {
            type: 'radar',
            data: dataArr,
          },
        ],
      };

      function updateData() {
        let newData = [];
        for (var i = 0; i < typeList.length; i++) {
          var lineNumber = Math.floor(Math.random() * 100); // 生成0到1000之间的随机数
          newData.push(lineNumber);
        }
        option.series[0].data[0].value = newData;
        myChart.setOption(option);
      }

      setInterval(function () {
        updateData();
      }, 1000); // 每秒更新一次数据
      if (option) {
        myChart.setOption(option);
      }
    },
    bmyql() {
      var myChart = echarts.init(document.getElementById('bmyql'));
      let data = ['xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门']
      let valueData = [];
      let labelData = []
      for (var i = 0; i < data.length; i++) {
        labelData.push(data[i]);
        var lineNumber = Math.floor(Math.random() * 900);
        valueData.push(lineNumber);
      }
      var option = {
        animation: true,
        grid: {
          top: "5%",
          bottom: "20%",
          right: "5%"
        },
        tooltip: {
          show: true,
        },
        xAxis: {
          data: labelData,
          axisLine: {
            show: false,//隐藏X轴轴线

          },
          axisTick: {
            show: false //隐藏X轴轴线
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(77, 128, 254, 0.2)",
              width: 1
            }
          },
          axisLabel: {
            show: true,
            interval: 0,
            rotate: 45,
            // margin: 14,
            fontSize: 10,
            textStyle: {
              color: "#a8d5ff" //X轴文字颜色
            }
          }
        },
        yAxis: [
          {
            type: "value",
            gridIndex: 0,
            min: 0,
            //max: 100,
            interval: 50,
            // splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(77, 128, 254, 0.2)",
                width: 1
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(77, 128, 254, 0.2)"
              }
            },
            axisLabel: {
              show: true,
              margin: 7,
              fontSize: 10,
              textStyle: {
                color: "#a8d5ff"
              }
            }
          }
        ],
        series: [
          {
            name: "设备在线率",
            type: "bar",
            barWidth: 8,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: '#fff',
                    fontSize: 10
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(146, 225, 255, 1)"
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 151, 251, 1)"
                  }
                ])
              }
            },
            data: valueData,
            z: 10,
            zlevel: 0
          },
          {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#0F375F"
              }
            },
            symbolRepeat: "fixed",
            symbolMargin: 6,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [18, 2],
            symbolPosition: "start",
            symbolOffset: [1, 1],
            data: valueData,
            width: 2,
            z: 0,
            zlevel: 1
          },
          {
            name: "外框",
            type: "bar",
            barGap: "-110%", // 设置外框粗细
            data: [100, 100, 100, 100, 100, 100, 100],
            barWidth: 16,
            itemStyle: {
              normal: {
                color: "transparent", // 填充色
                // barBorderRadius: 0, //圆角半径
                label: {
                  // 标签显示位置
                  show: false,
                  position: "top" // insideTop 或者横向的 insideLeft
                }
              }
            },
            z: 0
          },
          {
            name: "背影",
            type: "line",
            smooth: true, //平滑曲线显示
            showAllSymbol: false, //显示所有图形。
            symbolSize: 0,
            lineStyle: {
              width: 0
            },
            areaStyle: {
              color: "rgba(0, 151, 251, 0.1)"
            },
            data: [498, 520, 568, 432, 464, 332, 344, 458, 470, 468, 398, 310, 421],
            z: 5
          }
        ],
        // dataZoom: [
        //   {
        //     type: "slider",
        //     show: false,
        //     xAxisIndex: [0],
        //     endValue: 14,
        //     startValue: 0
        //   }
        // ]
      }
      var currentIndex = -1;
      var timer = setInterval(function () {
        // 生成新的随机数据
        currentIndex++;
        if (currentIndex >= 12) {
          currentIndex = 0;
          for (var i = 0; i < valueData.length; i++) {
            valueData[i] = Math.floor(Math.random() * 700);
          }
        } else {
          valueData[currentIndex] = Math.floor(Math.random() * 700);
        }

        // 更新 option 中的数据
        option.series[0].data = valueData;

        // 重新渲染图表
        myChart.setOption(option);
      }, 1000); // 每秒更新一次数据

      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}`;
    },
  },
};
</script>

<style scoped>
/* Your CSS styles here */
</style>