1128

package-lock.json

@@ -1955,6 +1955,49 @@
         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
+      },
+      "dependencies": {
+        "@vue/vue-loader-v15": {
+          "version": "npm:vue-loader@15.10.1",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.1.tgz",
+          "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
+          "dev": true,
+          "requires": {
+            "@vue/component-compiler-utils": "^3.1.0",
+            "hash-sum": "^1.0.2",
+            "loader-utils": "^1.1.0",
+            "vue-hot-reload-api": "^2.3.0",
+            "vue-style-loader": "^4.1.0"
+          },
+          "dependencies": {
+            "hash-sum": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+              "dev": true
+            }
+          }
+        },
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -2198,47 +2241,6 @@
       "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.41.tgz",
       "integrity": "sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw=="
     },
-    "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.10.0",
-      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.0.tgz",
-      "integrity": "sha512-VU6tuO8eKajrFeBzMssFUP9SvakEeeSi1BxdTH5o3+1yUyrldp8IERkSdXlMI2t4kxF2sqYUDsQY+WJBxzBmZg==",
-      "dev": true,
-      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
-      },
-      "dependencies": {
-        "hash-sum": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
-          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-          "dev": true
-        },
-        "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",

src/apis/yyjg.js

@@ -11,4 +11,37 @@ export function GetCbxxtj() {
       method: "post",
       data: {},
   })
+}
+
+export function GetCbjcg(pageSize=1000) {
+  return request({
+      url: '/dataShare/GetBoatReportForHPJ',
+      method: "post",
+      data: {
+        "pageIndex": 1, 
+        "pageSize": pageSize
+      },
+  })
+}
+
+export function GetCbzy(pageSize=10) {
+  return request({
+      url: '/dataShare/GetShipOperationPort',
+      method: "post",
+      data: {
+        "pageIndex": 1, 
+        "pageSize": pageSize
+      },
+  })
+}
+
+export function GetCbyj(pageSize=10) {
+  return request({
+      url: '/dataShare/GetWarningPort',
+      method: "post",
+      data: {
+        "pageIndex": 1, 
+        "pageSize": pageSize
+      },
+  })
 }

src/assets/styles/common.scss

@@ -30,6 +30,7 @@
   line-height: 20px;
   height: 20px;
   margin-bottom: 20px;
+  cursor: pointer;
   &::before {
     content: '';
     display: inline-block;
@@ -48,4 +49,7 @@
     background-size: contain;
     margin-left: 10px;
   }
+  &.highlight {
+    color: yellow;
+  }
 }

src/main.js

@@ -2,9 +2,6 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from "@/router/index.js";
 import '@/assets/styles/index.scss'
-import getToken from '@/request/token'
-
-getToken()
 
 createApp(App)
 .use(router)

src/router/index.js

@@ -1,8 +1,9 @@
 import {createRouter,createWebHashHistory} from "vue-router";
-
 import HomePage from '../views/home/Home'
-// import MapPage from '../views/map/Map'
+import getToken from '@/request/token'
+import { useGlobalState } from '@/store/index'
 
+const state = useGlobalState()
 
 export const defaultRoutes = [
   {
@@ -38,8 +39,13 @@ const router = createRouter({
 
 
 
-/* router.beforeEach((to, from, next)=>{
- 
-}) */
+router.beforeEach(async (to, from, next)=>{
+  if(!state.token.value) {
+    await getToken()
+    next()
+  } else {
+    next()
+  }
+})
 
 export default router

src/views/ssky/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="ssky">
     <div class="panel-left">
-      <span class="title-divider">浦江游览</span>
+      <span class="title-divider" @click="handlePjylClick" :class="{'highlight': pjylSelected}">浦江游览</span>
       <div class="pl-b1">
         <span class="title1">码头资源</span>
         <div class="mtzy-item" v-for="item in mtzyData.value" :key="item.name">
@@ -41,11 +41,13 @@
             <i class="lshb-delete" @click="handleLsDelete"></i>
           </div>
         </div>
-        <ListBoxLshb v-for="item, index in lshbData.value" :key="index" :list-data="item" @showLshbDetail="showLshbDetail" />
+        <transition-group name="lshbList" tag="div" style="height: 23vh;">
+          <ListBoxLshb v-for="item, index in lshbData.value" :key="item.name" :list-data="item" @showLshbDetail="showLshbDetail" />
+        </transition-group>
       </div>
     </div>
     <div class="panel-right">
-      <span class="title-divider">对江轮渡</span>
+      <span class="title-divider" @click="handleDjldClick" :class="{'highlight': djldSelected}">对江轮渡</span>
       <div class="pr-b1">
         <span class="title1">轮渡资源</span>
         <div class="prb1-main">
@@ -82,7 +84,7 @@
             </div>
           </div>
         </div>
-        <div class="prb2-p2">
+        <div class="prb2-p2" @click="handleLineClick" :class="{'highlight': lineSelected }">
           <div class="ldkl-list" id="ldklList">
             <ListBoxLdkll v-for="item, index in ldklLineData.value" :key="index" :list-data="item" />
           </div>
@@ -99,6 +101,7 @@
       </div>
     </div>
     <LshbDialog v-if="lshbDiaShow" :lshb-data="lshbCurrent.value" @closeDialog="closeLshbDia" />
+    
   </div>
 </template>
 
@@ -114,20 +117,14 @@ export default {
   import ListBoxLdkll from './cpns/ListBoxLdkll'
   import LshbDialog from './cpns/LshbDialog.vue'
   import { Getdjld, Getpjyl, GetLshb } from '@/apis/ssky'
-  import { useGlobalState } from '@/store/index'
   import { useRafFn } from '@vueuse/core'
+  import { addResponseEventListener, callUIInteraction } from '@/webRtcVideo.js'
 
-  const state = useGlobalState()
 
   onMounted(() => {
-    const tokenTimer = setInterval(() => {
-      if(state.token.value) {
-        clearInterval(tokenTimer)
-        getdjld()
-        getpjyl()
-        // getlshb()
-      }
-    }, 200);
+    getdjld()
+    getpjyl()
+    // getlshb()
   })
 
   function getdjld() {
@@ -202,9 +199,6 @@ export default {
     })
   }
 
-  let ldklListScrollPause = null
-  let ldklListScrollResume = null
-
   function ldklListScroll() {
     const ldklList = document.getElementById('ldklList')
     let itemH = ldklList.clientHeight / Math.ceil(ldklLineData.value.length) * 2
@@ -219,8 +213,8 @@ export default {
       }
       ldklList.style.top = (Number(ldklList.style.top.slice(0, -2)) - 0.5) + 'px'
     })
-    ldklListScrollPause = pause
-    ldklListScrollResume = resume
+    ldklList.onmouseenter = pause
+    ldklList.onmouseleave = resume
   }
 
   const mtzyData = reactive({value: [
@@ -239,9 +233,9 @@ export default {
   }) 
 
   const lshbData = reactive({value: [
-    { name:  '浦江游览5', value:  110, type:   '商务', ent: '  上海浦江游览集团有限公司' },
-    { name:  '水晶公主',  value:   62, type:   '婚庆', ent: ' 上海浦江游览集团有限公司' },
-    { name:  '浦江游览1', value:  110, type:   '商务', ent: '  上海浦江游览集团有限公司' },
+    { name: '浦江游览5', value:  110, type: '商务', ent: '上海浦江游览集团有限公司' },
+    { name: '水晶公主',  value:   62, type: '婚庆', ent: '上海浦江游览集团有限公司' },
+    { name: '浦江游览1', value:  110, type: '商务', ent: '上海浦江游览集团有限公司' },
   ]}) 
 
   function formatNum(num){
@@ -268,7 +262,14 @@ export default {
   }
 
   function handleLsAdd() {
-    lshbDiaShow.value = true
+    // lshbDiaShow.value = true
+
+    let addLength = 1
+    for(let i=0; i<addLength; i++) {
+      lshbData.value.unshift({ name: 'test'+ parseInt(Math.random()*1000) , value:  99, type: '商务', ent: '上海浦江游览集团有限公司' } )
+      lshbData.value.splice(-1, 1)
+    }
+
   }
 
   function handleLsDelete() {
@@ -299,8 +300,88 @@ export default {
     { name: '世博客渡20', time: '09:42', type: '船舶避碰', status: '待处置' },
     { name: '世博客渡18', time: '09:41', type: '人员越界', status: '待处置' },
   ]
+
+  const lineSelected = ref(false)
+
+  function handleLineClick() {
+    lineSelected.value = !lineSelected.value
+    if(lineSelected.value) {
+      lineOn()
+    } else {
+      lineOff()
+    }
+  }
+
+  const pjylSelected = ref(false)
+
+  function handlePjylClick() {
+    pjylSelected.value = !pjylSelected.value
+    if(pjylSelected.value) {
+      lymtOn()
+    } else {
+      lymtOff()
+    }
+  }
+
+  const djldSelected = ref(false)
+
+  function handleDjldClick() {
+    djldSelected.value = !djldSelected.value
+    if(djldSelected.value) {
+      mtOn()
+    } else {
+      mtOff()
+    }
+  }
+
+  function callUIInteractionFormat(action) {
+    if(action['Parameters']) {
+      action['Parameters'] = JSON.stringify(action['Parameters'])
+    }
+    callUIInteraction(action)
+  }
   
+  function lineOn() {
+    let action = {
+      "ActionName":"show_line"
+    }
+    callUIInteractionFormat(action);
+  }
+
+  function lineOff() {
+    let action = {
+      "ActionName":"close_line"
+    }
+    callUIInteractionFormat(action);
+  }
 
+  function mtOn() {
+    let action = {
+      "ActionName":"show_mt"
+    }
+    callUIInteractionFormat(action);
+  }
+
+  function mtOff() {
+    let action = {
+      "ActionName":"close_mt"
+    }
+    callUIInteractionFormat(action);
+  }
+
+  function lymtOn() {
+    let action = {
+      "ActionName":"show_lymt"
+    }
+    callUIInteractionFormat(action);
+  }
+
+  function lymtOff() {
+    let action = {
+      "ActionName":"close_lymt"
+    }
+    callUIInteractionFormat(action);
+  }
 
 </script>
 
@@ -493,6 +574,17 @@ export default {
         background-size: contain;
       }
     }
+
+    .lshbList-move,.lshbList-enter-active,.lshbList-leave-active{
+      transition: all 0.5s ease;
+    }
+    .lshbList-enter-from
+    // ,.lshbList-leave-to
+    {
+      opacity: 0;
+      transform: translateX(-80px);
+    }
+
   }
 
   .pr-b1 {
@@ -601,10 +693,16 @@ export default {
       height: 15vh;
       overflow: hidden;
       position: relative;
+      border: 2px solid transparent;
+      padding-left: 2px;
       .ldkl-list {
+        cursor: pointer;
         position: absolute;
         top: 0;
       }
+      &.highlight {
+        border: 2px solid yellow;
+      }
     }
   }
 

src/views/yyjg/Index.vue

@@ -33,7 +33,7 @@
           </div>
         </div>
         <div v-else class="pl-main-wrapper">
-          <ListBoxJcg v-for="item, index in listData_jcg.data" :key="index" :list-data="item" />
+          <ListBoxJcg v-show="index<3" v-for="item, index in listData_jcg.data" :key="index" :list-data="item" />
         </div>
         
       </div>
@@ -51,7 +51,7 @@
           </div>
         </div>
         <div v-else class="pl-main-wrapper">
-          <ListBoxZy v-for="item, index in listData_zy.data" :key="index" :list-data="item" />
+          <ListBoxZy v-show="index<3" v-for="item, index in listData_zy.data" :key="index" :list-data="item" />
         </div>
         
       </div>
@@ -78,7 +78,7 @@
           </div>
         </div>
         <div v-else class="pl-main-wrapper">
-          <ListBoxYj v-for="item, index in listData_yj.data" :key="index" :list-data="item" />
+          <ListBoxYj v-show="index<3" v-for="item, index in listData_yj.data" :key="index" :list-data="item" />
         </div>
         
       </div>
@@ -138,18 +138,10 @@ export default {
   import ListBoxYj from './cpns/ListBoxYj'
   import { computed } from '@vue/reactivity';
   import { setCblx, setCbcjjg } from '@/echarts/options'
-  import { GetCbxxtj } from '@/apis/yyjg'
-  import { useGlobalState } from '@/store/index'
-
-  const state = useGlobalState()
+  import { GetCbxxtj, GetCbjcg, GetCbzy, GetCbyj } from '@/apis/yyjg'
 
   onMounted(() => {
-    const tokenTimer = setInterval(() => {
-      if(state.token.value) {
-        clearInterval(tokenTimer)
-        getData()
-      }
-    }, 200);
+    getData()
     nextTick(() => {
       setCblx(document.getElementById('chart-cblx') , boatTypeChart.data)
       setCbcjjg(document.getElementById('chart-cbcj'), boatNationChart.data)
@@ -162,23 +154,44 @@ export default {
     return Math.round(cataData_jcg.data.in / (cataData_jcg.data.in + cataData_jcg.data.out)*100)
   })
 
-  let listData_jcg = reactive({data: []})
+  let listData_jcg = reactive({data: [
+    { "mmsi": "-", "shipName": "-", "reportTime": null },
+    { "mmsi": "-", "shipName": "-", "reportTime": null },
+    { "mmsi": "-", "shipName": "-", "reportTime": null },
+  ]})
 
   function toListJcg(type) {
     leftPanelDetail.jcg = true
+    GetCbjcg(10).then(res => {
+      listData_jcg.data = res.data.Rows
+    })
   }
 
   let cataData_zy = reactive({data: []})
-  let listData_zy = reactive({data: []})
+  let listData_zy = reactive({data: [
+    { "SHIPNAME": "-", "BERTHNAME": "-", "CREATETIME": null },
+    { "SHIPNAME": "-", "BERTHNAME": "-", "CREATETIME": null },
+    { "SHIPNAME": "-", "BERTHNAME": "-", "CREATETIME": null },
+  ]})
   function toListZy(type) {
     leftPanelDetail.zy = true
+    GetCbzy().then(res => {
+      listData_zy.data = res.Result.data
+    })
   }
 
 
   let cataData_yj = reactive({data: {}})
-  let listData_yj = reactive({data: []})
+  let listData_yj = reactive({data: [
+    { "MMSI": "-", "SHIPNAME": "-", "CREATETIME": null },
+    { "MMSI": "-", "SHIPNAME": "-", "CREATETIME": null },
+    { "MMSI": "-", "SHIPNAME": "-", "CREATETIME": null },
+  ]})
   function toListYj(type) {
     leftPanelDetail.yj = true
+    GetCbyj().then(res => {
+      listData_yj.data = res.Result.data
+    })
   }
 
 
@@ -245,48 +258,12 @@ export default {
       }
     })
 
+
     cataData_jcg.data = {
       in: 964,
       out: 671
     }
 
-    listData_jcg.data = [
-      // { name: '江顺2215485444565422158', time: '10-07 17:11', mmsi: '413822856' },
-      // { name: '江顺5959', time: '10-07 17:11', mmsi: '413822857' },
-      // { name: '江顺5960', time: '10-07 17:11', mmsi: '413822858' },
-
-      {
-          "reportId": "0025fd2b-8ba0-469a-abe8-b2dc7885be9d",
-          "mmsi": "413903094",
-          "orgCode": "010300",
-          "shipName": "港拖16",
-          "arrivalOrLeave": "进港",
-          "reportPortName": "上海",
-          "reportTime": "2022-11-13 17:43:11",
-          "shipId": "CN19865253786"
-      },
-      {
-          "reportId": "005c8ee7-e1ba-485c-a0df-e5401d7acd35",
-          "mmsi": "413794501",
-          "orgCode": "010400",
-          "shipName": "中升油9",
-          "arrivalOrLeave": "进港",
-          "reportPortName": "上海",
-          "reportTime": "2022-11-13 20:56:07",
-          "shipId": "CN20148381053"
-      },
-      {
-          "reportId": "005dee0f-68d6-4bf6-b6bb-c3053926ee8d",
-          "mmsi": "413771634",
-          "orgCode": "290501",
-          "shipName": "浙余杭货02879",
-          "arrivalOrLeave": "出港",
-          "reportPortName": "奉贤",
-          "reportTime": "2022-11-13 22:08:10",
-          "shipId": "CN20099383203"
-      },
-    ]
-
     cataData_zy.data = [
       { type: '即将进港', count: 15 },
       { type: '航行中', count: 25 },
@@ -294,79 +271,12 @@ export default {
       { type: '已离港 ', count: 29 }
     ]
 
-    listData_zy.data = [
-      // { name: '江顺8555485548595811485', date: '2022-10-07', port: '上海沪东集装箱码头有限公司-长江泊位11254845' },
-      // { name: '江顺5959', date: '2022-10-07', port: '上海沪东集装箱码头有限公司-长江泊位' },
-      // { name: '江顺5960', date: '2022-10-07', port: '上海沪东集装箱码头有限公司-长江泊位' },
-
-      {
-          "WARNINGTYPE": "",
-          "MMSI": "",
-          "SHIPSTATE": "即将进港",
-          "SHIPNAME": "浦海213",
-          "BERTHNAME": "上海浦东外六期明东5泊位",
-          "CREATETIME": "2022-11-14 09:03:37"
-      },
-      {
-          "WARNINGTYPE": "",
-          "MMSI": "",
-          "SHIPSTATE": "靠泊中",
-          "SHIPNAME": "航供油501",
-          "BERTHNAME": "上海杨浦广德路2号码头",
-          "CREATETIME": "2022-11-14 18:49:07"
-      },
-      {
-          "WARNINGTYPE": "",
-          "MMSI": "",
-          "SHIPSTATE": "航行中",
-          "SHIPNAME": "富华油56",
-          "BERTHNAME": "上海闵行海事局徐浦环卫码头",
-          "CREATETIME": "2022-11-14 21:15:37"
-      },
-    ]
-
     cataData_yj.data = {
       tk: 17,
       sb: 12,
       zd: 9
     }
 
-    listData_yj.data = [
-      // { name: '江顺8555485548595811485', time: '10-07 17:11', mmsi: '413822856' },
-      // { name: '江顺5959', time: '10-07 17:11', mmsi: '413822857' },
-      // { name: '江顺5960', time: '10-07 17:11', mmsi: '413822858' },
-
-      {
-          "WARNINGTYPE": "非专用码头停靠预警",
-          "MMSI": "413841067",
-          "SHIPSTATE": "",
-          "SHIPNAME": "城投环境102",
-          "BERTHNAME": "",
-          "CREATETIME": "2022-11-14 15:39:00"
-      },
-      {
-          "WARNINGTYPE": "非专用码头停靠预警",
-          "MMSI": "413841067",
-          "SHIPSTATE": "",
-          "SHIPNAME": "城投环境102",
-          "BERTHNAME": "",
-          "CREATETIME": "2022-11-11 13:29:01"
-      },
-      {
-          "WARNINGTYPE": "载运危货进出港申报预警",
-          "MMSI": "413841067",
-          "SHIPSTATE": "",
-          "SHIPNAME": "城投环境102",
-          "BERTHNAME": "",
-          "CREATETIME": "2022-11-14 15:29:44"
-      },
-    ]
-
-    
-
-    
-
-    
 
   }
 
@@ -404,6 +314,7 @@ export default {
     background: linear-gradient(-90deg, rgba(0,17,50,0), rgba(0,17,51,0.55), rgba(0,17,50,0.8));
     .pl-main-wrapper {
       height: 23vh;
+      // overflow: hidden;
     }
   }
 

src/views/yyjg/cpns/ListBoxJcg.vue

@@ -10,7 +10,8 @@
     </div>
     <div class="row2">
       <span>mmsi: {{props.listData.mmsi}}</span>
-      <span>{{props.listData.reportTime.slice(5, 16)}}</span>
+      <span v-if="props.listData.reportTime">{{props.listData.reportTime.slice(5, 16)}}</span>
+      <span v-else>-</span>
     </div>
   </div>
 </template>

src/views/yyjg/cpns/ListBoxYj.vue

@@ -10,7 +10,8 @@
     </div>
     <div class="row2">
       <span>mmsi: {{props.listData.MMSI}}</span>
-      <span>{{props.listData.CREATETIME.slice(5,16)}}</span>
+      <span v-if="props.listData.CREATETIME">{{props.listData.CREATETIME.slice(5,16)}}</span>
+      <span v-else>-</span>
     </div>
   </div>
 </template>

src/views/yyjg/cpns/ListBoxZy.vue

@@ -2,7 +2,8 @@
   <div class="container">
     <div class="row1">
       <span :title="props.listData.SHIPNAME">{{props.listData.SHIPNAME}}</span>
-      <span>{{props.listData.CREATETIME.slice(5, 16)}}</span>
+      <span v-if="props.listData.CREATETIME">{{props.listData.CREATETIME.slice(5, 16)}}</span>
+      <span v-else>-</span>
       <!-- <span>{{props.listData.status}}</span> -->
       <i class="detail-btn"></i>
     </div>