更新 首页数据

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite --mode dev",
-    "build":"vite build --mode dev",
+    "build": "vite build --mode dev",
     "bm": "vite build --mode release",
     "serve": "vite build --mode release && vite preview"
   },
@@ -11,6 +11,7 @@
     "@cloudbase/js-sdk": "^1.7.1",
     "@element-plus/icons": "^0.0.11",
     "axios": "^0.21.1",
+    "echarts": "^5.3.3",
     "element-plus": "^1.1.0-beta.24",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",

src/App.vue

@@ -19,6 +19,8 @@
 import HeaderVue from "./components/Header.vue";
 import AsideVue from "./components/Aside.vue";
 import FooterVue from "./components/Footer.vue";
+import * as echarts from "echarts";
+import { provide } from "vue";
 export default {
   components: {
     HeaderVue,
@@ -28,6 +30,9 @@ export default {
   data() {
     return {};
   },
+  setup() {
+    provide("ec", echarts);
+  },
 };
 </script>
 

src/views/index/Index.vue

@@ -41,7 +41,28 @@
         </div>
       </div>
     </div>
-    <div class="right-top"></div>
+    <div class="right-top">
+      <div class="cards card-1">
+        <div>总航次数</div>
+        <div>{{ indexData.totalVoyageNum }}</div>
+      </div>
+      <div class="cards card-2">
+        <div>总实际装载吨位</div>
+        <div>{{ indexData.totalLoadTons }}</div>
+      </div>
+      <div class="cards card-3">
+        <div>总已完成卸货吨位</div>
+        <div>{{ indexData.finshDiscTons }}</div>
+      </div>
+      <div class="cards card-4">
+        <div>总剩余卸货吨位</div>
+        <div>{{ indexData.unfinshDiscTons }}</div>
+      </div>
+      <div id="pie" class="card-5">
+        <div>饼图</div>
+        <div>卸货</div>
+      </div>
+    </div>
   </div>
   <div class="df">
     <div class="left-bottom">
@@ -237,7 +258,7 @@
   </div>
 </template>
 <script setup>
-import { ref, reactive, toRefs, computed, onMounted } from "vue";
+import { ref, reactive, toRefs, computed, onMounted, inject } from "vue";
 import { ElNotification } from "element-plus";
 import store from "../../store";
 import router from "../../router";
@@ -248,6 +269,7 @@ import downloadBlobFile from "../../utils/downloadBlobFile";
 import url from "../../apis/config";
 let map = ref({});
 let cargoOwnerId = localStorage.userId;
+let echarts = inject("ec");
 
 function initMap() {
   map.value = new AMap.Map("map-container", {
@@ -268,10 +290,15 @@ function initMap() {
   });
   // map.value.addControl(toolBar);
   map.value.addControl(hawkEye);
-  return;
+  drawMarkers();
+  drawPie();
+}
+
+function drawMarkers() {
   let markers = [];
-  for (let i of medias.value) {
-    let content = `<div style='width:160px'>
+  for (let i of indexData.value.mapPoints) {
+    if (i.latitude && i.longitude) {
+      let content = `<div style='width:160px'>
         ${
           i.audit == 1
             ? `<img id='img${i.id}' style='width:160px;height:160px;object-fit:contain;' src='${i.viewUrl}'/>`
@@ -280,28 +307,23 @@ function initMap() {
         <img src='https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/ship-red-icon.png' style='display:block;width:20px;height:20px;margin:6px auto'/
       </div>`;
 
-    let marker = new AMap.Marker({
-      content,
-      position: new AMap.LngLat(i.longitude, i.latitude),
-      offset: new AMap.Pixel(-75, i.audit == 1 ? -195 : -30),
-    });
-    if (i.audit == 1) {
-      marker.on("click", () => {
-        openMediaModal(i.viewUrl, 1, "航次图片", i);
+      let marker = new AMap.Marker({
+        content,
+        position: new AMap.LngLat(i.longitude, i.latitude),
+        offset: new AMap.Pixel(-75, i.audit == 1 ? -195 : -30),
       });
-    }
+      if (i.audit == 1) {
+        marker.on("click", () => {
+          openMediaModal(i.viewUrl, 1, "航次图片", i);
+        });
+      }
 
-    markers.push(marker);
+      markers.push(marker);
+    }
   }
-
   let overlayGroups = new AMap.OverlayGroup(markers);
-  map.value.on("complete", function () {
-    let t = setTimeout(() => {
-      map.value.add(overlayGroups);
-      map.value.setFitView(markers, true, [200, 50, 0, 0], 18);
-      clearTimeout(t);
-    }, 2000);
-  });
+  map.value.add(overlayGroups);
+  map.value.setFitView(markers, true, [200, 50, 50, 50], 18);
 }
 let status = ref(0);
 function changeVoyageType(s) {
@@ -317,12 +339,67 @@ let postData = ref({
   abnormalStatus: "",
   cargoId: "",
 });
-async function getIndexData() {
+let indexData = ref({
+  finshDiscTons: "",
+  mapPoints: [],
+  totalLoadTons: "",
+  totalVoyageNum: "",
+  unfinshDiscTons: "",
+});
+async function getIndexData(type) {
+  console.log(type);
+
   postData.value.status = status.value;
   let res = await api.getIndexData({
     ...postData.value,
   });
-  console.log(res);
+  if (res.data.status == 0) {
+    indexData.value = res.data.result;
+    if (type == "init") {
+      console.log(1);
+      initMap();
+      drawPie("init");
+    } else {
+      map.value.clearMap();
+      drawMarkers();
+      console.log(2);
+      drawPie();
+    }
+  }
+}
+let chartDom = ref({});
+let myChart = ref({});
+
+function drawPie(type) {
+  if (!myChart.value.id) {
+    chartDom.value = document.getElementById("pie");
+    myChart.value = echarts.init(chartDom.value);
+  }
+
+  let option;
+
+  option = {
+    series: [
+      {
+        name: "Access From",
+        type: "pie",
+        radius: "30%",
+        data: [
+          { value: indexData.value.finshDiscTons, name: "已卸货吨位" },
+          { value: indexData.value.totalLoadTons, name: "装载吨位" },
+          { value: indexData.value.unfinshDiscTons, name: "剩余卸货吨位" },
+        ],
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: "rgba(0, 0, 0, 0.5)",
+          },
+        },
+      },
+    ],
+  };
+  myChart.value.setOption(option);
 }
 
 let portOptions = ref([]);
@@ -459,20 +536,13 @@ function resetFilter() {
   getIndexData();
 }
 onMounted(() => {
-  initMap();
   getPortSelect();
   getCargoSelect();
-  getIndexData();
+  getIndexData("init");
 });
 </script>
 
 <style scoped>
-.left-top {
-  width: calc(100% - 200px);
-  height: calc(100vh - 256px);
-  position: relative;
-}
-
 .map-container {
   width: 100%;
   height: 100%;
@@ -514,14 +584,22 @@ onMounted(() => {
   color: #fff;
 }
 
+.left-top {
+  width: calc(100% - 280px);
+  height: calc(100vh - 256px);
+  position: relative;
+}
+
 .right-top {
-  width: 200px;
+  width: 280px;
   height: calc(100vh - 256px);
-  border: 1px solid grey;
+  background: #fff;
+  text-align: center;
+  color: #3992de;
 }
 
 .left-bottom {
-  width: calc(100% - 200px);
+  width: calc(100% - 280px);
   height: 118px;
   background: #fff;
   display: flex;
@@ -529,7 +607,7 @@ onMounted(() => {
 }
 
 .right-bottom {
-  width: 200px;
+  width: 280px;
   height: 118px;
   text-align: center;
   display: flex;
@@ -540,4 +618,33 @@ onMounted(() => {
 :deep() .el-dialog {
   width: 800px;
 }
+.cards {
+  height: calc((100% - 280px) / 4);
+  border-bottom: 1px solid grey;
+}
+
+.cards {
+}
+
+.cards > div:first-child {
+  font-size: 24px;
+  padding-top: 12%;
+  padding-bottom: 8%;
+}
+
+.cards > div:last-child {
+  font-size: 20px;
+}
+
+.card-1 {
+}
+.card-2 {
+}
+.card-3 {
+}
+.card-4 {
+}
+.card-5 {
+  height: 280px;
+}
 </style>