update:更新

src/api/facility.js

@@ -1,4 +1,4 @@
-import request from '../utils/request'
+import http from '@/utils/http'
 import { getToken } from '@/utils/token'
 import axios from 'axios'
 
@@ -6,7 +6,7 @@ const token = getToken()
 
 // * 登录接口获取 token
 export const login = () => {
-  return request.get('/api/v1/login', {
+  return http.get('/api/v1/login', {
     params: {
       username: 'admin',
       password: 'AF7548EEDFF8e737C0E4B2A669497290',
@@ -17,26 +17,26 @@ export const login = () => {
 
 // * 获取设备信息列表
 export const getDeviceListAPI = (params) => {
-  return request.get(
+  return http.get(
     `/api/v1/device/channellist?start=${params.start}&limit=${params.limit}&online=${params.online}&token=${token}`
   )
 }
 
 // * 获取视频列表
 export const getVideoListAPI = (channel) => {
-  return request.get(
+  return http.get(
     `/api/v1/stream/start?serial=${'32092400002005063063'}&channel=${channel}&timeout=${500}&check_channel_status=${true}&token=${token}`
   )
 }
 
 // * 退出登录
 export const logoutAPI = () => {
-  return request.get('/api/v1/logout')
+  return http.get('/api/v1/logout')
 }
 
 // * 关闭视频流
 export const getCloseVideoAPI = (channel) => {
-  return request.get(
+  return http.get(
     `/api/v1/stream/stop?serial=${'32092400002005063063'}&channel=${channel}&token=${token}`
   )
 }

src/utils/http.js

@@ -1,39 +1,86 @@
 import axios from 'axios'
-// import { getToken } from '@/utils/token'
 // * 海康平台
-// const baseURL = 'http://50.146.63.43:15000/'
-const baseURL = 'http://50.146.63.43:20000/'
+import vm from '../main'
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 const http = axios.create({
-  baseURL,
-  timeout: 30000
+  // baseURL: 'http://50.146.63.43:1129/hjapi',
+  //baseURL: 'http://121.41.91.94:12002/hjapi',
+  //baseURL: `http://${window.location.host}/hjapi`,
+  // baseURL: 'http://121.41.91.94:12524/hjapi/', //外网
+  baseURL: 'http://50.146.63.43:20000/',
+  timeout: 50000,
+  headers: { 'content-type': 'application/json' }
 })
-// todo 封装基本拦截
-// * 请求拦截器
+// request拦截器
 http.interceptors.request.use(
   (config) => {
+    // // 是否需要设置 token
+    // const isToken = (config.headers || {}).isToken === false
+    // // 是否需要防止数据重复提交
+    // if (getToken() && !isToken) {
+    //   config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+    // }
+    //防止重复提交
     if (config) {
-      // config.headers['Authorization'] = 'Bearer ' + getToken()
       return config
     }
   },
   (error) => {
-    return Promise.reject(error)
+    console.log(error)
+    Promise.reject(error)
   }
 )
-
-// * 响应拦截器
+// response 拦截器
+// 可以在接口响应后统一处理结果
 http.interceptors.response.use(
   (response) => {
-    if (response.status !== 200) {
-      return Promise.reject(response.message)
+    if (response.data) {
+      switch (response.data.code) {
+        case 200:
+          // 如果是返回的文件
+          if (response.config.responseType === 'blob') {
+            return response.data
+          }
+          // 兼容服务端返回的字符串数据
+          if (typeof response.data === 'string') {
+            response.data = response.data
+              ? JSON.parse(response.data)
+              : response.data
+          }
+          return response.data
+
+        case 401:
+          if (vm.$route.name !== 'login') {
+            vm.$message.warning({
+              content: '身份认证信息已失效，请重新登录。',
+              duration: 2,
+              onClose: () => {
+                vm.$router.push({ name: 'login' })
+              }
+            })
+          } else {
+            return Promise.reject()
+          }
+          break
+        case 403:
+          vm.$message.warning({
+            content: response.data.msg,
+            duration: 3
+          })
+          break
+        case 500:
+          // 如果是返回的文件
+          vm.$message.warning({
+            content: response.data.msg,
+            duration: 3
+          })
+          return response.data
+      }
     }
-    return response.data
   },
   (error) => {
-    if (axios.isCancel(error)) {
-      console.log(error)
-    }
+    console.log('err' + error) // for debug
+
     return Promise.reject(error)
   }
 )

src/utils/request.js

@@ -3,10 +3,10 @@ import vm from '../main'
 import { getToken } from '@/utils/auth'
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 const request = axios.create({
-  // baseURL: 'http://50.146.63.43:1129/hjapi',
+  baseURL: 'http://50.146.63.43:1129/hjapi',
   //baseURL: 'http://121.41.91.94:12002/hjapi',
   //baseURL: `http://${window.location.host}/hjapi`,
-  baseURL: 'http://121.41.91.94:12524/hjapi/', //外网
+  // baseURL: 'http://121.41.91.94:12524/hjapi/', //外网
   timeout: 50000,
   headers: { 'content-type': 'application/json' }
 })
@@ -48,7 +48,7 @@ request.interceptors.response.use(
 
         case 401:
           if (vm.$route.name !== 'login') {
-            vm.$Message.warning({
+            vm.$message.warning({
               content: '身份认证信息已失效，请重新登录。',
               duration: 2,
               onClose: () => {
@@ -60,14 +60,14 @@ request.interceptors.response.use(
           }
           break
         case 403:
-          vm.$Message.warning({
+          vm.$message.warning({
             content: response.data.msg,
             duration: 3
           })
           break
         case 500:
           // 如果是返回的文件
-          vm.$Message.warning({
+          vm.$message.warning({
             content: response.data.msg,
             duration: 3
           })

src/views/coastalMap/components/keyPerson.vue

@@ -73,38 +73,45 @@
           <li v-for="item in roll_list" :key="item.id">
             <div class="roll_item_left">
               <div class="roll_item_pic">
-                <img src="item.userPic" alt="" />
+                <img :src="item.userPic" alt="" />
               </div>
               <div class="roll_item_btn">查看详情</div>
             </div>
             <div class="roll_item_right">
-              <div class="person_type one_type">
-                {{ item.impUserType }}
+              <!-- // TODO 人员标签暂无 -->
+              <div v-if="item.per_type == '1'" class="person_type one_type">
+                {{ item.type_text }}
               </div>
-              <div class="person_type two_type">
-                {{ item.impUserType }}
+              <div
+                v-else-if="item.per_type == '2'"
+                class="person_type two_type"
+              >
+                {{ item.type_text }}
               </div>
-              <div class="person_type three_type">
-                {{ item.impUserType }}
+              <div
+                v-else-if="item.per_type == '3'"
+                class="person_type three_type"
+              >
+                {{ item.type_text }}
               </div>
               <!-- 信息展示 -->
               <div class="right_text">
-                <div class="right_text_item">人员姓名</div>
-                <div class="right_text_item">联系电话</div>
-                <div class="right_text_item">证件号码</div>
-                <div class="right_text_item">户籍地址</div>
-                <div class="right_text_item">现住地址</div>
+                <div class="right_text_item">人员姓名 :</div>
+                <div class="right_text_item">联系电话 :</div>
+                <div class="right_text_item">证件号码 :</div>
+                <div class="right_text_item">户籍地址 :</div>
+                <div class="right_text_item">现住地址 :</div>
               </div>
               <div class="right_value">
                 <div class="right_value_item">{{ item.userName }}</div>
                 <div class="right_value_item">{{ item.phone }}</div>
-                <div class="right_value_item" :title="item.id_card">
+                <div class="right_value_item" :title="item.idCard">
                   {{ item.idCard }}
                 </div>
-                <div class="right_value_item" :title="item.old_address">
+                <div class="right_value_item" :title="item.houseHoldAddress">
                   {{ item.houseHoldAddress }}
                 </div>
-                <div class="right_value_item" :title="item.new_address">
+                <div class="right_value_item" :title="item.habitationAddress">
                   {{ item.habitationAddress }}
                 </div>
               </div>
@@ -119,16 +126,19 @@
 import * as echarts from 'echarts'
 import EleResize from '@/utils/esresize'
 import { keyPersonnelAPI, MetaImpUserInfo } from '@/api/coastalMap/resource'
-// import PersonScroll from './keypersonScroll.vue'
 export default {
   name: 'KeyPerson',
-  // components: { PersonScroll },
   data() {
     return {
+      // * 模块标题
       title_text: '重点人员',
+      // * 重点人员数据
       importpeople: {},
+      // * 滚动数据
       roll_list: [],
+      // * 动画开关
       animateUp: false,
+      // * 定时器ID
       timer: null
     }
   },
@@ -206,12 +216,13 @@ export default {
     async onkeyPersonnelAPI() {
       const res = await keyPersonnelAPI()
       this.importpeople = res.data
+      console.log(this.importpeople, '重点人员数据')
     },
     //重点人员信息(轮播)
     async onMetaImpUserInfo() {
       const res = await MetaImpUserInfo()
       this.roll_list = res.rows
-      console.log(this.roll_list, 'aaaa')
+      console.log(this.roll_list, '重点人员信息')
     }
   }
 }

src/views/coastalMap/components/policeStatus.vue

@@ -10,9 +10,15 @@
         <div class="police_status_box">
           <!-- 左边占比 -->
           <div class="rank_left">
-            <div class="rank_left_item one">1</div>
-            <div class="rank_left_item two">2</div>
-            <div class="rank_left_item three">3</div>
+            <div class="rank_left_item">
+              <div class="one">1</div>
+            </div>
+            <div class="rank_left_item">
+              <div class="two">2</div>
+            </div>
+            <div class="rank_left_item">
+              <div class="three">3</div>
+            </div>
           </div>
           <div class="charts_right" id="charts_right"></div>
         </div>
@@ -25,18 +31,17 @@
             <div class="roll_item">
               <div class="time_box">{{ item.createTime }}</div>
               <div class="roll_item_left">
-                <div class="roll_item_text">警情类型</div>
-                <div class="roll_item_text">接警单位</div>
-                <div class="roll_item_text">事发地址</div>
-                <div class="roll_item_text">报警内容</div>
+                <div class="roll_item_text">警情类型 :</div>
+                <div class="roll_item_text">接警单位 :</div>
+                <div class="roll_item_text">事发地址 :</div>
+                <div class="roll_item_text">报警内容 :</div>
               </div>
               <div class="roll_item_right">
                 <div class="roll_item_value">
-                  :
                   {{ item.alarmResponseTypeName }}
                 </div>
-                <div class="roll_item_value">:{{ item.alarmResponseUnit }}</div>
-                <div class="roll_item_value">:{{ item.alarmAddress }}</div>
+                <div class="roll_item_value">{{ item.alarmResponseUnit }}</div>
+                <div class="roll_item_value">{{ item.alarmAddress }}</div>
                 <div class="roll_item_value" :title="item.now_address">
                   {{ item.alarmResponseContent }}
                 </div>
@@ -64,7 +69,7 @@ export default {
     return {
       value: '1',
       y_data: ['其他纠纷', '家庭纠纷', '其他警情'], // y轴文字
-      chart_data: ['145', '29', '101'], // chart表数据
+      chart_data: [], // chart表数据
       roll_list: [
         // {
         //   id: '1',
@@ -134,17 +139,24 @@ export default {
       timer: null
     }
   },
-  mounted() {
-    this.init_charts()
-    this.timer = setInterval(this.scrollAnimate, 1500)
-  },
   created() {
     this.onPoliceStatistics()
     this.onMetaAlarmInfo()
   },
-
+  mounted() {
+    // this.init_charts()
+    this.timer = setInterval(this.scrollAnimate, 1500)
+  },
+  watch: {
+    chart_data: {
+      handler(newData) {
+        if (newData) this.init_charts(newData)
+      },
+      immediate: true
+    }
+  },
   methods: {
-    init_charts() {
+    init_charts(chart_data) {
       let charts = document.getElementById('charts_right')
       let resize_div = document.getElementById('charts_right')
       let myChart = echarts.init(charts)
@@ -188,7 +200,8 @@ export default {
         },
         series: [
           {
-            data: this.chart_data,
+            data: chart_data,
+            barWidth: '20%',
             type: 'bar',
             showBackground: true,
             itemStyle: {
@@ -196,6 +209,7 @@ export default {
                 colorStops: [
                   {
                     offset: 0,
+                    barWidth: '30%',
                     color: '#1A416B' // 0% 处的颜色
                   },
                   {
@@ -234,12 +248,15 @@ export default {
       console.log(res, 'eacharts数据')
       this.chart_data = res.data.map((item) => item.count)
       console.log(this.chart_data)
+      // res.data.forEach((element) => {
+      //   this.y_data.push(element.alarmResponseTypeName)
+      // })
     },
     //警情信息表
     async onMetaAlarmInfo() {
       const res = await MetaAlarmInfo()
       this.roll_list = res.rows
-      console.log(this.roll_listc, 'oooppp')
+      // console.log(res, '警情信息表')
     }
   }
 }
@@ -275,6 +292,7 @@ export default {
     background-image: url('@/assets/picture/bg_5.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
+
     .police_status_body_charts {
       width: 20vw;
       height: 19vh;
@@ -292,17 +310,47 @@ export default {
           .rank_left_item {
             width: 3vw;
             height: 6vh;
-            color: #ecf4f9;
-            font-size: 18px;
-            font-weight: 600;
-            text-align: center;
-            line-height: 6vh;
-          }
-          .one {
-            background: url('~@/assets/coastalMap/policeStatus/rank_one.png')
-              no-repeat;
-            background-size: 100% 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .one {
+              color: #ecf4f9;
+              font-size: 18px;
+              font-weight: 600;
+              text-align: center;
+              line-height: 4vh;
+              width: 2vw;
+              height: 4vh;
+              background: url('~@/assets/coastalMap/policeStatus/rank_one.png')
+                no-repeat;
+              background-size: 100% 100%;
+            }
+            .two {
+              color: #ecf4f9;
+              font-size: 18px;
+              font-weight: 600;
+              text-align: center;
+              line-height: 4vh;
+              width: 2vw;
+              height: 4vh;
+              background: url('~@/assets/coastalMap/policeStatus/rank_two.png')
+                no-repeat;
+              background-size: 100% 100%;
+            }
+            .three {
+              color: #ecf4f9;
+              font-size: 18px;
+              font-weight: 600;
+              text-align: center;
+              line-height: 4vh;
+              width: 2vw;
+              height: 4vh;
+              background: url('~@/assets/coastalMap/policeStatus/rank_three.png')
+                no-repeat;
+              background-size: 100% 100%;
+            }
           }
+
           .two {
             background: url('~@/assets/coastalMap/policeStatus/rank_two.png')
               no-repeat;
@@ -356,8 +404,8 @@ export default {
               position: absolute;
               width: 7vw;
               height: 2vh;
-              top: 0px;
-              right: 0px;
+              top: 0.5vh;
+              right: 0.5vw;
               color: #fff;
               text-align: center;
               line-height: 2vh;

src/views/coastalMap/index.vue

@@ -160,9 +160,9 @@ export default {
     async onGetResource() {
       const res = await getResourceAPI()
       this.resourceData = res.data
-      // console.log(this.resourceData)
+      // console.log(this.resourceData, '获取资源概况')
     },
-    // * 获取重点人员
+    // * 获取重点人员 - 图例数据
     async onGetKeyPersonnel() {
       const res = await keyPersonnelAPI()
       console.log(res, '重点人员数据待更新')
@@ -329,6 +329,7 @@ export default {
       flex-direction: column;
       justify-content: space-between;
       align-items: center;
+      cursor: pointer;
 
       .point_icon {
         width: 4vw;
@@ -340,6 +341,10 @@ export default {
         justify-content: center;
         align-items: center;
 
+        &:hover {
+          filter: brightness(140%);
+        }
+
         .icon_body {
           width: 1.2vw;
           height: 4vh;
@@ -354,6 +359,10 @@ export default {
         text-align: center;
         line-height: 2vh;
         font-size: 1rem;
+
+        &:hover {
+          filter: brightness(140%);
+        }
       }
     }
   }

src/views/home/index.vue

@@ -5,7 +5,7 @@
       <div class="system_title_text">射阳沿海治安防控综合平台</div>
     </div> -->
     <!-- // * 底部导航按钮 - 跳转路由 -->
-    <div class="under_btn" v-if="play">
+    <div class="under_btn">
       <div class="under_btn_item">
         <div class="item_check" @click="toHome"></div>
       </div>
@@ -16,7 +16,7 @@
         <div class="item_check_back" @click="toDevice">感知设备</div>
       </div>
       <div class="under_btn_item">
-        <div class="item_check_back" @click="toBuild">建模应用</div>
+        <div class="item_check_back">建模应用</div>
       </div>
     </div>
     <router-view></router-view>
@@ -27,36 +27,26 @@ export default {
   // eslint-disable-next-line vue/multi-word-component-names
   name: 'Home',
   data() {
-    return {
-      play: true
-    }
+    return {}
   },
-
   methods: {
     toHome() {
       this.$router.push('/home/coastalMap')
-      this.play = true
     },
     toVideo() {
       this.$router.push('/home/videoMonitor')
-      this.play = true
     },
     toDevice() {
       this.$router.push('/home/sensingDevice')
-      this.play = true
-    },
-    toBuild() {
-      this.play = false
-      this.$router.push('/home/buildUse')
     }
   }
 }
 </script>
 <style lang="scss" scoped>
 .main {
+  position: relative;
   width: 100vw;
   height: 100vh;
-  background: #07204b;
   // .system_title {
   //   display: flex;
   //   justify-content: center;
@@ -90,8 +80,9 @@ export default {
 
   .under_btn {
     position: absolute;
+    left: 32.5vw;
+    right: 32.5vw;
     bottom: 5vh;
-    left: 35vw;
     width: 35vw;
     height: 12vh;
     // background: #33a59f;
@@ -101,15 +92,15 @@ export default {
     .under_btn_item {
       width: 13vw;
       height: 12vh;
-      // border: 1px solid#b1335d;
+      // border: 1px solid #b1335d;
       display: flex;
       justify-content: center;
       align-items: center;
 
       // * 导航样式
       .item_check {
-        width: 6vw;
-        height: 12vh;
+        width: 5.5vw;
+        height: 5.5vw;
         background-image: url('@/assets/picture/icon_home_nor.png');
         background-repeat: no-repeat;
         background-size: 100% 100%;
@@ -118,17 +109,17 @@ export default {
         &:hover {
           background-image: url('@/assets/picture/icon_home_sel.png');
           background-repeat: no-repeat;
-          background-size: 100% 100%;
+          background-size: 100% auto;
         }
       }
 
       .item_check_back {
-        width: 6vw;
-        height: 12vh;
+        width: 5.5vw;
+        height: 5.5vw;
         background-image: url('@/assets/picture/under_button.png');
         background-repeat: no-repeat;
         background-size: 100% 100%;
-        font-size: 1.3rem;
+        font-size: 1.2rem;
         font-family: PingFangSC, PingFang SC;
         font-weight: 500;
         color: #ecf4f9;
@@ -139,6 +130,9 @@ export default {
 
         &:hover {
           color: #00f5ff;
+          // * 强行增亮
+          filter: brightness(140%);
+          background-size: 100% auto;
         }
       }
     }

src/views/videoMonitor/index.vue

@@ -67,9 +67,10 @@
 
 <script>
 import { dateFormat } from '@/utils/date'
-import { login, getCloseVideoAPI } from '@/api/facility'
-import { setToken } from '@/utils/token'
-import { getDeviceListAPI } from '@/api/videoMonitor/index'
+import { login, getVideoListAPI } from '@/api/facility'
+// import { setToken } from '@/utils/token'
+// import { getDeviceListAPI } from '@/api/videoMonitor/index'
+import { getDeviceListAPI } from '@/api/facility'
 import { setDeviceLatlng } from '@/utils/latlng'
 import bus from '@/utils/bus'
 import MapPlayer from './components/livePlayer.vue'
@@ -86,17 +87,23 @@ export default {
       deviceName: '',
       // * 标题文本
       title_text: '射阳沿海治安防控综合平台',
-      // * 监控设备所需分页
-      params: {
-        pageSize: 3000,
-        pageNum: 1
-      },
+      // // * 监控设备所需分页
+      // params: {
+      //   pageSize: 3000,
+      //   pageNum: 1
+      // },
       // * 监控数据
       channelList: [],
       // * 时间集合
       timeArr: {},
       // * 用户名称
-      userName: '李警官'
+      userName: '李警官',
+      // * 监控设备所需分页
+      params: {
+        start: 0,
+        limit: 10000,
+        online: true
+      }
     }
   },
   created() {
@@ -112,33 +119,36 @@ export default {
     // * 登录获取海康 token
     async onGetLogin() {
       const res = await login()
-      setToken(res.URLToken)
+      // setToken(res.URLToken)
+      console.log(res)
     },
     // * 获取监控视频设备
     async onGetDeviceListAPI() {
+      // const res = await getDeviceListAPI(this.params)
+      // this.channelList = res.rows.filter((item) => item.longitude !== 0)
       const res = await getDeviceListAPI(this.params)
-      this.channelList = res.rows.filter((item) => item.longitude !== 0)
+      // this.channelList = res.rows.filter((item) => item.longitude !== 0)
       // console.log(this.channelList, '监控设备数据')
+      console.log(res)
       // * 存储到本地
       setDeviceLatlng(this.channelList)
     },
     // * 获取图层点击传递的数据
     handleDeviceBus() {
       bus.$on('deviceChannel', async (deviceData) => {
+        try {
+          const res = await getVideoListAPI(deviceData.channel)
+          console.log(res)
+        } catch (error) {
+          console.log(error)
+        }
         // try {
         //   const res = await getVideoListAPI(deviceData.channel)
         //   console.log(res)
         // } catch (error) {
         //   console.log(error)
         // }
-
-        try {
-          const res = await getCloseVideoAPI(deviceData.channel)
-          console.log(res)
-        } catch (error) {
-          console.log(error)
-        }
-        // console.log(deviceData)
+        console.log(deviceData)
       })
     },
     // * 获取时间