multiple-police-situations/src/views/page/indexMim.vue

<template>
  <div class="box">
    <div class="left">
      <div class="left_top">
        <div class="title1">
          <span style="margin-left: 13px; font-weight: bold; font-size: 15px">接入总览</span>
        </div>
        <div style="display: flex; align-items: center; justify-content: center; padding: 10px 0px">
          <img style="width: 15%; height: 15%" src="./indeximag/图2.png" alt="" />
          <div style="text-align: center">
            <p style="font-size: 13px; margin-bottom: 10px">接入数量</p>
            <span class="fp">{{ getNthChar(data1.alarmPointTotal + '', 5) }}</span>
            <span class="fp">{{ getNthChar(data1.alarmPointTotal + '', 4) }}</span>
            <span class="fp">{{ getNthChar(data1.alarmPointTotal + '', 3) }}</span>
            <span class="fp">{{ getNthChar(data1.alarmPointTotal + '', 2) }}</span>
            <span class="fp">{{ getNthChar(data1.alarmPointTotal + '', 1) }}</span>
            <span class="fp">{{ getNthChar(data1.alarmPointTotal + '', 0) }}</span>
          </div>
        </div>
        <div id="EcharRef" style="width: 98%; height: 54%"></div>
      </div>
      <div class="left_cen">
        <div class="title1">
          <span style="margin-left: 13px; font-weight: bold; font-size: 15px">运营单位</span>
        </div>
        <div style="display: flex; justify-content: space-between; margin-top: 10px">
          <div style="margin-left: 30px">
            <span style="margin-right: 5px; font-size: 13px">接入数量</span>
            <span class="fp">{{ getNthChar(config.data.length + '', 2) }}</span>
            <span class="fp">{{ getNthChar(config.data.length + '', 1) }}</span>
            <span class="fp">{{ getNthChar(config.data.length + '', 0) }}</span>
          </div>
          <div style="margin-right: 30px; padding-top: 6px">
            <span style="display: inline-block; font-size: 13px">在线率</span>
            <div style="display: inline-block">
              <el-progress
                style="width: 65px; display: inline-block; vertical-align: middle; margin-left: 10px; margin-top: -5px"
                :percentage="(i / config.data.length).toFixed(2) * 100"
                :stroke-width="15"
                :text-inside="true"
              ></el-progress>
            </div>
          </div>
        </div>
        <div style="width: 100%; height: 70%; margin-top: 5px">
          <dv-scroll-board :config="config" @click="row1" style="" />
        </div>
      </div>
      <div class="left_bottm">
        <div class="title1">
          <span style="margin-left: 13px; font-weight: bold; font-size: 15px">重点单位</span>
        </div>
        <div id="EcharRef1" style="width: 98%; height: 44%"></div>
        <div style="width: 100%; height: 30%; margin-top: 10px">
          <dv-scroll-board :config="config1" style="" />
        </div>
      </div>
    </div>
    <div class="cen" id="myMap">
      <!-- <el-button icon="el-icon-search" circle></el-button> -->
    </div>
    <div class="right" style="position: relative">
      <span style="position: absolute; left: -180px; top: 12px; z-index: 9; font-size: 23px; font-weight: bold">{{ maptitle }}</span>
      <el-tooltip class="item" effect="dark" content="返回上一级" placement="top-start">
        <el-button @click="hy()" type="primary" icon="refresh-left" circle style="position: absolute; left: -48px; top: 4px; z-index: 9"></el-button>
      </el-tooltip>

      <div class="right_top">
        <div class="title1">
          <span style="margin-left: 13px; font-weight: bold; font-size: 15px">今日警情</span>
          <img src="" alt="" />
        </div>
        <div style="width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 15px">
          <div>
            <span style="margin-right: 5px; font-size: 13px">报警次数</span>
            <span class="fp">{{ getNthChar(drzs.countAlarm + '', 2) }}</span>
            <span class="fp">{{ getNthChar(drzs.countAlarm + '', 1) }}</span>
            <span class="fp">{{ getNthChar(drzs.countAlarm + '', 0) }}</span>
          </div>
          <div style="margin-left: 30px">
            <span style="margin-right: 5px; font-size: 13px">警情数量</span>
            <span class="fp">{{ getNthChar(drzs.countCase + '', 1) }}</span>
            <span class="fp">{{ getNthChar(drzs.countCase + '', 0) }}</span>
          </div>
        </div>
        <div id="EcharRef2" style="width: 98%; height: 73%; margin-top: 10px"></div>
      </div>
      <div class="right_cen">
        <div class="title1">
          <span style="margin-left: 13px; font-weight: bold; font-size: 15px">今日报警</span>
        </div>
        <div style="width: 100%; height: 80%; margin-top: 10px">
          <el-empty v-if="config2.data.length == 0" :image-size="100" description="暂无数据"></el-empty>
          <dv-scroll-board v-else :config="config2" @click="row2" style="" />
        </div>
      </div>
      <div class="right_bottm">
        <div class="title1">
          <span style="margin-left: 13px; font-weight: bold; font-size: 15px">今日预警</span>
        </div>
        <div style="width: 100%; height: 70%; margin-top: 10px">
          <el-empty v-if="config3.data.length == 0" :image-size="100" description="暂无数据"></el-empty>
          <dv-scroll-board v-else :config="config3" @click="row3" style="" />
        </div>
      </div>
    </div>

    <el-dialog title="运营单位" v-model="dialogVisible1" width="800">
      <div class="uploadBtn" style="text-align: right; margin-right: 10px">
        <el-button
          ><el-icon> <Printer /> </el-icon>导出</el-button
        >
      </div>
      <el-descriptions title="" border direction="" :column="2">
        <el-descriptions-item label="平台名称">{{ showrow1data.name }}</el-descriptions-item>
        <el-descriptions-item label="公司">{{ showrow1data.company }}</el-descriptions-item>
        <el-descriptions-item label="城市">{{ showrow1data.city }}</el-descriptions-item>
        <el-descriptions-item label="区县">{{ showrow1data.district }}</el-descriptions-item>
        <el-descriptions-item label="IP">{{ showrow1data.ip }}</el-descriptions-item>
        <el-descriptions-item label="平台公钥">{{ showrow1data.platKey }}</el-descriptions-item>
        <el-descriptions-item label="视频系统">{{ showrow1data.ipcSystem }}</el-descriptions-item>
        <el-descriptions-item label="在线状态">{{ showrow1data.lineState }}</el-descriptions-item>
        <el-descriptions-item label="启用状态">{{ showrow1data.useState }}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{ showrow1data.userName1 }}</el-descriptions-item>
        <el-descriptions-item label="电话">{{ showrow1data.userPhone2 }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <el-dialog title="今日报警" v-model="dialogVisible2" width="800">
      <div class="uploadBtn" style="text-align: right; margin-right: 10px">
        <el-button
          ><el-icon> <Printer /> </el-icon>导出</el-button
        >
      </div>
      <el-descriptions title="" border direction="" :column="2">
        <el-descriptions-item label="时间">{{ showrow2data.timestamp }}</el-descriptions-item>
        <el-descriptions-item label="类型">{{ showrow2data.alarmCode }}</el-descriptions-item>
        <el-descriptions-item label="报警单位">{{ showrow2data.alarmTarget }}</el-descriptions-item>
        <el-descriptions-item label="地点">{{ showrow2data.address }}</el-descriptions-item>
        <el-descriptions-item label="城市">{{ showrow2data.city }}</el-descriptions-item>
        <el-descriptions-item label="区县">{{ showrow2data.district }}</el-descriptions-item>
        <el-descriptions-item label="乡镇">{{ showrow2data.town }}</el-descriptions-item>
        <el-descriptions-item label="报警类型">{{ showrow2data.alarmType }}</el-descriptions-item>
        <el-descriptions-item label="设备类型">{{ showrow2data.deviceType }}</el-descriptions-item>
        <el-descriptions-item label="设备号">{{ showrow2data.alarmSource }}</el-descriptions-item>
        <el-descriptions-item label="描述信息">{{ showrow2data.description }}</el-descriptions-item>
        <el-descriptions-item label="核验状态">{{ totypecn(showrow2data.fakeState) }}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{ showrow2data.user1Name }}</el-descriptions-item>
        <el-descriptions-item label="联系人号码">{{ showrow2data.user1Phone }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <el-dialog title="今日预警" v-model="dialogVisible3" width="800">
      <div class="uploadBtn" style="text-align: right; margin-right: 10px">
        <el-button
          ><el-icon> <Printer /> </el-icon>导出</el-button
        >
      </div>
      <el-descriptions title="" border direction="" :column="2">
        <el-descriptions-item label="时间">{{ showrow3data.timestamp }}</el-descriptions-item>
        <el-descriptions-item label="类型">{{ showrow3data.alarmCode }}</el-descriptions-item>
        <el-descriptions-item label="报警单位">{{ showrow3data.alarmTarget }}</el-descriptions-item>
        <el-descriptions-item label="地点">{{ showrow3data.address }}</el-descriptions-item>
        <el-descriptions-item label="城市">{{ showrow3data.city }}</el-descriptions-item>
        <el-descriptions-item label="区县">{{ showrow3data.district }}</el-descriptions-item>
        <el-descriptions-item label="乡镇">{{ showrow3data.town }}</el-descriptions-item>
        <el-descriptions-item label="报警类型">{{ showrow3data.alarmType }}</el-descriptions-item>
        <el-descriptions-item label="设备类型">{{ showrow3data.deviceType }}</el-descriptions-item>
        <el-descriptions-item label="设备号">{{ showrow3data.alarmSource }}</el-descriptions-item>
        <el-descriptions-item label="描述信息">{{ showrow3data.description }}</el-descriptions-item>
        <el-descriptions-item label="核验状态">{{ totypecn(showrow3data.fakeState) }}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{ showrow3data.user1Name }}</el-descriptions-item>
        <el-descriptions-item label="联系人号码">{{ showrow3data.user1Phone }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import 'echarts-gl'
// @ts-ignore
import { getAreaCode } from './js/area'
import { JsonResult } from '@/axios'
import { Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance, nextTick } from 'vue'
import * as echarts from 'echarts'
import api from '@/axios'
const { proxy } = getCurrentInstance() as any
const day = proxy.day
onMounted(() => {
  // gettotal();
  seach({})
  initMapdt(localStorage.getItem('mapdata'), JSON.parse(localStorage.getItem('totaldata')), JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'])
  get1(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '')
  get3(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '')
  getaiyuji(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '')
  getdayline(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '')
  getAi(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '')
})
//详情
const row1data = ref()
const showrow1data = ref()
const dialogVisible1 = ref(false)
const row1 = (row: any) => {
  showrow1data.value = row1data.value[row.rowIndex]
  dialogVisible1.value = true
}
const totypecn = (data: any) => {
  if (data == '0') {
    return '未核验'
  } else if (data == '1') {
    return '核验为假'
  } else if (data == '2') {
    return '核验为真'
  }
}
//查询运营商
const config = reactive({
  header: ['名称', 'ip', '地区', '状态'],
  headerHeight: 28,
  columnWidth: [150, 150, 180, 80],
  waitTime: 3000,
  data: [],
  headerBGC: '#174F8A',
  oddRowBGC: '#2C5784',
  evenRowBGC: 'F3FDFF',
  index: false,
  align: ['left', 'left', 'left', 'center'],
})

const i = ref(0)
const seach = (obj: any) => {
  api.post('/multialarm/client/platform/getlist', obj).then((res: JsonResult<any>) => {
    if (res.code == 0) {
      row1data.value = res.data
      let arr: any[] = []
      res.data.forEach((x: any) => {
        if (x.lineState == 'online') {
          i.value++
          arr.push([x.name, x.ip, x.address, '<span style="background:#038E4C;padding:2px 3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'])
        } else {
          arr.push([x.name, x.ip, x.address, '<span style="background:red;padding:2px 3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'])
        }
      })
      config.data = arr
    }
  })
}
//还原
const hy = () => {
  var tree4data = flattenTree(JSON.parse(localStorage.getItem('tree4data')))
  // maptitle.value = tree4data.find(element => element.code == JSON.parse(data)['name'])['title'];
  if (localStorage.getItem('nowCode') == JSON.parse(localStorage.getItem('user-stores'))['userInfo']['geoCode']) {
    return
  } else {
    let fhcode = getAreaCode(localStorage.getItem('nowCode'))['codes'][0]
    let ado = echarts.init(document.getElementById('myMap'))
    ado.showLoading({
      text: '地图加载中',
      color: '#09A2DC', //设置加载颜色
      textColor: '#09A2DC',
      maskColor: 'rgba(255, 255, 255, 0.2)',
      zlevel: 0,
    })
    // const url = 'https://www.hndyjqrh.cn:8083/multialarm/pic/download?creator=geo&file=' + fhcode + '.geojson'
    const url = 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=' + fhcode + '.geojson'
    fetch(url)
      .then((response) => {
        var status = response['status']
        if (status == 500) {
          return new Promise((resovle) => {
            resovle('无数据')
          })
        } else {
          return response.text()
        }
      })
      .then((data) => {
        api
          .post('multialarm/system/alarm/total', {
            name: localStorage.getItem('loginname'),
            parent: fhcode,
          })
          .then((res) => {
            if (res.code == 0) {
              const myChart = echarts.init(document.getElementById('myMap'))
              myChart.dispose()
              initMapdt(data, res.data, tree4data.find((element) => element.code == fhcode)['title'])
              // ado.hideLoading()
            }
          })
      })
  }
}

//详情
const row3data = ref()
const showrow3data = ref()
const dialogVisible3 = ref(false)
const row3 = (row: any) => {
  showrow3data.value = row3data.value[row.rowIndex]
  dialogVisible3.value = true
}
//查询当日预警
const config3 = reactive({
  header: ['时间', '事件', '位置'],
  waitTime: 3000,
  rowNum: 6,
  columnWidth: [220, 150, 200],
  headerHeight: 38,
  data: [],
  headerBGC: '#174F8A',
  oddRowBGC: '#2C5784',
  evenRowBGC: 'F3FDFF',
  index: false,
  align: ['left', 'center', 'center', 'center'],
})
const getAi = (city: any, district: any, town: any) => {
  api
    .post('/multialarm/ai/alarm/getlist/today', {
      name: localStorage.getItem('loginname'),
      city: city == '湖南省' ? null : city,
      district: district,
      town: town,
    })
    .then((res: JsonResult<any>) => {
      if (res.code == 0) {
        row3data.value = res.data
        let arr: any[] = []
        res.data.forEach((x: any) => {
          arr.push([x.timestamp, x.alarmName, x.address])
        })
        // res.data.forEach((x)={
        // })
        config3.data = arr
      } else {
      }
    })
}
//2.3.5查询近7天报警数量
const drzs = ref<Data1Type>({})
const getdayline = (city: any, district: any, town: any) => {
  api
    .post('multialarm/system/alarm/count/dayline', {
      name: localStorage.getItem('loginname'),
      city: city == '湖南省' ? null : city,
      district: district,
      town: town,
      start: day().format('YYYY-MM-DD HH:mm:ss'),
      before: 1,
    })
    .then((res: JsonResult<any>) => {
      if (res.code == 0) {
        drzs.value = res.data[6]
        initMap2(res.data)
      } else {
      }
    })
}
//详情
const dialogVisible2 = ref(false)
const row2data = ref()
const showrow2data = ref()
const row2 = (row: any) => {
  showrow2data.value = row2data.value[row.rowIndex]
  dialogVisible2.value = true
}
//查询指定区域的当天所有警报事件列表
const config2 = reactive({
  header: ['时间', '类型', '报警单位', '地点'],
  waitTime: 3000,
  rowNum: 6,
  columnWidth: [180, 100, 130, 180],
  headerHeight: 38,
  data: [],
  headerBGC: '#174F8A',
  oddRowBGC: '#2C5784',
  evenRowBGC: 'F3FDFF',
  index: false,
  align: ['left', 'left', 'left', 'left'],
})
const getaiyuji = (city: any, district: any, town: any) => {
  api
    .post('multialarm/client/sensor/alarm_event/getlist/today', {
      name: localStorage.getItem('loginname'),
      city: city == '湖南省' ? '' : city,
      district: district,
      town: town,
    })
    .then((res: JsonResult<any>) => {
      if (res.code == 0) {
        row2data.value = res.data
        let arr: any[] = []
        res.data.forEach((x: any) => {
          arr.push([x.timestamp, x.alarmCode, x.station, x.address])
        })
        config2.data = arr
      } else {
      }
    })
}
//01
const getNthChar = (str: any, n: any) => {
  let str1 = str.split('').reverse().join('')
  return str1.charAt(n) || '0'
}
interface Data1Type {
  [key: string]: any
}

const data1 = ref<Data1Type>({})
const get1 = (city: any, district: any, town: any) => {
  api
    .post('multialarm/system/count/devices', {
      name: localStorage.getItem('loginname'),
      city: city,
      district: district,
      town: town,
    })
    .then((res) => {
      if (res.code == 0) {
        data1.value = res.data
        initMap(res.data)
      } else {
      }
    })
}
const config1 = ref({})
const get3 = (city: any, district: any, town: any) => {
  api
    .post('/multialarm/system/station/summary', {
      name: localStorage.getItem('loginname'),
      city: city,
      district: district,
      town: town,
    })
    .then((res: JsonResult<any>) => {
      if (res.code == 0) {
        initMap1(res.data)
        config1.value = {
          header: ['行业名称', '总数', '在线总数', '在线率'],
          waitTime: 3000,
          rowNum: 2,
          columnWidth: [150, 120, 180, 120],
          headerHeight: 28,
          data: [
            ['党政机关', res.data[0]['total'], res.data[0]['lineOnTotal'], res.data[0]['lineOnTotal'] == 0 ? '0%' : (res.data[0]['lineOnTotal'] / res.data[0]['total']) * 100 + '%'],
            ['金融机构', res.data[2]['total'], res.data[2]['lineOnTotal'], res.data[2]['lineOnTotal'] == 0 ? '0%' : (res.data[2]['lineOnTotal'] / res.data[2]['total']) * 100 + '%'],
            ['医疗单位', res.data[3]['total'], res.data[3]['lineOnTotal'], res.data[3]['lineOnTotal'] == 0 ? '0%' : (res.data[3]['lineOnTotal'] / res.data[3]['total']) * 100 + '%'],
            ['中小学', res.data[1]['total'], res.data[1]['lineOnTotal'], res.data[1]['lineOnTotal'] == 0 ? '0%' : (res.data[1]['lineOnTotal'] / res.data[1]['total']) * 100 + '%'],
            ['其他', res.data[4]['total'], res.data[4]['lineOnTotal'], res.data[4]['lineOnTotal'] == 0 ? '0%' : (res.data[4]['lineOnTotal'] / res.data[4]['total']) * 100 + '%'],
          ],
          headerBGC: '#174F8A',
          oddRowBGC: '#2C5784',
          evenRowBGC: 'F3FDFF',
          index: false,
          align: ['left', 'left', 'left', 'left'],
        }
        // initMap(res.data);
      } else {
      }
    })
}
// const convertData = (data) => {
//   var res = []
//   for (var i = 0; i < data.length; i++) {
//     var dataItem = data[i]
//     var fromCoord = chinaGeoCoordMap[dataItem[0].name]
//     var toCoord = [116.4551, 40.2539]
//     if (fromCoord && toCoord) {
//       res.push([
//         {
//           coord: fromCoord,
//           value: dataItem[0].value,
//         },
//         {
//           coord: toCoord,
//         },
//       ])
//     }
//   }
//   return res
// }
var mapJson = ''
const flattenTree = (treeData: any) => {
  const result: any[] = []
  function traverse(node: any) {
    if (node.children && node.children.length > 0) {
      for (const child of node.children) {
        traverse(child)
      }
    }
    delete node.children
    result.push(node)
  }

  traverse(treeData)
  return result
}
const maptitle = ref('')
const initMapdt = (data: any, podat: any, nameb: any) => {
  var tree4data = flattenTree(JSON.parse(localStorage.getItem('tree4data')))
  // maptitle.value = tree4data.find(element => element.code == JSON.parse(data)['name'])['title'];
  maptitle.value = nameb
  localStorage.setItem('nowCode', JSON.parse(data)['name'])
  const myChart = echarts.init(document.getElementById('myMap'))
  // myChart.showLoading();
  // myChart.hideLoading();
  let langarr = JSON.parse(data)['features']
  langarr.forEach((x: any, i: number) => {})

  echarts.registerMap('myMap', data)
  var option = {
    tooltip: {
      trigger: 'item',
      textStyle: { fontSize: '14', color: '#fff', fontFamily: 'Arial' },
      backgroundColor: '#092b6a',
      formatter: (params: any) => {
        let datat = podat
        let itemWithId2 = datat.children.find((item: any) => item.grope === params.name)
        if (itemWithId2 == null || itemWithId2 == undefined) {
          return '<br /> 报警:' + '0' + '<br /> 警情:' + '0' + ' <br /> AI预警:' + '0'
        } else {
          return '<br /> 报警:' + itemWithId2.alarmCount + '<br /> 警情:' + itemWithId2.caseCount + ' <br /> AI预警:' + itemWithId2.aiCount
        }
      },
    },
    series: [
      {
        type: 'map3D',
        name: '地图',
        selectedMode: 'single', // 地图高亮单选
        regionHeight: 1, // 地图高度
        map: 'myMap',
        viewControl: {
          distance: 168, // 地图视角 控制初始大小
          alpha: 180, // 倾斜角度
          rotateSensitivity: 0,
        },
        label: {
          show: true, // 是否显示名字
          color: '#fff', // 文字颜色
          fontSize: 15, // 文字大小
          fontWeight: 'bold', // 文字大小
        },
        itemStyle: {
          color: '#0A3E77', // 地图背景颜色
          borderWidth: 1, // 分界线wdith
          borderColor: '#a4d8f0', // 分界线颜色
          opacity: 0.9,
        },
        emphasis: {
          label: {
            show: true, // 是否显示高亮
            textStyle: {
              color: '#fff', // 高亮文字颜色
            },
          },
          itemStyle: {
            color: '#3a69c1', // 地图高亮颜色
            borderWidth: 10, // 分界线wdith
            borderColor: '#6BECF5', // 分界线颜色
          },
        },

        light: {
          main: {
            color: '#fff',
            intensity: 1,
            shadow: true,
            shadowQuality: 'high',
            alpha: 25, //
            beta: 20,
          },
          ambient: {
            color: '#fff',
            intensity: 0.6,
          },
        },
        lines3D: {
          show: true,
          data: [
            {
              coords: [
                [111.51, 29.02], // 起点坐标
                [109.22793, 29.12239], // 终点坐标
              ],
              lineStyle: {
                width: 2,
                color: '#fff',
              },
            },
            // 可以添加更多的线条
          ],
        },
      },
    ],
  }

  myChart.setOption(option)

  window.addEventListener('resize', function () {
    myChart.resize()
  })
  myChart.on('click', (x) => {
    // let tree4data = flattenTree(JSON.parse(localStorage.getItem('tree4data')));
    tree4data.forEach((item) => {
      if (item.stationId === undefined) {
        if (item.code.length < 9) {
          if (x.name == item.title) {
            myChart.dispose()
            let ado = echarts.init(document.getElementById('myMap'))
            ado.showLoading({
              text: '地图加载中',
              color: '#09A2DC', //设置加载颜色
              textColor: '#09A2DC',
              maskColor: 'rgba(255, 255, 255, 0.2)',
              zlevel: 0,
            })
            get1(x.name, '', '')
            get3(x.name, '', '')
            getaiyuji(x.name, '', '')
            getdayline(x.name, '', '')
            getAi(x.name, '', '')
            //item.code
            // const url = 'https://www.hndyjqrh.cn:8083/multialarm/pic/download?creator=geo&file=' + item.code + '.geojson'
            const url = 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=' + item.code + '.geojson'
            fetch(url)
              .then((response) => {
                var status = response['status']
                if (status == 500) {
                  return new Promise((resovle) => {
                    resovle('无数据')
                  })
                } else {
                  return response.text()
                }
              })
              .then((data) => {
                api
                  .post('multialarm/system/alarm/total', {
                    name: localStorage.getItem('loginname'),
                    parent: item.code,
                  })
                  .then((res) => {
                    if (res.code == 0) {
                      initMapdt(data, res.data, x.name)
                      ado.hideLoading()
                    }
                  })
              })
          }
        }
      }
    })
  })
}

const initMap = (data1: any) => {
  const domMap = document.getElementById('EcharRef')
  domMap.removeAttribute('_echarts_instance_')
  const myChart = echarts.init(domMap)
  var option = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '15px',
      left: '230px',
      orient: 'vertical',
      type: 'scroll',
      itemHeight: 5,
      textStyle: {
        color: '#fff',
      },
    },
    series: [
      {
        type: 'pie',
        radius: ['45%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'right',
        },

        emphasis: {
          label: {
            show: true,
            fontSize: 12,
            fontWeight: 'bold',
            color: '#fff',
          },
        },
        labelLine: {
          show: true,
        },
        center: ['35%', '50%'],
        data: [
          { value: data1.alarmPointZone, name: '防区报警' },
          { value: data1.alarmPointTalk, name: '对讲报警' },
          { value: data1.mdevTotal, name: '移动报警' },
          { value: data1.alarmPointPushButton, name: '一键报警' },
          { value: data1.ipcTotal, name: '报警复合' },
        ],
      },
    ],
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}
const initMap1 = (data1: any) => {
  const domMap = document.getElementById('EcharRef1')
  domMap.removeAttribute('_echarts_instance_')
  const myChart = echarts.init(domMap)
  var option = {
    tooltip: {
      trigger: 'item',
    },
    xAxis: {
      type: 'category',
      splitLine: {
        show: false, //去掉网格线
      },
      axisLine: {
        //这是y轴文字颜色
        lineStyle: {
          color: '#fff',
        },
      },
      data: ['党政机关', '金融机构', '医疗单位', '中小学', '其他'],
      axisLabel: {
        formatter: (val: any) => {
          let txt = val
          if (val.length > 4) {
            txt = val.substr(0, 4) + '...'
          }
          return txt
        },
      },
    },
    grid: {
      top: '8%',
      left: '1%',
      right: '1%',
      bottom: '3%',
      containLabel: true,
    },
    yAxis: {
      type: 'value',
      axisLine: {
        //这是y轴文字颜色
        lineStyle: {
          color: '#fff',
        },
      },
      splitLine: {
        // 设置x轴轴线相关配置
        show: false, // 不显示x轴轴线
      },
    },
    series: [
      {
        barWidth: '24%',
        data: [data1[0]['total'], data1[2]['total'], data1[3]['total'], data1[1]['total'], data1[4]['total']],
        type: 'bar',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#0386F6', // 起始颜色（红）
              },
              {
                offset: 1,
                color: '#0FBBC4', // 结束颜色（蓝）
              },
            ]),
          },
        },
      },
    ],
  }
  myChart.setOption(option)
}
const initMap2 = (arr: any) => {
  let time: any[] = []
  let data1: any[] = []
  let data2: any[] = []
  arr.forEach((x: any) => {
    time.push(x.month + '-' + x.day)
    data1.push(parseInt(x.countAlarm))
    data2.push(parseInt(x.countCase))
  })
  const domMap = document.getElementById('EcharRef2')
  domMap.removeAttribute('_echarts_instance_')
  const myChart = echarts.init(domMap)
  var option = {
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => {
        return '警情数量:' + params.seriesIndex + '<br /> 报警次数:' + params.data
      },
    },
    grid: {
      top: '15%',
      left: '1%',
      right: '1%',
      bottom: '3%',
      containLabel: true,
    },
    legend: {
      data: [
        {
          name: '报警次数',
          textStyle: {
            color: '#fff',
          },
        },
        {
          name: '警情数量',
          textStyle: {
            color: '#fff',
          },
        },
      ],
    },
    xAxis: [
      {
        type: 'category',
        splitLine: {
          show: false, //去掉网格线
        },
        data: time,
        axisLine: {
          //这是y轴文字颜色
          lineStyle: {
            color: '#fff',
          },
        },
        axisPointer: {
          type: 'shadow',
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        min: 0,
        // max: 250,
        interval: 50,
        splitLine: {
          // 设置x轴轴线相关配置
          show: false, // 不显示x轴轴线
        },
        axisLine: {
          //这是y轴文字颜色
          lineStyle: {
            color: '#fff',
          },
        },
        axisLabel: {
          formatter: '{value}次',
        },
      },
      {
        type: 'value',
        min: 0,
        splitLine: {
          // 设置x轴轴线相关配置
          show: false, // 不显示x轴轴线
        },
        max: 25,
        interval: 5,
        axisLabel: {
          formatter: '',
        },
      },
    ],
    series: [
      {
        name: '报警次数',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value: any) {
            // return value + ' ml';
          },
        },
        barWidth: '24%',
        itemStyle: {
          color: '#3F7AD1', // 设置折线的颜色为红色
        },
        data: data1,
      },
      {
        name: '警情数量',
        type: 'line',
        smooth: true,
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value: any) {
            // return value + '°C';
          },
        },
        itemStyle: {
          color: '#81A2CF', // 设置折线的颜色为红色
        },
        data: data2,
      },
    ],
  }
  myChart.setOption(option)
}
</script>

<style scoped lang="scss">
:deep(.dv-scroll-board .header) {
 font-size: 13px;
}

:deep(.dv-scroll-board .rows .row-item) {
 font-size: 12px;
}

:deep(.el-descriptions) {
 width: 98%;
 margin: 10px auto;
 text-align: center;
 border: 1px solid #1F9BD9;

 --el-descriptions-table-border: {
  1px solid #1F9BD9
 }

 ;

 --el-descriptions-item-bordered-label-background: {
  transparent
 }

 ;
}

:deep(.el-descriptions__body) {
 background: transparent;
}

:deep(.el-descriptions__label) {
 width: 130px;
 color: rgb(12, 214, 254);
 background: transparent;
}

:deep(.el-descriptions__content.el-descriptions__cell.is-bordered-content) {
 color: #fff;
}

:deep(.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell) {
 border: 1px solid #1F9BD9;
}

:deep(.el-dialog__body) {
 padding: 10px;
 color: #fff;
}

.uploadBtn .el-button {
 background-color: transparent;
 border-color: #1F9BD9;
 color: #1F9BD9;
}

.uploadBtn .el-button i {
 font-size: 16px;
 margin-right: 3px;
}

.uploadBtn .el-button:hover {
 color: rgb(12, 214, 254);
 border: 1px solid rgb(12, 214, 254);
}

:deep(.el-dialog) {
 --el-dialog-bg-color: #071D4D;
 border: 3px solid #387dbf;
}

:deep(.el-dialog__header) {
 padding: 13px;
 border-bottom: 1px solid #3374b4 !important;
 margin-right: 0px;
}

:deep(.el-dialog__title) {
 color: #067bc1 !important;
 font-weight: 500;
}

:deep(.el-input__inner) {
 color: #000;
}

:deep(.el-dialog__headerbtn .el-dialog__close) {
 color: #fff;
 font-weight: 500;
 font-size: 18px;
}

.tabs_a {
 background-image: url(./indeximag/able.jpg);
 background-size: 100% 100%;
}

:deep(.el-tabs__nav-wrap) {
 margin-bottom: 1px;
}

:deep(.el-tabs--border-card>.el-tabs__content) {
 height: calc(100% - 40px);
 background: red;
 padding: 0px;
}

:deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active) {
 color: #d1dbe5;
 background-color: #29d;
 border-right-color: #29d;
 border-left-color: #29d;
}

:deep(.el-tabs--border-card>.el-tabs__header) {
 background-color: transparent;
 border-bottom: none;
}

:deep(.el-tabs--border-card) {
 background: #022C54;
 border: none;
}

:deep(.el-progress-bar__outer) {
 background-color: #174771;
}

:deep(.el-progress-bar__inner) {
 background-color: #3BC5F3;
}

.title1 {
 width: 100%;
 height: 30px;
 background-image: url(./indeximag/一级标题.png);
 background-size: 100% 100%;
 line-height: 30px;
}

.fp {
 background-image: url(./indeximag/数字背景.png);
 width: 15px;
 height: 22px;
 display: inline-block;
 background-size: 100% 100%;
 line-height: 22px;
 text-align: center;
 margin-right: 10px;
 font-size: 13px;
 font-weight: 500;
}

.box {
 width: 100%;
 height: 100%;
 display: flex;
 background-color: #022C54;

 .left {
  width: 450px;
  height: 98%;
  margin-top: 0.5%;
  margin-left: 0.5%;
  border: 1px solid #3876B9;

  .left_top {
	  width: 97%;
	  height: 33%;
	  padding: 5px;
  }

  .left_cen {
	  width: 97%;
	  height: 33%;
	  padding: 5px;
  }

  .left_bottm {
	  width: 97%;
	  height: 33%;
	  padding: 5px;
  }
 }

 .right {
  width: 450px;
  height: 98%;
  margin-top: 0.5%;
  border: 1px solid #3876B9;
  margin-right: 5px;

  .right_top {
	  width: 97%;
	  height: 33%;
	  padding: 5px;
  }

  .right_cen {
	  width: 97%;
	  height: 33%;
	  padding: 5px;
  }

  .right_bottm {
	  width: 97%;
	  height: 35%;
	  padding: 5px;
  }
 }

 .cen {
  width: calc(100% - 900px);
  height: 98%;
  margin-top: 0.5%;
  margin-left: 0.5%;
  margin-right: 0.5%;
  border: 1px solid #3876B9;
  background-image: url(./indeximag/able.jpg);
  background-size: 100% 100%;
 }
}
</style>