src/views/map/components/zhongdian.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="renyuan">
     <div class="block1">
-      <layout-title title="边界入侵统计"/>
+      <layout-title title="重点工程统计"/>
       <div class="options">
         <div v-for="(item,index) in block1OptionsList" :key="index" class="option">
           <div class="imger">
@@ -10,29 +10,39 @@
           <div class="info">
             <div class="label">{{ item.title }}</div>
             <div class="text">{{ item.count }}</div>
+            <!--            <div class="text"><count-to :start-val="0" :end-val="item.count" :duration="3600"/></div>-->
           </div>
         </div>
       </div>
     </div>
     <div class="block2">
-      <layout-title title="区域摄像头数量"/>
+      <layout-title title="区域报警数"/>
       <div class="options">
-        <div id="main1"/>
+        <div v-for="(item,index) in block2OptionsList" :key="index" class="option">
+          <div class="circular"><img :src="item.img" alt=""></div>
+          <div class="info">
+            <div class="title">{{ item.label }}</div>
+            <div class="count"> <count-to :start-val="0" :end-val="+item.count" :duration="3600"/></div>
           </div>
         </div>
-    <div class="block4">
+      </div>
-      <layout-title title="报警列表"/>
+    </div>
+
+    <div class="block3">
+      <layout-title title="安全管理记录"/>
       <div class="content">
         <div class="table">
           <div class="tr">
-            <div class="td">区域名称</div>
+            <div class="td">公司名称</div>
-            <div class="td">报警设备编号</div>
+            <div class="td">创建数</div>
-            <div class="td">状态告警</div>
+            <div class="td">检查次数</div>
+            <div class="td">隐患数量</div>
           </div>
-          <div v-for="(item,index) in block4List" :key="index" class="tr">
+          <div v-for="(item,index) in block3List" :key="index" class="tr">
-            <div class="td">{{ item.alarmName }}</div>
+            <div class="td">{{ item.CORP_NAME }}</div>
-            <div class="td">{{ item.equipmentName }}</div>
+            <div class="td">{{ item.OUTSOURCED_COUNT }}</div>
-            <div class="td">{{ item.statusName }}</div>
+            <div class="td">{{ item.CHECK_COUNT }}</div>
+            <div class="td">{{ item.HIDDEN_COUNT }}</div>
           </div>
         </div>
       </div>
@@ -44,9 +54,7 @@
 import layoutTitle from './title.vue'
 import CountTo from 'vue-count-to'
 import { requestFN } from '@/utils/request'
-import * as echarts from 'echarts'
 
-let Echarts1
 export default {
   components: {
     CountTo,
@@ -70,15 +78,26 @@ export default {
     return {
       block1OptionsList: [
         {
-          title: '报警数量',
+          title: '开工数量',
           img: require('../../../assets/map/zhongdian/ico1.png'),
           count: '-'
         },
         {
-          title: '监控数量',
+          title: '视频数量',
           img: require('../../../assets/map/zhongdian/ico2.png'),
           count: '-'
+        },
+        {
+          title: '检查次数',
+          img: require('../../../assets/map/zhongdian/ico3.png'),
+          count: '-'
+        },
+        {
+          title: '发现隐患数量',
+          img: require('../../../assets/map/zhongdian/ico4.png'),
+          count: '-'
         }
+
       ],
       block2OptionsList: [
         {
@@ -101,19 +120,12 @@ export default {
           CHECK_COUNT: '-',
           HIDDEN_COUNT: '-'
         }
-      ],
+      ]
-      block4List: []
     }
   },
   mounted() {
-    this.initNum()
+    this.getCount()
     this.initgetTable()
-    window.onresize = function() {
-      Echarts1 && Echarts1.resize()
-    }
-  },
-  beforeDestroy() {
-    Echarts1 = null
   },
   methods: {
     getCount() {
@@ -135,22 +147,6 @@ export default {
         this.block2OptionsList[1].count = data.pd.AMOUT_SUM
       })
     },
-    initNum() {
-      requestFN('/map/getAllDwMessage', { corpId: this.corpInfoId, source: '0' }
-      ).then((data0) => {
-        this.block1OptionsList[0].count = data0.alarmList.page.total
-        requestFN('/map/mapPlatformelectronic/listAllLocation', { corpId: this.corpInfoId, TYPE: 'bianjieruqin' }
-        ).then((data1) => {
-          this.block4List = data0.alarmList.list
-          this.block1OptionsList[1].count = data1.varList.length
-          this.initEcharts1(data1.iconData)
-        }).catch((e) => {
-          this.$message.error(e)
-        })
-      }).catch((e) => {
-        this.$message.error(e)
-      })
-    },
     initgetTable() {
       requestFN(
         '/map/keyProject/list?showCount=10&currentPage=1',
@@ -162,112 +158,6 @@ export default {
       ).then((data) => {
         this.block3List = data.varList
       })
-    },
-    initEcharts1(data) {
-      console.log(data)
-      const XaxisData = []
-      const seriesData1 = []
-      for (const optionKey in data) {
-        console.log(data[optionKey])
-        for (let i = 0; i < data[optionKey].length; i++) {
-          console.log(data[optionKey][i])
-          XaxisData.push(data[optionKey][i].NAME)
-          seriesData1.push(data[optionKey][i].num)
-        }
-      }
-
-      // eslint-disable-next-line no-undef
-      Echarts1 = echarts.init(document.querySelector('#main1'))
-      const option = {
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          }
-        },
-        grid: {
-          left: '2%',
-          right: '4%',
-          bottom: '5%',
-          top: '12%',
-          containLabel: true
-        },
-        legend: {
-          top: '0%',
-          right: '0%',
-          textStyle: {
-            color: '#fff',
-            fontSize: 14
-          },
-          itemWidth: 12,
-          itemHeight: 10
-        },
-        xAxis: {
-          type: 'category',
-          data: XaxisData,
-          axisLine: {
-            lineStyle: {
-              color: '#fff'
-            }
-          },
-          axisLabel: {
-            textStyle: {
-              fontSize: 12
-            }
-          }
-        },
-        yAxis: {
-          type: 'value',
-          max: '50',
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: '#fff'
-            }
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: '#8c9493'
-            }
-          },
-          axisLabel: {
-            textStyle: {
-              fontSize: 14
-            }
-          }
-        },
-        series: [
-          {
-            name: '摄像头',
-            type: 'bar',
-            barWidth: '10%',
-            itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: '#00f0ff'
-                    },
-                    {
-                      offset: 1,
-                      color: '#0066ff'
-                    }
-                  ],
-                  false
-                )
-              }
-            },
-            data: seriesData1
-          }
-        ]
-      }
-      Echarts1.setOption(option)
     }
   }
 }
@@ -353,7 +243,6 @@ export default {
       }
     }
   }
-
   .block2 {
     width: 410px;
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
@@ -364,12 +253,67 @@ export default {
       border: 1px solid;
       border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
       border-top: none;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      height: 150px;
 
-      #main1 {
+      .option{
-        width: 100%;
+        width: 50%;
-        height: 250px;
+        display: flex;
+        align-items: center;
+
+        justify-content: space-around;
+        .circular {
+          margin-top: 5px;
+          background-image: url("../../../assets/map/anquan/icobg.png");
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          width: 70px;
+          height: 70px;
+          text-align: center;
+          padding-top: 13px;
+
+          img {
+            width: 25px;
+            height: 26px;
+            animation: slideY 2s infinite;
           }
         }
+
+        .info{
+          flex: 1;
+          text-align: center;
+
+          .title{
+            background-image: url("../../../assets/map/anquan/label.png");
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            width: 120px;
+            height: 24px;
+            margin-top: 5px;
+            font-size: 12px;
+            line-height: 25px;
+            text-align: center;
+            color: #fff;
+          }
+          .count{
+            margin-top: 10px;
+            font-size: 24px;
+            background: linear-gradient(to top, #48bbf0, #ffffff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            font-weight: bold;
+            font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
+
+          }
+        }
+
+      }
+
+    }
   }
 
   .block3 {
@@ -413,48 +357,6 @@ export default {
       }
     }
   }
-
-  .block4 {
-    margin-top: 10px;
-    width: 410px;
-    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
-
-    .content {
-      border: 1px solid;
-      border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
-      border-top: none;
-      padding: 10px;
-
-      .options {
-        display: flex;
-        justify-content: flex-end;
-
-        .title {
-          cursor: pointer;
-        }
-      }
-
-      .table {
-        margin-top: 5px;
-
-        .tr {
-          display: flex;
-
-          &:nth-child(odd) {
-            background-color: rgba(42, 86, 158, 0.53);
-          }
-
-          .td {
-            flex: 1;
-            text-align: center;
-            font-size: 12px;
-            color: #fff;
-            padding: 5px;
-          }
-        }
-      }
-    }
-  }
 }
 
 @keyframes scale {
@@ -468,7 +370,6 @@ export default {
     transform: scale(0.9);
   }
 }
-
 @keyframes slideY {
   0% {
     transform: translateY(0);

src/views/oneCompany/territory/components/list.vue

@@ -1,240 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-form ref="searchForm" :model="searchForm" label-width="80px">
-      <el-row>
-        <el-col :span="4">
-          <el-form-item label="报警状态" prop="status">
-            <el-select v-model="searchForm.status" style="width: 100%;">
-              <el-option v-for="item in alarmStatusList" :key="item.value" :value="item.value" :label="item.name"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4" label-width="10px" style="margin-left: 20px">
-          <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getList">
-            搜索
-          </el-button>
-          <el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="resetSearchForm">
-            重置
-          </el-button>
-        </el-col>
-      </el-row>
-    </el-form>
-    <el-table v-loading="listLoading" ref="multipleTable" :data="varList" :row-key="getRowKey" :header-cell-style="{'font-weight': 'bold','color': '#000'}" height="600px" tooltip-effect="dark" border fit highlight-current-row>
-      <el-table-column :reserve-selection="true" type="selection" width="55" align="center" />
-      <el-table-column fixed="left" type="index" label="序号" width="50" align="center" />
-      <el-table-column prop="alarmName" label="报警名称" width="100"/>
-      <el-table-column v-if="false" prop="alarmMessage" label="报警信息" />
-      <el-table-column v-if="false" prop="relatedFunctions" label="相关功能" />
-      <el-table-column v-if="false" prop="typeName" label="类型名称" />
-      <el-table-column prop="message" label="报警信息" width="200"/>
-      <el-table-column v-if="false" prop="idRemak" label="其他系统备注" />
-      <el-table-column v-if="false" prop="remark" label="备注" />
-      <el-table-column prop="corpName" label="企业名称" width="150"/>
-      <el-table-column v-if="false" prop="departmentName" label="部门名称" />
-      <el-table-column prop="equipmentName" label="报警来源" width="100"/>
-      <el-table-column prop="createdTime" label="创建时间" width="150"/>
-      <el-table-column prop="level" label="报警等级" />
-      <el-table-column prop="address" label="报警地址" />
-      <el-table-column prop="statusName" label="状态名称" />
-      <el-table-column prop="opinion" label="处理意见" width="200"/>
-      <el-table-column fixed="right" label="操作" align="center" width="200">
-        <template slot-scope="{row}">
-          <el-button v-if="row.status == null || row.status == '0'" icon="el-icon-view" type="danger" size="mini" @click="goInfo(row.dwAlarmId,'ignore')">忽略</el-button>
-          <el-button v-if="row.status == null || row.status == '0'" icon="el-icon-view" type="primary" size="mini" @click="goInfo(row.dwAlarmId,'confirm')">确认</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div class="page-btn-group">
-      <div>
-        <!--  <el-button v-show="add" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>-->
-        <!--        <el-button v-show="del" type="danger" icon="el-icon-delete" plain @click="batchDel">删除</el-button>-->
-      </div>
-      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
-    </div>
-    <el-dialog :visible.sync="dialogManageAlarm" :title="dialogType === 'ignore' ? '忽略报警' : '确认报警'" width="650px">
-      <el-form ref="form" :model="manageAlarmForm" :rules="manageAlarmRules" label-width="110px" style="width: 500px;">
-        <el-form-item label="处理意见" prop="opinion">
-          <el-input v-model="manageAlarmForm.opinion" :rows="4" type="textarea" placeholder="这里输入处理意见..." />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="closeManageAlarm()">取 消</el-button>
-        <el-button type="primary" @click="manageAlarm()">确 定</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-<script>
-import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
-import { requestFN } from '@/utils/request'
-import waves from '@/directive/waves' // waves directive
-import SelectTree from '@/components/SelectTree'
-
-export default {
-  components: { Pagination, SelectTree },
-  directives: { waves },
-  data() {
-    return {
-      listLoading: true,
-      add: false,
-      del: false,
-      edit: false,
-      listQuery: {
-        page: 1,
-        limit: 20
-      },
-      total: 0,
-      KEYWORDS: '',
-      varList: [],
-      pd: [],
-
-      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
-      multipleSelection: [], // 当前页选中的数据
-      treeData: [], // 动火前管辖单位
-      dialogType: 'ignore',
-      replyListQuery: {
-        page: 1,
-        limit: 20
-      },
-      defaultProps: {
-        value: 'id',
-        children: 'nodes',
-        label: 'name'
-      },
-      loginUserID: '',
-      loginRoleNumber: JSON.parse(sessionStorage.getItem('user')).RNUMBER,
-      dialogManageAlarm: false,
-      manageAlarmForm: {
-        opinion: '', // 处理意见
-        DW_ALARM_ID: '',
-        status: ''
-      },
-      manageAlarmRules: {
-        opinion: [{ required: true, message: '处理意见不能为空', trigger: 'blur' }]
-      },
-      searchForm: {
-        status: ''
-      },
-      alarmStatusList: []
-    }
-  },
-  created() {
-    this.getList()
-    this.getEditMyInfo()
-    this.getDictTreeData()
-    this.getDictionary()
-  },
-  methods: {
-    getRowKey(row) {
-      return row.dwAlarmId
-    },
-    // 搜索
-    getQuery() {
-      this.$refs.multipleTable.clearSelection()
-      this.getList()
-    },
-    // 获取登录人信息
-    getEditMyInfo() {
-      requestFN(
-        '/user/goEditMyInfo',
-        {}
-      ).then((data) => {
-        this.loginUserID = data.pd.USER_ID				// 主职角色ID
-      }).catch((e) => {
-      })
-    },
-    resetSearchForm() {
-      this.searchForm = {
-        status: ''
-      }
-      this.getList()
-    },
-    // 获取列表
-    getList() {
-      this.listLoading = true
-      requestFN(
-        '/dingWei/getAlarmList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
-        {
-          status: this.searchForm.status,
-          sourceNum: '1'
-        }
-      ).then((data) => {
-        this.listLoading = false
-        this.varList = data.list
-        this.total = data.page.total
-      }).catch((e) => {
-        this.listLoading = false
-      })
-    },
-    getDictionary() {
-      requestFN(
-        '/dingWei/getDictionary',
-        {}
-      ).then((data) => {
-        if (data.code === 200) {
-          var alarmStatusList = JSON.parse(data.AlarmStatus)
-          this.alarmStatusList = alarmStatusList
-        }
-      }).catch((e) => {
-
-      })
-    },
-    goInfo(id, type) {
-      this.dialogManageAlarm = true
-      this.dialogType = type
-      this.manageAlarmForm.DW_ALARM_ID = id
-      if (type === 'ignore') {
-        this.manageAlarmForm.status = '2'
-      } else {
-        this.manageAlarmForm.status = '1'
-      }
-    },
-    manageAlarm() {
-      this.$refs.form.validate(valid => {
-        if (valid) {
-          this.listLoading = true
-          requestFN(
-            '/dingWei/manageAlarm',
-            this.manageAlarmForm
-          ).then((data) => {
-            if (data.code === 200) {
-              this.closeManageAlarm()
-              this.getList()
-              this.$message({
-                message: '操作成功',
-                type: 'success'
-              })
-            } else {
-              this.$message.error(data.message)
-            }
-          })
-        }
-      })
-    },
-    closeManageAlarm() {
-      this.dialogManageAlarm = false
-      this.resetForm()
-    },
-    resetForm() {
-      this.manageAlarmForm = {
-        opinion: '', // 处理意见
-        DW_ALARM_ID: '',
-        status: ''
-      }
-    },
-    getDictTreeData() {
-      return new Promise((resolve) => {
-        requestFN(
-          '/department/listTreeCorpDept',
-          {}
-        ).then((data) => {
-          this.treeData = this.listTransTree(JSON.parse(data.zTreeNodes), 'id', 'pId', 'nodes')
-          resolve('ok')
-        }).catch((e) => {
-        })
-      })
-    }
-  }
-}
-
-</script>

src/views/oneCompany/territory/index.vue

@@ -1,29 +0,0 @@
-<template>
-  <div>
-    <List v-show="activeName=='List'" ref="list" />
-  </div>
-</template>
-
-<script>
-import List from './components/list'
-export default {
-  components: {
-    List: List
-  },
-  data() {
-    return {
-      activeName: 'List'
-    }
-  },
-  watch: {
-    activeName(val) {
-      if (val == 'List') {
-        this.$refs.list.getList()
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-</style>