3.28

src/utils/UIInteractions.js

@@ -441,7 +441,7 @@ export function ueCallBackShujun() {    // 疏浚船舶回头
   })
 }
 
-export function ueCallClearShujun() {    // 疏浚船舶回头
+export function ueCallClearShujun() {    // 结束疏浚模拟
   callUIInteractionFormat({
     "ActionName":"clear_shujun"
   })

src/views/home/Header.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="header">
     <div class="main">
-      <div class="title">黄浦江核心段数字孪生系统</div>
+      <div class="title">黄浦江数字孪生系统</div>
       <div class="content">
         <div class="left">
           <i class="temperature"></i>
@@ -84,7 +84,7 @@ export default {
     { name: '船舶', status: true },
     { name: '视频', status: false },
     { name: '水下地形', status: false },
-    { name: '轮渡客流', status: false },
+    // { name: '轮渡客流', status: false },
   ])
   
   function handleToggleLayer(index) {
@@ -115,12 +115,12 @@ export default {
         case 4:
           bus.emit('toggle_sxdx', true)
           break
-        case 5:
+        /* case 5:
           ueCallfullExtent()
           setTimeout(() => {
             ueCallOpenRlt()
           }, 1000);
-          break
+          break */
       }
     } else {
       switch(index) {
@@ -139,9 +139,9 @@ export default {
         case 4:
           bus.emit('toggle_sxdx', false)
           break
-        case 5:
-          ueCallCloseRlt()
-          break
+        // case 5:
+        //   ueCallCloseRlt()
+        //   break
       }
     }
   }

src/views/yyjg/Index.vue

@@ -29,13 +29,30 @@
        />
       <div class="pl-b2">
         <span class="title1-left">作业申报</span>
-        <div v-for="item in listData_zysb.data" class="list-item">
-          <span>{{ item.name }}</span>
-          <span>{{ item.count }}</span>
-          <span>{{ item.unit }}</span>
+        <span class="title2-left">普货监测</span>
+        <div v-for="item in listData_zysb.normal" class="list-item-normal">
+          <img src="@/assets/imgs/page_yyjg/box-puhuo.png" alt="">
+          <div>
+            <div>
+              <span>{{ item.count }}</span>
+              <span>{{ item.unit }}</span>
+            </div>
+            <span>{{ item.name }}</span>
+          </div>
         </div>
-        <span class="top5">企业货物吞吐量TOP5</span>
-        <div id="chart-top5"></div>
+        <span class="title2-left block-2">危货监测</span>
+        <div v-for="item in listData_zysb.danger" class="list-item-danger">
+          <img src="@/assets/imgs/page_yyjg/box-weihuo.png" alt="">
+          <div>
+            <div>
+              <span>{{ item.count }}</span>
+              <span>{{ item.unit }}</span>
+            </div>
+            <span>{{ item.name }}</span>
+          </div>
+        </div>
+        <!-- <span class="top5">企业货物吞吐量TOP5</span>
+        <div id="chart-top5"></div> -->
       </div>
     </div>
     <div class="panel-right">
@@ -149,9 +166,9 @@ export default {
 
   onMounted(() => {
     getData()
-    nextTick(() => {
+    /* nextTick(() => {
       setEntThroughput5(document.getElementById('chart-top5'), chartData_entThroughput5.data)
-    })
+    }) */
   })
 
   onBeforeUnmount(() => {
@@ -255,37 +272,41 @@ export default {
 
   function getData_zysb() {
     GetZysb().then(res => {
-      listData_zysb.data.forEach(i => {
-        if(i.fieldName==='ton') {
-          let valLen = Math.round(+res.data['ton']).toString().length
-          if(valLen<5) {
-            i.count = +res.data['ton'].toFixed(2)
-            i.unit = '吨'
-          } else {
-            i.count = (+res.data['ton']/10000).toFixed(2)
-            i.unit = '万吨'
-          }
-        } else {
-          i.count = res.data[i.fieldName]
-        }
-      })
-      chartData_entThroughput5.data = res.data.topList.sort((a,b) => b.ton - a.ton)
-      setEntThroughput5(document.getElementById('chart-top5'), chartData_entThroughput5.data)
+      listData_zysb.normal[0].count = res.data['count']
+      if(Math.round(+res.data['ton']).toString().length<5) {
+        listData_zysb.normal[1].count = res.data['ton']
+        listData_zysb.normal[1].unit = '吨'
+      } else {
+        listData_zysb.normal[1].count = (+res.data['ton']/10000).toFixed(2)
+        listData_zysb.normal[1].unit = '万吨'
+      }
+      if(Math.round(+res.data['dangerThruput']).toString().length<5) {
+        listData_zysb.danger[0].count = res.data['dangerThruput']
+        listData_zysb.danger[0].unit = '吨'
+      } else {
+        listData_zysb.danger[0].count = (+res.data['dangerThruput']/10000).toFixed(2)
+        listData_zysb.danger[0].unit = '万吨'
+      }
     })
   }
 
-  const listData_zysb = reactive({data: [
-    { name: '当天货物装卸申报数', fieldName:'count', count: 0, unit: '件' },
-    { name: '当天散货装卸吞吐量', fieldName:'ton', count: 0, unit: '吨' }
-  ]})
-
-  const chartData_entThroughput5 = reactive({data: [
+  const listData_zysb = reactive({
+    normal: [
+      { name: '当天货物装卸申报数', count: 0, unit: '艘' },
+      { name: '当天散货装卸吞吐量', count: 0, unit: '吨' }
+    ],
+    danger: [
+      { name: '当天散货装卸吞吐量', count: 0, unit: '吨' },
+    ]
+})
+
+  /* const chartData_entThroughput5 = reactive({data: [
     { unitName: '', ton: 0 },
 		{ unitName: '', ton: 0 },
 		{ unitName: '', ton: 0 },
 		{ unitName: '', ton: 0 },
 		{ unitName: '', ton: 0 }
-  ]})
+  ]}) */
 
   function getData_zxjc() {
     GetZxjc().then(res => {
@@ -393,7 +414,7 @@ export default {
   }
   .panel-left {
     left: 0;
-    padding: 0 30px 35px;
+    padding: 0 30px 40px;
   }
 
   .panel-right {
@@ -412,7 +433,7 @@ export default {
         width: fit-content;
         display: flex;
         align-items: center;
-        margin-bottom: 8px;
+        margin-bottom: 11px;
         &:first-child {
           cursor: pointer;
         }
@@ -470,65 +491,71 @@ export default {
   }
 
   .pl-b2 {
+    .title2-left {
+      margin: 2vh 0;
+    }
+    .list-item-normal, .list-item-danger {
+      display: flex;
+      align-items: center;
+      &>div {
+        &>div {
+          margin: 3px 0 8px;
+          span:first-child {
+            box-sizing: border-box;
+            display: inline-block;
+            padding: 0 5px;
+            flex: 1;
+            text-align: right;
+            font-size: 22px;
+            line-height: 22px;
+            font-family: BarlowBold;
+            color: transparent;
+            background: linear-gradient(180deg, #08D8BC 0%, #10ECDE 100%);
+            -webkit-background-clip: text;
+          }
+          span:last-child {
+            font-size: 14px;
+            line-height: 14px;
+            color: #ddd;
+          }
+        }
+        &>span {
+          padding-left: 4px;
+          font-size: 16px;
+          line-height: 16px;
+          color: #ddd;
+        }
+      }
+
+    }
+    .list-item-normal {
+      &>img {
+        width: 103px;
+        height: 93px;
+      }
+    }
+    .list-item-danger {
+      align-items: flex-start;
+      &>img {
+        width: 103px;
+        height: 77px;
+      }
+      &>div>div {
+        margin-top: 6px;
+      }
+    }
     .list-item {
       box-sizing: border-box;
       width: 290px;
       height: 28px;
-      margin-bottom: 18px;
+      margin-bottom: 20px;
       padding: 0 10px 7px 26px;
       background: url('@/assets/imgs/page_yyjg/bg-zysb.png') no-repeat;
       background-size: 100% 100%;
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
-      span:nth-child(1) {
-        font-size: 16px;
-        line-height: 16px;
-        font-style: italic;
-        color: transparent;
-        background: linear-gradient(0deg, #ACDDFF 0%, #FFFFFF 100%);
-        -webkit-background-clip: text;
-      }
-      span:nth-child(2) {
-        box-sizing: border-box;
-        display: inline-block;
-        padding: 0 5px;
-        flex: 1;
-        text-align: right;
-        font-size: 20px;
-        line-height: 20px;
-        font-family: BarlowBold;
-        color: transparent;
-        background: linear-gradient(180deg, #08D8BC 0%, #10ECDE 100%);
-        -webkit-background-clip: text;
-      }
-      span:nth-child(3) {
-        font-size: 14px;
-        line-height: 14px;
-        color: #FFFFFF;
-        background: linear-gradient(0deg, #ACDDFF 0%, #FFFFFF 100%);
-        -webkit-background-clip: text;
-      }
-    }
-
-    .top5 {
-      display: block;
-      box-sizing: border-box;
-      width: 143px;
-      height: 26px;
-      background: url('@/assets/imgs/page_yyjg/bg-top5.png') no-repeat;
-      background-size: 100% 100%;
-      line-height: 26px;
-      text-align: center;
-      font-size: 12px;
-      font-weight: bold;
-      color: #FFFFFF;
-    }
-
-    #chart-top5 {
-      width: 100%;
-      height: 27vh;
-      margin-top: 10px;
+      
     }
   }