运营监管接口接入

src/apis/other.js

@@ -0,0 +1,9 @@
+import request from "@/request/index";
+
+export function GetWeather() {
+  return request({
+      url: '/DigitalTwin/GetTodayWeather',
+      method: "post",
+      data: {},
+  })
+}

src/apis/ssky.js

@@ -7,7 +7,7 @@ const yesday = useDateFormat((new Date).getTime() - 24 * 60 * 60 * 1000, 'YYYY-M
 
 export function Getdjld() {
   return request({
-      url: '/dataShare/getdjld',
+      url: 'http://10.83.68.108:8090/ghjgDataShareApi/dataShare/getdjld',
       method: "post",
       data: {
         'date': yesday
@@ -17,7 +17,7 @@ export function Getdjld() {
 
 export function Getpjyl() {
   return request({
-      url: '/dataShare/getpjyl',
+      url: 'http://10.83.68.108:8090/ghjgDataShareApi/dataShare/getpjyl',
       method: "post",
       data: {
         'date': yesday
@@ -27,7 +27,7 @@ export function Getpjyl() {
 
 export function GetLshb() {
   return request({
-      url: '/ghjgdatashare/temporaryFlights/getList',
+      url: 'http://10.83.68.108:8090/ghjgDataShareApi/ghjgdatashare/temporaryFlights/getList',
       method: "post",
       data: {
         "current":1,

src/apis/yyjg.js

@@ -4,3 +4,42 @@ import { useNow, useDateFormat } from '@vueuse/core'
 const date = useDateFormat(useNow(), 'YYYY-MM-DD').value
 // const yesday = useDateFormat((new Date).getTime() - 24 * 60 * 60 * 1000, 'YYYY-MM-DD').value
   
+export function GetQygk() {
+  return request({
+      url: '/ghjg/BasiInfo/getUnit',
+      method: "post",
+      data: {},
+  })
+}
+
+export function GetYxdt() {
+  return request({
+      url: '/DigitalTwin/businessManage/GetTodayDeclareBoatCount',
+      method: "post",
+      data: {},
+  })
+}
+
+export function GetZysb() {
+  return request({
+      url: '/DigitalTwin/businessManage/GetTodayDeclareStatistic',
+      method: "post",
+      data: {},
+  })
+}
+
+export function GetZxjc() {
+  return request({
+      url: '/DigitalTwin/businessManage/GetTodayDeclareBoatState',
+      method: "post",
+      data: {},
+  })
+}
+
+export function GetWggj() {
+  return request({
+      url: '/DigitalTwin/businessManage/GetWarningInfo',
+      method: "post",
+      data: {},
+  })
+}

src/components/UeVideo.vue

@@ -22,7 +22,7 @@ export default {
 
     onMounted(()=>{
 
-      console.log('video.value', video.value);
+      // console.log('video.value', video.value);
 
       videoInstance = initLoad({
         context,

src/echarts/options.js

@@ -55,9 +55,7 @@ export function setWaterLevel(ele, barData) {
 				zlevel: 10,
 				data: maxData,
 				itemStyle: {
-					normal: {
-						color: 'rgba(16, 89, 159, 1)',
-					},
+					color: 'rgba(16, 89, 159, 1)',
 				}
 			},
 			{
@@ -69,9 +67,7 @@ export function setWaterLevel(ele, barData) {
 				barCateGoryGap: '10%',
 				z: 16,
 				itemStyle: {
-					normal: {
-						color: 'rgba(19, 73, 112, 1)'
-					},
+					color: 'rgba(19, 73, 112, 1)'
 				},
 				data: maxData,
 			},
@@ -111,23 +107,21 @@ export function setWaterLevel(ele, barData) {
 				symbolPosition: 'end',
 				z: 22,
 				itemStyle: {
-					normal: {
-						color: function (params) {
-							return new echarts.graphic.LinearGradient(0, 0, 0, 1,
-								[
-									{
-										offset: 0,
-										color: 'rgba(14, 154, 209, 1)',
-									},
-									{
-										offset: 1,
-										color: 'rgba(2, 81, 209, 1)'
-									},
+					color: function (params) {
+						return new echarts.graphic.LinearGradient(0, 0, 0, 1,
+							[
+								{
+									offset: 0,
+									color: 'rgba(14, 154, 209, 1)',
+								},
+								{
+									offset: 1,
+									color: 'rgba(2, 81, 209, 1)'
+								},
 
-								],
-								false
-							);
-						},
+							],
+							false
+						);
 					},
 				},
 				data: barData,
@@ -171,7 +165,7 @@ export function setEntThroughput5(ele, dataIn) {
 	}
 	let values = []
 	dataIn.forEach(row => {
-		values.push(row.value)
+		values.push(row.ton)
 	})
 
 	let option = {
@@ -196,15 +190,13 @@ export function setEntThroughput5(ele, dataIn) {
 				type: 'shadow'
 			},
 			formatter: function (params) {
-				return dataIn[params[0].dataIndex].entName + ' : ' + params[0].value
+				return dataIn[params[0].dataIndex].unitName + ' : ' + params[0].value
 			}
 		},
 		xAxis: {
 			axisLabel: {
-				textStyle: {
-					fontSize: nowSize(14),
-					fontWeight: 700
-				},
+				fontSize: nowSize(14),
+				fontWeight: 700,
 				margin: -nowSize(20),
 				interval: 0
 			},
@@ -228,30 +220,31 @@ export function setEntThroughput5(ele, dataIn) {
 		yAxis: {
 			show: false,
 		},
-		series: [{
-			name: 'hill',
-			type: 'pictorialBar',
-			barCategoryGap: '-50%',
-			symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
-			label: {
-				show: true,
-				position: 'top',
-				distance: -nowSize(10),
-				formatter: function (params) {
-					let label = dataIn[params.dataIndex].entName
-					if (label.length > 6) {
-						label = label.slice(0, 6) + '...'
-					}
-					return '{value|' + params.value + '}\n{label|' + label + "}"
-				},
-				textStyle: {
+		series: [
+			{
+				name: 'hill',
+				type: 'pictorialBar',
+				barCategoryGap: '-50%',
+				symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
+				label: {
+					show: true,
+					position: 'top',
+					distance: -nowSize(10),
+					formatter: function (params) {
+						let label = dataIn[params.dataIndex].unitName
+						if (label.length > 6) {
+							label = label.slice(0, 6) + '...'
+						}
+						return '{value|' + params.value + '}\n{label|' + label + "}"
+					},
 					rich: {
 						value: {
 							fontSize: nowSize(16),
 							fontFamily: 'Barlow',
 							fontWeight: 600,
 							color: "rgba(255,255,255,0.9)",
-							padding: [nowSize(5), 0]
+							padding: [nowSize(5), 0],
+							align: 'center'
 						},
 						label: {
 							fontSize: nowSize(12),
@@ -259,12 +252,9 @@ export function setEntThroughput5(ele, dataIn) {
 							color: "rgba(255,255,255,0.7)",
 						}
 					}
-				},
-
-			},
 
-			itemStyle: {
-				normal: {
+				},
+				itemStyle: {
 					color: function (params) {
 						let colorList = [
 							{ color0: 'rgba(255, 84, 31, 0.5)', color1: 'rgba(255, 84, 31, 0.1)' },
@@ -285,12 +275,12 @@ export function setEntThroughput5(ele, dataIn) {
 				},
 				emphasis: {
 					opacity: 1
-				}
-			},
-			data: values, // 修改值
-			z: 10
-		}]
-	};
+				},
+				data: values, // 修改值
+				z: 10
+			}
+		]
+	}
 
 	entThroughput5 = setOptions(ele, option)
 }
@@ -406,17 +396,15 @@ export function setSjjk(ele, dataIn) {
 				type: 'bar',
 				barWidth: nowSize(11),
 				itemStyle: {
-					normal: {
 
-						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-							offset: 0.3,
-							color: 'rgba(67, 166, 255, 1)'
-						}, {
-							offset: 1,
-							color: 'rgba(0, 44, 89, 1)'
-						}]),
-						opacity: 1,
-					}
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+						offset: 0.3,
+						color: 'rgba(67, 166, 255, 1)'
+					}, {
+						offset: 1,
+						color: 'rgba(0, 44, 89, 1)'
+					}]),
+					opacity: 1,
 				},
 				yAxisIndex: 0,
 				data: value,
@@ -452,7 +440,7 @@ export function setSjjk(ele, dataIn) {
 				symbol: 'emptyCircle',
 				symbolSize: nowSize(11),
 				yAxisIndex: 1,
-				itemStyle: { normal: { color: 'rgba(143, 186, 236, 1)' } },
+				itemStyle: { color: 'rgba(143, 186, 236, 1)' },
 				data: total,
 			}
 		]
@@ -608,9 +596,7 @@ export function setCbgn(ele, data) {
 					interval: 0,
 					rotate: 0,
 					color: '#ddd',
-					textStyle: {
-						fontSize: nowSize(13),
-					},
+					fontSize: nowSize(13),
 					margin: nowSize(5), //刻度标签与轴线之间的距离。
 				},
 				data: xData,
@@ -692,14 +678,12 @@ export function setCbgn(ele, data) {
 					color: "transparent",
 				},
 				label: {
-					normal: {
-						show: true,
-						position: 'top',
-						fontSize: nowSize(14),
-						color: '#DFEEFA',
-						offset: [0, nowSize(-9)],
-						fontFamily: 'BarlowBold'
-					},
+					show: true,
+					position: 'top',
+					fontSize: nowSize(14),
+					color: '#DFEEFA',
+					offset: [0, nowSize(-9)],
+					fontFamily: 'BarlowBold'
 				},
 				data: yData,
 			},
@@ -768,7 +752,7 @@ export function setFsdll(ele, dataIn) {
 					lineStyle: {
 						color: '#8292a3',
 						type: 'dashed',
-						type: [nowSize(9),nowSize(4)],
+						type: [nowSize(9), nowSize(4)],
 					}
 				},
 				axisLine: {
@@ -805,21 +789,19 @@ export function setFsdll(ele, dataIn) {
 					borderWidth: nowSize(4),
 				},
 				areaStyle: {
-					normal: {
-						color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
-							[
-								{
-									offset: 0,
-									color: 'rgba(59, 183, 229, 0.4)',
-								},
-								{
-									offset: 1,
-									color: 'rgba(59, 183, 229, 0)',
-								},
-							],
-							false
-						),
-					}
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
+						[
+							{
+								offset: 0,
+								color: 'rgba(59, 183, 229, 0.4)',
+							},
+							{
+								offset: 1,
+								color: 'rgba(59, 183, 229, 0)',
+							},
+						],
+						false
+					),
 				},
 				data: value,
 			},

src/request/index.js

@@ -1,11 +1,10 @@
 import axios from "axios"
 import { useGlobalState } from '../store/index'
-// import getToken from '@/request/token'
 
 const state = useGlobalState()
 
 const service = axios.create({
-	baseURL: 'http://10.83.68.108:8090/ghjgDataShareApi',
+	baseURL: 'http://10.83.68.108:8091/ghjgWebServiceTest',
 	timeout: 60000, // 请求超时时间 毫秒
 	// withCredentials: true,
 	headers: {
@@ -15,25 +14,8 @@ const service = axios.create({
 
 service.interceptors.request.use(
 	(config) => {
-		/* if (!state.token.value) {
-			return getToken().then(res => {
-				if(res.data.status == 'success') {
-					state.token.value = res.data.data.token
-					config.data.token = res.data.data.token
-					return config
-				} else {
-					state.token.value = null
-					return false
-				}
-			})
-		} else {
-			config.data.token = state.token.value
-			return config;
-		} */
-
 		config.data.token = state.token.value
 		return config;
-
 	},
 	(error) => {
 		return Promise.reject(error);

src/views/home/Header.vue

@@ -85,7 +85,7 @@
               <span>{{day}}</span>
               <span>{{date}}</span>
             </div>
-            <i class="weather"></i>
+            <i class="weather" :class="weather"></i>
           </div>
           <!-- <div v-show="sceneBoxShow" class="scene-box">
             <div class="sb-time-row">
@@ -128,6 +128,26 @@ export default {
   import { addResponseEventListener, callUIInteraction } from '@/webRtcVideo.js'
   // import { setWaterLevel } from '@/echarts/options'
   import bus from '@/utils/bus'
+  import { GetWeather } from '@/apis/other'
+
+  onMounted(() => [
+    getWeather()
+    // setWaterLevel(document.getElementById('wl-center'),[waterLevelNow.value])
+  ])
+
+  function getWeather() {
+    GetWeather().then(res => {
+      switch(res.data.weather) {
+        case '晴': weather.value = 'qing'; break
+        case '多云':weather.value = 'duoyun'; break
+        case '小雨':weather.value = 'xiaoyu'; break
+        case '中雨':weather.value = 'zhongyu'; break
+        case '大雨':weather.value = 'dayu'; break
+        case '雾':weather.value = 'wu'; break
+        case '小雪':weather.value = 'xiaoxue'; break
+      }
+    })
+  }
 
   const subList = reactive([
     { name: '码头', status: false },
@@ -137,7 +157,7 @@ export default {
     { name: '视频', status: false },
     { name: '水下地形', status: false },
   ])
-
+  
   function handleToggleLayer(index) {
     subList[index].status = !subList[index].status
   }
@@ -234,15 +254,13 @@ export default {
     toggleSwqk(parseInt(perOut*6+100))
   } */
 
-  onMounted(() => [
-    // setWaterLevel(document.getElementById('wl-center'),[waterLevelNow.value])
-  ])
 
   const temperature = ref('32')
   const humidity = ref('42.3')
   const time = useDateFormat(useNow(), 'HH:mm')
   const date = useDateFormat(useNow(), 'YYYY.MM.DD')
   const day = useDateFormat(useNow(), 'ddd', { locales: 'en-US' })
+  const weather = ref('qing')
 
   /* const toolList = reactive([
     { name: '船舶位置', icon: require('@/assets/imgs/tool/tool-cbwz.png'), iconOn: require('@/assets/imgs/tool/tool-cbwz-h.png'), status: true },
@@ -828,14 +846,43 @@ export default {
         background-color: #fff;
       }
     }
-
+    
     .weather {
       display: inline-block;
       width: 32px;
       height: 32px;
-      background: url('@/assets/imgs/header/weather-dy.png') no-repeat;
+      background: url('@/assets/imgs/scene/w-qing.png') no-repeat;
       background-size: contain;
       margin: 0 36px;
+
+      &.qing {
+        background: url('@/assets/imgs/scene/w-qing.png') no-repeat;
+        background-size: contain;
+      }
+      &.duoyun {
+        background: url('@/assets/imgs/scene/w-duoyun.png') no-repeat;
+        background-size: contain;
+      }
+      &.xiaoyu {
+        background: url('@/assets/imgs/scene/w-xiaoyu.png') no-repeat;
+        background-size: contain;
+      }
+      &.zhongyu {
+        background: url('@/assets/imgs/scene/w-zhongyu.png') no-repeat;
+        background-size: contain;
+      }
+      &.dayu {
+        background: url('@/assets/imgs/scene/w-dayu.png') no-repeat;
+        background-size: contain;
+      }
+      &.wu {
+        background: url('@/assets/imgs/scene/w-wu.png') no-repeat;
+        background-size: contain;
+      }
+      &.xiaoxue {
+        background: url('@/assets/imgs/scene/w-xiaoxue.png') no-repeat;
+        background-size: contain;
+      }
     }
 
     /* .scene-box {

src/views/yyjg/Index.vue

@@ -4,10 +4,11 @@
       <div class="pl-b1">
         <span class="title1-left">企业概况</span>
         <ul class="plb1-content">
-          <li v-for="item in listData_qygk.data" @click="handleOpenEntList(item)">
+          <!-- <li v-for="item in listData_qygk.data" @click="handleOpenEntList(item)"> -->
+          <li v-for="item in listData_qygk.data">
             <img :src="item.icon" alt="">
             <div>
-              <span>{{item.name}}</span>
+              <span>{{ item.showName||item.name }}</span>
               <span>{{item.count}}</span>
             </div>
           </li>
@@ -28,26 +29,31 @@
     <div class="panel-right">
       <div class="pr pr-b1">
         <span class="title1-right">装卸监测</span>
-        <div class="prb1-main-item" v-for="item in listData_zxjc.data">
-          <i></i>
-          <div>
-            <div>
-              <span>{{ item.boatName }}</span>
-              <span>{{ item.type }}</span>
-            </div>
-            <span>{{ item.time }}</span>
+        <ul class="prb1-main">
+          <li class="prb1-main-item" v-for="item in listData_zxjc.data">
+            <i></i>
             <div>
               <div>
-                <span>货物: </span>
-                <span>{{ item.goods }}</span>
+                <span>{{ item.shipName }}</span>
+                <span>{{ item.state }}</span>
               </div>
+              <span v-if="item.startWorkTime!=='--'">
+                {{ useDateFormat(item.startWorkTime, 'MM/DD HH:mm').value + ' - ' + useDateFormat(item.gpsTime, 'MM/DD HH:mm').value }}
+              </span>
+              <span v-else>--</span>
               <div>
-                <span>申报量(吨): </span>
-                <span>{{ item.weight }}</span>
+                <div>
+                  <span>货物: </span>
+                  <span>{{ item.cargoName }}</span>
+                </div>
+                <div>
+                  <span>申报量(吨): </span>
+                  <span>{{ item.declareTon }}</span>
+                </div>
               </div>
             </div>
-          </div>
-        </div>
+          </li>
+        </ul>
       </div>
       <div class="pr pr-b2">
         <span class="title1-right">运行动态</span>
@@ -84,51 +90,105 @@ export default {
   import { onMounted, reactive, nextTick, ref } from 'vue';
   import { setEntThroughput5 } from '@/echarts/options';
   import EntInfoList from './cpns/EntInfoList'
+  import { GetQygk, GetYxdt, GetZysb, GetZxjc, GetWggj } from '@/apis/yyjg'
+  import { useDateFormat } from '@vueuse/core'
 
   onMounted(() => {
+    getData()
     nextTick(() => {
       setEntThroughput5(document.getElementById('chart-top5'), chartData_entThroughput5.data)
-
     })
   })
 
+  function getData() {
+    getData_qygk()
+    getData_yxdt()
+    getData_zysb()
+    getData_zxjc()
+    getData_wggj()
+  }
+
+  function getData_qygk() {
+    GetQygk().then(res => {
+      res.data.forEach(i => {
+        listData_qygk.data.forEach(j => {
+          if(i.certtype === j.name) {
+            j.count = i.id
+          }
+        })
+      })
+    })
+  }
+
   const entInfoListShow = ref(false)
 
   const listData_qygk = reactive({data: [
-    { name: '港口经营企业', count: 509, icon: require('../../assets/imgs/page_yyjg/icon-gkjy.png') },
-    { name: '港口经营备案企业', count: 374, icon: require('../../assets/imgs/page_yyjg/icon-gkjy.png') },
-    { name: '国内水运企业', count: 158, icon: require('../../assets/imgs/page_yyjg/icon-gnsy.png') },
-    { name: '国内船舶管理企业', count: 75, icon: require('../../assets/imgs/page_yyjg/icon-gnsy.png') }
+    { name: '港口经营企业', count: 0, icon: require('../../assets/imgs/page_yyjg/icon-gkjy.png') },
+    { name: '港口经营备案企业', count: 0, icon: require('../../assets/imgs/page_yyjg/icon-gkjy.png') },
+    { name: '水路运输管理企业', showName: '国内水运企业', count: 0, icon: require('../../assets/imgs/page_yyjg/icon-gnsy.png') },
+    { name: '国内船舶管理企业', count: 0, icon: require('../../assets/imgs/page_yyjg/icon-gnsy.png') }
   ]})
 
+  function getData_zysb() {
+    GetZysb().then(res => {
+      listData_zysb.data.forEach(i => {
+        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)
+    })
+  }
+
   const listData_zysb = reactive({data: [
-    { name: '当天货物装卸申报数', count: 189, unit: '件' },
-    { name: '当天散货装卸吞吐量', count: 208123, unit: '吨' }
+    { name: '当天货物装卸申报数', fieldName:'count', count: 0, unit: '件' },
+    { name: '当天散货装卸吞吐量', fieldName:'ton', count: 0, unit: '吨' }
   ]})
 
   const chartData_entThroughput5 = reactive({data: [
-    { entName: '上海复闵', value: 263662 },
-		{ entName: '宝山钢铁股', value: 221779 },
-		{ entName: '中化东方上海哈哈', value: 203452 },
-		{ entName: '上海中有中燃吃不吃', value: 176576 },
-		{ entName: '上海城建物资', value: 127876 }
+    { unitName: '', ton: 0 },
+		{ unitName: '', ton: 0 },
+		{ unitName: '', ton: 0 },
+		{ unitName: '', ton: 0 },
+		{ unitName: '', ton: 0 }
   ]})
 
+  function getData_zxjc() {
+    GetZxjc().then(res => {
+      listData_zxjc.data = res.data.Rows
+    })
+  }
+
   const listData_zxjc = reactive({data: [
-    { boatName: '苏淮货16058', type: '进港', time: '01/09 19:03-01/10 20:00', goods: '钢材', weight: 2030 },
-    { boatName: '祥瀚8', type: '进港', time: '01/09 19:03-01/10 20:00', goods: '燃料油', weight: 572 }
+    { shipName: '--', state: '--', startWorkTime: '--', gpsTime: '--', cargoName: '--', declareTon: 0 },
+    { shipName: '--', state: '--', startWorkTime: '--', gpsTime: '--', cargoName: '--', declareTon: 0 }
   ]})
 
+  function getData_yxdt() {
+    GetYxdt().then(res => {
+      cataData_yxdt.data.forEach(i => {
+        i.value = res.data[i.fieldName]
+      })
+    })
+  }
+
   const cataData_yxdt = reactive({data: [
-    { title: '即将作业船舶数', value: 59 },
-    { title: '作业完成船舶数', value: 17 },
-    { title: '作业中船舶数', value: 36 },
+    { title: '即将作业船舶数', fieldName: 'willWorkCount', value: 0 },
+    { title: '作业完成船舶数', fieldName: 'finishWorkCount', value: 0 },
+    { title: '作业中船舶数', fieldName: 'workingCount', value: 0 },
   ]})
 
+  function getData_wggj() {
+    GetWggj().then(res => {
+      listData_wggj.data.forEach(i => {
+        i.value = res.data[i.fieldName]
+      })
+    })
+  }
+
   const listData_wggj = reactive({data: [
-    { type: '超等级靠泊', value: 145 },
-    { type: '港口经营许可证到期', value: 123 },
-    { type: '危险货物作业附证到期', value: 246 },
+    { type: '超等级靠泊', fieldName: 'overGrade', value: 0 },
+    { type: '港口经营许可证到期', fieldName: 'portExpire', value: 0 },
+    { type: '危险货物作业附证到期', fieldName: 'dangerExpire', value: 0 },
   ]})
 
   const listData_entInfo = reactive({data: [
@@ -149,6 +209,7 @@ export default {
     entInfoListShow.value = true
   }
 
+
 </script>
 
 <style lang="scss" scoped>
@@ -242,7 +303,7 @@ export default {
   .pl-b2 {
     .list-item {
       box-sizing: border-box;
-      width: 284px;
+      width: 290px;
       height: 28px;
       margin-bottom: 18px;
       padding: 0 10px 7px 26px;
@@ -302,6 +363,13 @@ export default {
   }
 
   .pr-b1 {
+    .prb1-main {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      height: 210px;
+      overflow: hidden;
+    }
     .prb1-main-item {
       display: flex;
       align-items: center;