修复算法配置的字段内容

zhangzengfei

2022-08-23 e37e45cfe1123928dba5d9c5a427b0ee497b7ad6

 src/views/manageCenter/index.vue

@@ -15,54 +15,125 @@
      <div class="products">
        <div class="title">全部产品</div>
        <div class="productList">
          <div
            class="productItem"
            v-for="(item, index) in productList"
            :key="index"
            @click="jump(item)"
          >
          <div class="productItem" v-for="(item, index) in permissionMenuList" :key="index" @click="jump(item)">
            <img :src="item.icon" alt="" />
            <div class="name">{{ item.name }}</div>
          </div>
        </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="" />
@@ -70,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>

    <!-- 页尾 -->
@@ -241,27 +224,60 @@
</template>

<script>
import IndexHeader from "@/components/IndexHeader";
import Footer from "@/components/Footer";
import * as echarts from "echarts";
import "echarts/map/js/china.js";
import IndexHeader from "@/components/IndexHeader"
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,
    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) + "%"
    },
    permissionMenuList() {
      let user = JSON.parse(sessionStorage.getItem("userInfo"))
      if (user.username == "Administrator") {
        return this.productList
      }

      return this.productList.filter(item => {
        return user.permissions.indexOf(item.permission) >= 0
      })

    }
  },
  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",
@@ -272,7 +288,7 @@
          icon: "/images/manageCenter/manage.png",
          openPath: "/equipmentManagement",
          path: "/equipmentList",
          permission: "deviceMng",
          permission: "deviceMng"
        },

        {
@@ -280,7 +296,7 @@
          icon: "/images/manageCenter/manage2.png",
          openPath: "/hashrate",
          path: "/hashrateDetail",
          permission: "analysisMng",
          permission: "analysisMng"
        },

        {
@@ -288,90 +304,106 @@
          icon: "/images/manageCenter/search.png",
          openPath: "/searchOpen",
          path: "/search",
          permission: "statisticMng",
          permission: "statisticMng"
        },
        {
          name: "统计分析",
          icon: "/images/manageCenter/search.png",
          openPath: "/dataView",
          path: "/dataView",
          permission: "dataViewMng"
        },

        /*  {
          name: "GB28181",
          icon: "/images/manageCenter/search.png",
          openPath: "/GB28181Open",
          path: "/GB28181Open",
          permission: "statisticMng",
        }, */
        {
          name: "推送管理",
          icon: "/images/manageCenter/manage2.png",
          openPath: "/report",
          path: "/report",
          permission: "dataPushMng"
        },

        {
          name: "实时监控",
          icon: "/images/manageCenter/manage2.png",
          openPath: "/video",
          path: "/video",
          permission: "videoMng"
        }
      ],
      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,
          icon: "circle",
          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,
            show: false
          },
          axisLabel: {
            color: "#666",
            color: "#666"
          },
          data: []
        },
        yAxis: {
          axisTick: {
            show: false,
            show: false
          },
          axisLine: {
            //y轴
            show: false,
            show: false
          },
          axisLabel: {
            color: "#666",
            color: "#666"
          },
          splitLine: {
            //网格线
            lineStyle: {
              color: "rgb(230, 230, 230)",
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              type: "dashed" //设置网格线类型 dotted：虚线   solid:实线
            },
            show: true, //隐藏或显示
          },
            show: true //隐藏或显示
          }
        },
        // Declare several bar series, each will be mapped
        // 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,
@@ -381,513 +413,358 @@
              colorStops: [
                {
                  offset: 0,
                  color: "#0066FF", // 0% 处的颜色
                  radius: ["50%", "80%"],
                  color: "#0066FF" // 0% 处的颜色
                  // radius: ["50%", "80%"]
                },
                {
                  offset: 1,
                  color: "rgba(0, 102, 255, 0.25)", // 100% 处的颜色
                },
                  color: "rgba(0, 102, 255, 0.25)" // 100% 处的颜色
                }
              ],
              global: false, // 缺省为 false
              global: false // 缺省为 false
            },
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                //柱形图圆角，初始化效果
                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",
          },
        ],
                barBorderRadius: [15, 15, 0, 0]
              }
            }
          }
        ]
      },
      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)",
          "rgb(165, 96, 255)"
        ],
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [35, 120],
            radius: [20, 160],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
              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,
      authorizedCameras: []
    }
  },
  created() {
    this.getInfo()
  },
  async mounted() {
    await this.getCameras()
    this.searchHandler()
    this.initBar()
    this.initPie()
  },
  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 userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
        // 管理员权限
        if (userInfo.username != "Administrator") {
          // 清理没有权限管理的摄像机, 后端修复后删除
          let checkedCameras = userInfo.email

          // basic 为子账户默认的空字段,表示可管理的摄像机目录为空
          if (checkedCameras == "basic") {
            this.cameraTree = ["basic"]
          } else {
            let cameraIds = checkedCameras.split(",")
            this.authorizedCameras = cameraIds
            this.TreeDataPool.removeNoAuthorizedNode(this.cameraTree, cameraIds)
          }
        }        

        let tmpTree = JSON.parse(JSON.stringify(this.cameraTree))

        for (let i = 0; i < tmpTree.length; i++) this.clearNode(tmpTree[i])
        this.menuTree = tmpTree

        console.log(this.cameraTree)
      }
    },
    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 this.authorizedCameras
      }

      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) {
            console.log("decodeResult", 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;
        this.userName = JSON.parse(sessionStorage.getItem("userInfo")).username
      }

      let date = new Date();
      let year = date.getFullYear(); //获取完整的年份(4位)
      let month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      let day = date.getDate(); //获取当前月份(0-11,0代表1月)
      let weekDay = "";
      let date = new Date()
      let year = date.getFullYear() //获取完整的年份(4位)
      let month = date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
      let day = date.getDate() //获取当前月份(0-11,0代表1月)
      let weekDay = ""
      switch (date.getDay()) {
        case 0:
          weekDay = "星期日";
          break;
          weekDay = "星期日"
          break

        case 1:
          weekDay = "星期一";
          break;
          weekDay = "星期一"
          break

        case 2:
          weekDay = "星期二";
          break;
          weekDay = "星期二"
          break

        case 3:
          weekDay = "星期三";
          break;
          weekDay = "星期三"
          break

        case 4:
          weekDay = "星期四";
          break;
          weekDay = "星期四"
          break

        case 5:
          weekDay = "星期五";
          break;
          weekDay = "星期五"
          break

        case 6:
          weekDay = "星期六";
          break;
          weekDay = "星期六"
          break
      }
      this.timeMsg =
        "今日, " + year + "年" + month + "月" + day + "日" + weekDay;
      this.timeMsg = "今日, " + year + "年" + month + "月" + day + "日" + weekDay
    },
    select(value, type) {
      this[type] = value;
      this[type] = value
    },
    initBar() {
      let bartDom = document.getElementById("bar");
      let myChart = echarts.init(bartDom);
      myChart.setOption(this.barOption);
      let bartDom = document.getElementById("bar")
      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);
      let pieDom = document.getElementById("pieChart")
      this.pieChart = echarts.init(pieDom)
      this.pieChart.setOption(this.pieOption)
    },
    jump(route) {
      const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      const userInfo = JSON.parse(sessionStorage.getItem("userInfo"))

      const val = userInfo.permissions.find((item) => {
        return item == route.permission;
      });
        return item == route.permission
      })
      if (val) {
        if (route.path === "/search") {
        if (route.path === "/search" || route.path === "/dataView") {
          const { href } = this.$router.resolve({
            path: "/search",
          });
          window.open(href, "_blank");
          return;
            path: route.path
          })
          window.open(href, "_blank")
          return
        }
        this.$router.push(route.path);
        this.$router.push(route.path)
      } else if (!userInfo.parentId) {
        this.$router.push(route.openPath);
        this.$router.push(route.openPath)
      }
    },
    refrash() {},
    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>

<style lang="scss" scoped>
@@ -896,6 +773,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;
@@ -1039,43 +925,19 @@
      }

      &:nth-child(1) {
        background: linear-gradient(
          108deg,
          #0065ff -8%,
          #0065ff -8%,
          #99cfff 100%,
          #99cfff 100%
        );
        background: linear-gradient(108deg, #0065ff -8%, #0065ff -8%, #99cfff 100%, #99cfff 100%);
      }

      &:nth-child(2) {
        background: linear-gradient(
          108deg,
          #ff6a00 0%,
          #ff6a00 0%,
          #ffb599 100%,
          #ffb599 100%
        );
        background: linear-gradient(108deg, #ff6a00 0%, #ff6a00 0%, #ffb599 100%, #ffb599 100%);
      }

      &:nth-child(3) {
        background: linear-gradient(
          108deg,
          #6d44e5 1%,
          #6d44e5 1%,
          #b299ff 100%,
          #b299ff 100%
        );
        background: linear-gradient(108deg, #6d44e5 1%, #6d44e5 1%, #b299ff 100%, #b299ff 100%);
      }

      &:nth-child(4) {
        background: linear-gradient(
          108deg,
          #40b63a 0%,
          #40b63a 0%,
          #89e5bc 100%,
          #89e5bc 100%
        );
        background: linear-gradient(108deg, #40b63a 0%, #40b63a 0%, #89e5bc 100%, #89e5bc 100%);
      }
    }
  }
@@ -1086,12 +948,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 {
@@ -1105,38 +967,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;
          }
        }
      }
    }
  }

@@ -1219,6 +1049,12 @@
      #scatterChart {
        height: 500px;
      }

      .table-area {
        margin-top: 10px;
        margin-bottom: 5px;
        width: 700px;
      }
    }

    .right {
@@ -1258,4 +1094,4 @@
    }
  }
}
</style>
</style>