zhangzengfei
2022-08-05 1e4a3f702623a46bcd53dbc96e235d51e0edb155
src/views/manageCenter/index.vue
@@ -22,42 +22,118 @@
        </div>
      </div>
      <!--  <div class="equipmentInfo">
      <div class="heart">
        <div class="products">
          <div class="title">统计分析</div>
          <div class="productList">
            <p class="p-statis" style=" vertical-align: top">
              <span>时间:</span>
              <el-date-picker
                size="mini"
                v-model="searchTime"
                @change="searchHandler"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </p>
            <!-- <p class="p-statis" style="margin-left: 10px">
              <b style="width: 60px">场景:</b>
              <el-select
                v-model="taskValues"
                multiple
                @change="searchingBtn"
                :disabled="typeDisable"
                collapse-tags
                size="mini"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in VideoPhotoData.tasks"
                  style="font-size: 12px"
                  :key="item.id + 'x'"
                  :value="item.id"
                  :label="item.isDelete ? item.name + '(已删除)' : item.name"
                  :title="item.isDelete ? item.name + '(已删除)' : item.name"
                ></el-option>
              </el-select>
            </p> -->
            <p class="p-statis" style="margin-left: 20px">
              <span>部门:</span>
              <el-cascader
                size="mini"
                style="width:400px"
                v-model="searchTree"
                :options="menuTree"
                :props="{ value: 'id', label: 'name', checkStrictly: true }"
                collapse-tags
                clearable
                @change="handleTreeChange"
              ></el-cascader>
            </p>
            <p class="p-statis" style="margin-left: 20px">
              <span>等级:</span>
              <el-select
                v-model="alarmValues"
                clearable
                collapse-tags
                size="mini"
                style="width:140px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in levelOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </p>
            <p class="p-statis" style="">
              <el-button type="primary" size="mini" @click="searchHandler">搜索</el-button>
            </p>
          </div>
        </div>
      </div>
      <div class="equipmentInfo">
        <div class="equipmentCard">
          <div class="label">设备总量</div>
          <div class="label">预警总量</div>
          <div class="number">
            34
            <div class="upIcon iconfont">&#xe62e; 2</div>
            {{ warningTotal }}
            <div class="upIcon iconfont">&#xe62e;</div>
          </div>
          <img src="/images/manageCenter/total2.png" alt="" />
        </div>
        <div class="equipmentCard">
          <div class="label">摄像机总数</div>
          <div class="label">排查数量</div>
          <div class="number">
            23
            <div class="upIcon iconfont">&#xe62e; 2</div>
            {{ warningChecked }}
            <div class="upIcon iconfont">&#xe62e;</div>
          </div>
          <img src="/images/manageCenter/total3.png" alt="" />
        </div>
        <div class="equipmentCard">
          <div class="label">算法总数</div>
          <div class="label">整改数量</div>
          <div class="number">
            34
            <div class="downIcon iconfont">&#xe651; 2</div>
            {{ warningSolved }}
            <div class="downIcon iconfont">&#xe651;</div>
          </div>
          <img src="/images/manageCenter/total4.png" alt="" />
        </div>
        <div class="equipmentCard">
          <div class="label">任务总数</div>
          <div class="label">处理率</div>
          <div class="number">
            34
            <div class="downIcon iconfont">&#xe651; 2</div>
            {{ warningManage }}
            <div class="downIcon iconfont">&#xe651;</div>
          </div>
          <img src="/images/manageCenter/total1.png" alt="" />
@@ -65,169 +141,81 @@
      </div>
      <div class="equipmentStatus">
        <div class="left">
          <div class="title">设备运行状态监测</div>
          <div class="control">
            <div
              class="label"
              @click="select('day', 'selectBar')"
              :class="{ active: selectBar === 'day' }"
            >
        <div class="bar-chart">
          <div class="title">预警数量趋势</div>
          <!-- <div class="control">
            <div class="label" @click="select('day', 'selectBar')" :class="{ active: selectBar === 'day' }">
              今日
            </div>
            <div
              class="label"
              @click="select('week', 'selectBar')"
              :class="{ active: selectBar === 'week' }"
            >
            <div class="label" @click="select('week', 'selectBar')" :class="{ active: selectBar === 'week' }">
              本周
            </div>
            <div
              class="label"
              @click="select('month', 'selectBar')"
              :class="{ active: selectBar === 'month' }"
            >
            <div class="label" @click="select('month', 'selectBar')" :class="{ active: selectBar === 'month' }">
              本月
            </div>
          </div>
          </div> -->
          <div id="bar"></div>
        </div>
        <div class="right">
          <div class="title">设备离线时长排行</div>
          <div class="timeList scroll">
            <div
              class="timeItem"
              v-for="(item, index) in timeList"
              :key="index"
            >
              <div class="index">
                {{ index / 10 >= 1 ? index : `0${index}` }}.
              </div>
              <div class="name">
                {{ item.name }}
              </div>
              <div class="time">{{ item.time }}</div>
            </div>
          </div>
        </div>
      </div> -->
      <!-- <div class="performence">
        <div class="title">设备运行状态监测</div>
        <div class="control">
          <div
            class="label"
            @click="select('day', 'selectForm')"
            :class="{ active: selectForm === 'day' }"
          >
            今日
          </div>
          <div
            class="label"
            @click="select('week', 'selectForm')"
            :class="{ active: selectForm === 'week' }"
          >
            本周
          </div>
          <div
            class="label"
            @click="select('month', 'selectForm')"
            :class="{ active: selectForm === 'month' }"
          >
            本月
          </div>
        </div>
        <div class="table-area">
          <el-table
            id="table"
            ref="table"
            tooltip-effect="dark"
            :data="dataList"
            :fit="true"
            :stripe="true"
            class="gutter"
          >
            <el-table-column label="序号" class-name="index">
              <template slot-scope="scope">{{
                scope.$index + 1 + (page - 1) * size
              }}</template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="设备名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="id"
              label="设备ID"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="mem"
              label="内存"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="gpu"
              label="算力"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="cpu"
              label="cpu"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="dist"
              label="硬盘"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
          <el-pagination
            @current-change="refrash"
            @size-change="handleSizeChange"
            :current-page="page"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[5, 10, 15, 20, 25]"
            :total="total"
            background
          ></el-pagination>
        </div>
      </div>
 -->
      <div class="map">
        <div class="title">设备地图分布</div>
        <div id="mapChart"></div>
      </div>
      <!--  <div class="hashRate">
      <div class="hashRate">
        <div class="left">
          <div class="title">算法预警数据占比:</div>
          <div class="title">预警数据占比:</div>
          <div class="info">
            <div class="item">
              <div class="label">今日平均算力:</div>
              <div class="data">45</div>
            <div class="equipmentInfo" style="margin-top:25px">
              <div class="equipmentCard">
                <div class="label">整改总量</div>
                <div class="number">
                  {{ solvedTotal }}
                  <!-- <div class="upIcon iconfont">&#xe62e; 2</div> -->
                </div>
                <!-- <img src="/images/manageCenter/total2.png" alt="" /> -->
              </div>
              <div class="equipmentCard">
                <div class="label">日均次数</div>
                <div class="number">
                  {{ solvedPre }}
                  <!-- <div class="upIcon iconfont">&#xe62e; 2</div> -->
                </div>
                <!-- <img src="/images/manageCenter/total2.png" alt="" /> -->
              </div>
            </div>
            <div class="item">
              <div class="label">设备总量:</div>
              <div class="data">92</div>
            <div class="table-area">
              <el-table
                id="table"
                ref="table"
                tooltip-effect="dark"
                :data="tableDataList"
                :fit="true"
                :stripe="true"
                :max-height="350"
                class="gutter"
              >
                <el-table-column prop="date" label="日期" show-overflow-tooltip></el-table-column>
                <el-table-column prop="count" align="center" label="整改数量" show-overflow-tooltip></el-table-column>
              </el-table>
              <el-pagination
                @current-change="refrash"
                @size-change="handleSizeChange"
                :current-page="page"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[5, 10, 15, 20, 25]"
                :total="solvedTotal"
                background
              ></el-pagination>
            </div>
          </div>
          <div id="scatterChart"></div>
        </div>
        <div class="right">
          <div class="title">算法预警数据占比</div>
          <div id="pieChart"></div>
        </div>
      </div> -->
      </div>
    </div>
    <!-- 页尾 -->
@@ -240,23 +228,45 @@
import Footer from "@/components/Footer"
import * as echarts from "echarts"
import "echarts/map/js/china.js"
import * as Base64 from "js-base64"
import { analysisReport } from "@/api/es"
import { getLocalCameraTree } from "@/api/area"
import { getClusterDevList } from "@/api/clusterManage"
export default {
  components: {
    IndexHeader,
    Footer
  },
  created() {
    this.getInfo()
  },
  mounted() {
    //  this.initBar();
    this.initMap()
    //  this.initScatter();
    //   this.initPie();
  computed: {
    solvedPre() {
      if (this.solvedTotal == 0 || this.tableDataList.length == 0) {
        return 0
      }
      return parseInt(this.solvedTotal / this.tableDataList.length)
    },
    warningManage() {
      if (this.warningChecked == 0 || this.warningTotal == 0) {
        return 0
      }
      return parseInt(this.warningChecked / this.warningTotal) * 100 + "%"
    }
  },
  data() {
    return {
      lineChart: {},
      pieChart: {},
      searchTree: "",
      selectedOrg: "",
      selectNodes: [],
      searchTime: [
        this.$moment()
          .subtract(6, "days")
          .format("YYYY-MM-DD 00:00:00"),
        this.$moment().format("YYYY-MM-DD HH:mm:ss")
      ],
      alarmValues: "",
      userName: "",
      timeMsg: "",
      selectBar: "day",
@@ -287,60 +297,48 @@
        },
        {
          name: "告警管理",
          name: "推送管理",
          icon: "/images/manageCenter/manage2.png",
          openPath: "/report",
          path: "/report",
          permission: "statisticMng"
        }
      ],
      timeList: [
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" }
      cameraTree: [],
      menuTree: [],
      levelOptions: [
        { id: 0, value: "", label: "全部" },
        { id: 1, value: "一级", label: "一级" },
        { id: 2, value: "二级", label: "二级" },
        { id: 3, value: "三级", label: "三级" },
        { id: 4, value: "四级", label: "四级" },
        { id: 5, value: "五级", label: "五级" }
      ],
      barOption: {
        grid: {
          left: "3%",
          right: "3%",
          bottom: "10%",
          containLabel: true
        },
        legend: {
          x: "right",
          y: "top",
          itemHeight: 12,
          itemWidth: 12,
          itemHeight: 2,
          itemWidth: 2,
          icon: "circle"
        },
        tooltip: {},
        dataset: {
          source: [
            ["status", "在线", "离线"],
            ["00:00", 750, 130],
            ["02:00", 650, 230],
            ["04:00", 750, 130],
            ["06:00", 550, 330],
            ["08:00", 750, 130],
            ["10:00", 700, 180],
            ["12:00", 850, 30],
            ["14:00", 750, 130],
            ["16:00", 850, 30],
            ["18:00", 980, 0],
            ["20:00", 750, 130],
            ["22:00", 750, 130]
          ]
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#666"
          }
          },
          data: []
        },
        yAxis: {
          axisTick: {
@@ -366,7 +364,20 @@
        // to a column of dataset.source by default.
        series: [
          {
            type: "bar",
            type: "line",
            data: [],
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#0066FF"
                },
                {
                  offset: 1,
                  color: "rgba(0, 102, 255, 0.25)"
                }
              ])
            },
            color: {
              type: "linear",
              x: 0.02,
@@ -376,8 +387,8 @@
              colorStops: [
                {
                  offset: 0,
                  color: "#0066FF", // 0% 处的颜色
                  radius: ["50%", "80%"]
                  color: "#0066FF" // 0% 处的颜色
                  // radius: ["50%", "80%"]
                },
                {
                  offset: 1,
@@ -393,312 +404,18 @@
                barBorderRadius: [15, 15, 0, 0]
              }
            }
          },
          {
            type: "bar",
            color: {
              type: "linear",
              x: 0.02,
              y: 0.02,
              x2: 1,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#FF4B33", // 0% 处的颜色
                  radius: ["50%", "80%"]
                },
                {
                  offset: 1,
                  color: "rgba(255,75,51,0.25)" // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            },
            itemStyle: {
              //柱形图圆角,鼠标移上去效果,如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                //柱形图圆角,初始化效果
                barBorderRadius: [15, 15, 0, 0]
              }
            }
          }
        ]
      },
      mapOption: {
        visualMap: {
          left: "right",
          min: 0,
          max: 10,
          inRange: {
            color: ["#FCFDFF", "#0065FF"]
          },
          itemWidth: 56,
          itemHeight: 200,
          text: ["10", "0"],
          calculable: false
        },
        geo: {
          //中国地图设置
          map: "china",
          scaleLimit: {
            min: 1,
            max: 2
          },
          zoom: 1,
          top: 120,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          }
        },
        tooltip: {
          //显示悬浮窗口
          trigger: "item", //使用这个函数返回悬浮内容
          backgroundColor: "#FFFFFF",
          textStyle: {
            color: "#0064FF",
            fontSize: "14"
          },
          formatter: function(params) {
            const msg = params.data.name + ":" + params.data.value
            return msg
          }
        },
        series: [
          {
            type: "map",
            geoIndex: 0,
            data: [
              {
                name: "南海诸岛",
                value: 0,
                eventTotal: 100,
                specialImportant: 10,
                import: 10,
                compare: 10,
                common: 40,
                specail: 20
              },
              {
                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: "湖南",
                value: 0
              },
              {
                name: "安徽",
                value: 0
              },
              {
                name: "山东",
                value: 4
              },
              {
                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: "陕西",
                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: "台湾",
                value: 0
              },
              {
                name: "香港",
                value: 0
              },
              {
                name: "澳门",
                value: 0
              }
            ]
          }
        ]
      },
      scatterOption: {
        xAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            //y轴
            show: false
          },
          splitLine: {
            //网格线
            lineStyle: {
              color: "rgb(230, 230, 230)",
              type: "dashed" //设置网格线类型 dotted:虚线   solid:实线
            },
            show: true //隐藏或显示
          }
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            //y轴
            show: false
          },
          splitLine: {
            //网格线
            lineStyle: {
              color: "rgb(230, 230, 230)",
              type: "dashed" //设置网格线类型 dotted:虚线   solid:实线
            },
            show: true //隐藏或显示
          }
        },
        series: [
          {
            symbolSize: 20,
            data: [
              [10.0, 8.04],
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
              [11.0, 8.33],
              [14.0, 7.66],
              [13.4, 6.81],
              [10.0, 6.33],
              [14.0, 8.96],
              [12.5, 6.82],
              [9.15, 7.2],
              [11.5, 7.2],
              [3.03, 4.23],
              [12.2, 7.83],
              [2.02, 4.47],
              [1.05, 3.33],
              [4.05, 4.96],
              [6.03, 7.24],
              [12.0, 6.26],
              [12.0, 8.84],
              [7.08, 5.82],
              [5.02, 5.68]
            ],
            color: "rgba(0, 101, 255, 0.5)",
            type: "scatter"
          }
        ]
      },
      pieOption: {
        legend: {
          top: "bottom"
        },
        color: [
          "rgb(54, 60, 231)",
          "rgb(54, 178, 74)",
          "rgb(255, 178, 36)",
          "rgb(0, 190, 231)",
          "rgb(240, 190, 231)",
          "rgb(255, 124, 31)",
          "rgb(165, 96, 255)"
        ],
@@ -706,95 +423,213 @@
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [35, 120],
            radius: [20, 160],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 22.45, name: "离岗" },
              { value: 20.2, name: "人脸识别" },
              { value: 17.96, name: "车辆识别" },
              { value: 15.71, name: "睡岗" },
              { value: 12.86, name: "安全帽检测" },
              { value: 10.82, name: "个体静止" }
            ]
            label: {
              show: false
            },
            data: []
          }
        ]
      },
      dataList: [
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%"
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%"
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%"
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%"
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%"
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%"
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%"
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%"
        }
      ],
      tableDataList: [],
      page: 1,
      size: 5,
      total: 30
      solvedTotal: 0,
      warningTotal: 0,
      warningChecked: 0,
      warningSolved: 0
    }
  },
  created() {
    this.getInfo()
  },
  mounted() {
    this.searchHandler()
    this.initBar()
    this.initPie()
    this.getCameras()
  },
  methods: {
    async getCameras() {
      let clusterId = ""
      let clusterReq = await getClusterDevList()
      if (clusterReq && clusterReq.success) {
        if (clusterReq.data.clusterList.length > 0) {
          clusterId = clusterReq.data.clusterList[0].cluster_id
        }
      }
      let camereReq = await getLocalCameraTree({ clusterId: clusterId })
      if (camereReq && camereReq.success) {
        this.cameraTree = camereReq.data.treeMenu
        let tmpTree = JSON.parse(JSON.stringify(camereReq.data.treeMenu))
        for (let i = 0; i < tmpTree.length; i++) this.clearNode(tmpTree[i])
        this.menuTree = tmpTree
      }
    },
    clearNode(tree) {
      if (tree.children) {
        tree.children = tree.children.filter((item) => {
          return item.type == "MENU"
        })
      }
      if (tree.children && tree.children.length > 0) {
        for (let i = 0; i < tree.children.length; i++) this.clearNode(tree.children[i])
      } else {
        delete tree.children
      }
    },
    collSelectedNodes() {
      let selectedNodeId = this.selectedOrg
      let selectedNode = {}
      let orgNodeIds = []
      if (this.selectedOrg == "") {
        return orgNodeIds
      }
      function findNode(node) {
        if (node.id == selectedNodeId) {
          selectedNode = node
          return
        }
        if (node.children) {
          node.children.forEach((n) => {
            findNode(n)
          })
        }
      }
      function collNode(node) {
        if (node.type != "MENU") {
          orgNodeIds.push(node.id)
          return
        }
        if (node.children) {
          node.children.forEach((n) => {
            collNode(n)
          })
        }
      }
      this.cameraTree.forEach((n) => {
        findNode(n)
      })
      collNode(selectedNode)
      return orgNodeIds
    },
    searchHandler() {
      let query = {
        treeNodes: this.collSelectedNodes(),
        searchTime: this.format(this.searchTime),
        alarmLevel: this.alarmValues
      }
      analysisReport(query).then((rsp) => {
        if (rsp && rsp.success) {
          this.decodeWarningRate(rsp.data.warningRate)
          this.decodeWarningChartRate(rsp.data.warningChartRate)
          this.decodeWarningStatics(rsp.data.warningTable)
          this.decodeWarningTable(rsp.data.warningStatics)
        }
      })
    },
    decodeWarningTable(b64data) {
      this.solvedTotal = 0
      this.tableDataList = []
      if (b64data) {
        let decodeString = Base64.decode(b64data)
        if (decodeString != "") {
          let decodeResult = JSON.parse(decodeString)
          decodeResult = []
          if (decodeResult) {
            decodeResult.forEach((element) => {
              this.solvedTotal = this.solvedTotal + element.doc_count
              this.tableDataList.push({ date: element.key_as_string, count: element.doc_count })
            })
          }
        }
      }
    },
    // 折线图
    decodeWarningStatics(b64data) {
      this.lineChart.clear()
      this.barOption.xAxis.data = []
      this.barOption.series[0].data = []
      if (b64data) {
        let decodeString = Base64.decode(b64data)
        if (decodeString != "") {
          let decodeResult = JSON.parse(decodeString)
          if (decodeResult) {
            decodeResult.forEach((element) => {
              this.barOption.xAxis.data.push(element.key_as_string)
              this.barOption.series[0].data.push(element.doc_count)
            })
          }
        }
      }
      this.lineChart.setOption(this.barOption)
    },
    // 饼图
    decodeWarningChartRate(b64data) {
      this.pieChart.clear()
      this.pieOption.series[0].data = []
      if (b64data) {
        let decodeString = Base64.decode(b64data)
        if (decodeString != "") {
          let decodeResult = JSON.parse(decodeString)
          if (decodeResult) {
            decodeResult.forEach((element) => {
              this.pieOption.series[0].data.push({ value: element.doc_count, name: element.key })
            })
          }
        }
      }
      this.pieChart.setOption(this.pieOption)
    },
    // "warningRate": {"buckets":[{"doc_count":4,"key":3},{"doc_count":3,"key":2},{"doc_count":1,"key":1}],"total":3257}
    //key 1=误报数据,2=已整改,3=未整改,4=已排查 doc_count=数量 total=总量
    decodeWarningRate(b64data) {
      if (b64data) {
        this.warningTotal = 0
        this.warningSolved = 0
        this.warningChecked = 0
        let decodeString = Base64.decode(b64data)
        if (decodeString != "") {
          let decodeResult = JSON.parse(decodeString)
          if (decodeResult && decodeResult.total > 0) {
            this.warningTotal = decodeResult.total
            decodeResult.buckets.forEach((element) => {
              switch (element.key) {
                case 2:
                  this.warningSolved += element.doc_count
                  break
                case 4:
                  this.warningChecked += element.doc_count
                  break
                default:
                  break
              }
            })
          }
          // console.log("WarningRate:", decodeResult)
        }
      }
    },
    handleTreeChange(value) {
      this.selectedOrg = value[value.length - 1]
    },
    getInfo() {
      if (sessionStorage.getItem("userInfo")) {
        this.userName = JSON.parse(sessionStorage.getItem("userInfo")).username
@@ -841,23 +676,14 @@
    },
    initBar() {
      let bartDom = document.getElementById("bar")
      let myChart = echarts.init(bartDom)
      myChart.setOption(this.barOption)
      this.lineChart = echarts.init(bartDom)
      this.lineChart.setOption(this.barOption)
    },
    initMap() {
      let mapDom = document.getElementById("mapChart")
      let myChart = echarts.init(mapDom)
      myChart.setOption(this.mapOption)
    },
    initScatter() {
      let scatterDom = document.getElementById("scatterChart")
      let myChart = echarts.init(scatterDom)
      myChart.setOption(this.scatterOption)
    },
    initPie() {
      let pieDom = document.getElementById("pieChart")
      let myChart = echarts.init(pieDom)
      myChart.setOption(this.pieOption)
      this.pieChart = echarts.init(pieDom)
      this.pieChart.setOption(this.pieOption)
    },
    jump(route) {
      const userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
@@ -879,7 +705,16 @@
      }
    },
    refrash() {},
    handleSizeChange() {}
    handleSizeChange() {},
    format(array) {
      if (!array || array.length === 0) {
        return []
      }
      return [
        this.$moment(array[0]).format("YYYY-MM-DD HH:mm:ss"),
        this.$moment(array[1]).format("YYYY-MM-DD HH:mm:ss")
      ]
    }
  }
}
</script>
@@ -890,6 +725,15 @@
  min-width: 1346px;
  background-color: rgb(243, 245, 248);
  .p-statis {
    display: flex;
    padding-right: 10px;
    box-sizing: border-box;
    margin-top: 20px;
    b:hover {
      color: #2249b4;
    }
  }
  .title {
    margin-bottom: 20px;
    box-sizing: border-box;
@@ -1056,12 +900,12 @@
    margin: 24px 0;
    height: 466px;
    .left {
    .bar-chart {
      box-sizing: border-box;
      position: relative;
      padding: 20px;
      background-color: #fff;
      width: 845px;
      width: 100%;
      height: 466px;
      #bar {
@@ -1075,38 +919,6 @@
      width: 411px;
      height: 466px;
      background: #ffffff;
      .timeList {
        height: 392px;
        overflow-y: auto;
        .timeItem {
          margin-bottom: 24px;
          display: flex;
          align-items: center;
          height: 32px;
          border-radius: 16px;
          background: rgb(249, 251, 253);
          font-size: 14px;
          &:nth-child(1),
          &:nth-child(2),
          &:nth-child(3) {
            background: #eff4f9;
          }
          .index {
            margin: 0 35px 0 20px;
            font-size: 16px;
            color: #0064ff;
          }
          .time {
            margin-left: 50px;
            color: #999;
          }
        }
      }
    }
  }
@@ -1189,6 +1001,12 @@
      #scatterChart {
        height: 500px;
      }
      .table-area {
        margin-top: 10px;
        margin-bottom: 5px;
        width: 700px;
      }
    }
    .right {