update

apps/com.awspaas.user.apps.cmp/screen/css/253.acfc2f5c.css

@@ -0,0 +1 @@
+#container[data-v-4939489c]{width:916px;height:580px}

apps/com.awspaas.user.apps.cmp/screen/css/899.c96e5edd.css

@@ -0,0 +1 @@
+#ScaleBox{--scale:1}.ScaleBox{position:absolute;transform:scale(var(--scale)) translate(-50%,-50%);display:flex;flex-direction:column;transform-origin:0 0;left:50%;top:50%;transition:.3s;z-index:999}[data-v-0ac62c95] .router-link-active{background-color:#0d4579}.screen-header[data-v-0ac62c95]{height:84px}.screen-header .nav-bar[data-v-0ac62c95]{padding-left:32%;height:64px;background-image:linear-gradient(0deg,#0e4b84,#000407)}.screen-header .nav-bar .nav-link[data-v-0ac62c95]{width:160px;height:36px;background-image:linear-gradient(0deg,#0e4b84,rgba(0,4,7,0) 99%);border-radius:0 0 20px 20px;font-size:24px;color:#b1e1ff;font-weight:400}.screen-header .title[data-v-0ac62c95]{width:30%;height:84px;background-image:linear-gradient(0deg,#0e4b84,#000407);border-radius:0 0 84px 0;font-size:36px;color:#b1e1ff;font-weight:400}.screen-layout[data-v-15e266f6]{background-image:url(../../../../apps/com.awspaas.user.apps.cmp/screen/img/bg@3x.e76e19cf.png)}

apps/com.awspaas.user.apps.cmp/screen/css/910.70fd6627.css

@@ -0,0 +1 @@
+.monitor-item[data-v-335010ca]{overflow:hidden;background-image:url(../../../../apps/com.awspaas.user.apps.cmp/screen/img/monitor.04a2160d.png);background-size:100% 100%}.monitor-item .video-wrap[data-v-335010ca]{background-color:#333;position:relative;margin-top:10%;width:98%;height:65%}.monitor-item .video-wrap .snapshot[data-v-335010ca]{position:absolute;left:15px;top:50%;width:40px;aspect-ratio:1/1;display:flex;justify-content:center;align-items:center;transform:translateY(-50%);z-index:2023;border-radius:8px;cursor:pointer}.monitor-item .video-wrap .snapshot[data-v-335010ca]:hover{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.monitor-item .video-wrap .exit-fullscreen[data-v-335010ca]{position:absolute;font-size:40px;color:#fff;z-index:99999;right:5px;bottom:5px}.monitor-item .video-wrap .zoom-bar[data-v-335010ca]{width:200px;height:60px;position:absolute;right:100px;bottom:320px;display:flex;z-index:9999;justify-content:space-between;align-items:center}.monitor-item .video-wrap .zoom-bar div[data-v-335010ca]{width:48px;height:48px;font-size:48px;background-color:hsla(0,0%,100%,.56);border-radius:50%;display:flex;align-items:center;justify-content:center}.monitor-item .video-wrap .zoom-bar .iconfont.pressed[data-v-335010ca]{background-color:gray}.monitor-item .video-wrap .playback-time[data-v-335010ca]{width:160px;position:absolute;right:12px;top:12px;z-index:99}.monitor-item .video-wrap .arrow-control[data-v-335010ca]{width:200px;height:200px;border-radius:50%;background-color:hsla(0,0%,100%,.56);position:absolute;right:100px;bottom:100px;z-index:9999}.monitor-item .video-wrap .arrow-control .iconfont[data-v-335010ca]{width:36px;height:36px;font-size:36px;position:absolute;border-radius:50%;display:flex;justify-content:center;align-items:center}.monitor-item .video-wrap .arrow-control .iconfont.pressed[data-v-335010ca]{background-color:gray}.monitor-item .video-wrap .arrow-control .up[data-v-335010ca]{left:50%;transform:translateX(-50%);top:20px}.monitor-item .video-wrap .arrow-control .down[data-v-335010ca]{left:50%;transform:translateX(-50%);bottom:20px}.monitor-item .video-wrap .arrow-control .left[data-v-335010ca]{top:50%;transform:translateY(-50%);left:20px}.monitor-item .video-wrap .arrow-control .right[data-v-335010ca]{top:50%;transform:translateY(-50%);right:20px}.monitor-item .video-wrap .monitor-screen[data-v-335010ca]{width:100%;height:100%}.monitor-item .video-wrap .overlay[data-v-335010ca]{z-index:99;position:absolute;left:0;top:0;width:100%;height:100%}.monitor-item .controls[data-v-335010ca]{width:100%}.monitor-item .controls .fullscreen[data-v-335010ca],.monitor-item .controls .playbtn[data-v-335010ca]{font-size:40px;color:#fff}.monitor-item .controls img[data-v-335010ca]{width:28px;height:28px}.monitor-item .desc[data-v-335010ca]{font-family:PingFangSC-Medium;font-size:16px;color:#fff;letter-spacing:0;line-height:24px;text-shadow:0 0 7px #158eff;font-weight:500}

apps/com.awspaas.user.apps.cmp/screen/js/253.756cdeb2.js

@@ -0,0 +1,2 @@
+"use strict";(self["webpackChunkdata_visual_webpack"]=self["webpackChunkdata_visual_webpack"]||[]).push([[253],{89:function(t,a){a.Z=(t,a)=>{const e=t.__vccOpts||t;for(const[n,o]of a)e[n]=o;return e}},2253:function(t,a,e){e.r(a),e.d(a,{default:function(){return p}});var n=e(3396),o=e(70);const c={id:"container"};var s={__name:"AMap",setup(t){const a=t=>{parent.postMessage({type:"marker-clicked",proid:t.target.getExtData().proid})},e=(t,e)=>{for(const n of e){const e=n.MAP.split(",")[1],o=n.MAP.split(",")[0],c=new AMap.Marker({position:[e,o],map:t,extData:{proid:n.PROID}});c.on("click",a)}};return(0,n.bv)((async()=>{var t=new AMap.Map("container",{mapStyle:"amap://styles/25ad310ebf2a324fcc74707a92a4d0dc",zoom:24,resizeEnable:!0,center:[111.986715,40.740616]});window.addEventListener("message",(a=>{console.log(a.data);const e=a.data.coordinate,n=e.split(",")[1],o=e.split(",")[0];t.setZoomAndCenter(24,[n,o])}));const a=await o.ZP.get("tette");e(t,a)})),(0,n.Ah)((()=>{marker.off("click",a)})),(t,a)=>((0,n.wg)(),(0,n.iD)("div",c))}},r=e(89);const i=(0,r.Z)(s,[["__scopeId","data-v-4939489c"]]);var p=i}}]);
+//# sourceMappingURL=253.756cdeb2.js.map

apps/com.awspaas.user.apps.cmp/screen/js/910.fbda3ce5.js

@@ -0,0 +1,2 @@
+"use strict";(self["webpackChunkdata_visual_webpack"]=self["webpackChunkdata_visual_webpack"]||[]).push([[910],{6371:function(a,t,e){e.r(t),e.d(t,{default:function(){return s}});var u=e(3396),n=e(6637),i={__name:"monitor-detail",setup(a){return(a,t)=>((0,u.wg)(),(0,u.j4)(n.Z,{width:"1900",height:"960"}))}};const r=i;var s=r}}]);
+//# sourceMappingURL=910.fbda3ce5.js.map

apps/com.awspaas.user.apps.cmp/screen/js/910.fbda3ce5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"../apps/com.awspaas.user.apps.cmp/screen/js/910.fbda3ce5.js","mappings":"oTAGA,MAAMA,EAAc,EAEpB,O","sources":["webpack://data_visual_webpack/./src/views/Monitor/monitor-detail.vue"],"sourcesContent":["import script from \"./monitor-detail.vue?vue&type=script&setup=true&name=CameraDetail&lang=js\"\nexport * from \"./monitor-detail.vue?vue&type=script&setup=true&name=CameraDetail&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__"],"names":["__exports__"],"sourceRoot":""}

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@infectoone/vue-ganttastic": "^2.1.1",
     "@kjgl77/datav-vue3": "^1.3.3",
+    "@vicons/ionicons5": "^0.12.0",
     "@xpyjs/gantt": "^1.0.2",
     "axios": "^1.1.3",
     "core-js": "^3.8.3",
@@ -17,6 +18,7 @@
     "dhtmlx-gantt": "^7.1.12",
     "echarts": "^5.3.3",
     "element-plus": "^2.2.19",
+    "file-saver": "^2.0.5",
     "flv.js": "^1.6.2",
     "lodash-es": "^4.17.21",
     "pinia": "^2.0.33",

src/views/Monitor/camera.vue

@@ -5,6 +5,12 @@
   >
     <!-- <img src="../../assets/screen.png" class="monitor-screen" /> -->
     <div ref="videoWrapRef" :class="`video-wrap`">
+      <div v-if="isPlaying" class="snapshot">
+        <n-icon size="36" v-if="!snapshotDownloading" color="#18a058" @click="handleClickGetSnapshot">
+          <camera-outline />
+        </n-icon>
+        <n-spin v-else size="medium" />
+      </div>
       <!--      <div v-if="isFull" class="zoom-bar">-->
       <!--        <div-->
       <!--          :class="`zoomin iconfont icon-reduce ${pressed.up ? 'pressed' : ''}`"-->
@@ -25,6 +31,7 @@
             placeholder="选择回放日期"
             type="date"
             @clear="destroyPlayback"
+            v-model:value="playbackDate"
             @update-formatted-value="handleConfirmRange"
           />
         </n-config-provider>
@@ -101,41 +108,48 @@
 import flvjs from "flv.js";
 import { onMounted, onUnmounted, reactive, ref, toRefs, watch } from "vue";
 import { debounce } from "lodash-es";
+import { CameraOutline } from "@vicons/ionicons5";
 import {
   dateZhCN,
   NConfigProvider,
   NDatePicker,
   NSlider,
-  zhCN,
+  NIcon,
+  NSpin,
+  zhCN
 } from "naive-ui";
 import axios from "axios";
 import { useTokenStore } from "@/store/token";
+import dayjs from "dayjs";
+import { saveAs } from "file-saver";
 
 const isFull = ref(false);
 const previewImage = ref("");
 const tokenStore = useTokenStore();
+const snapshotDownloading = ref(false);
 
 // eslint-disable-next-line no-undef
 const props = defineProps({
   width: {
-    type: [String, Number],
+    type: [String, Number]
     // default: 800,
   },
   height: {
     type: [String, Number],
-    default: 420,
+    default: 420
   },
   source: {
-    type: String,
+    type: String
     // default:
     //   "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
   },
   name: {
     type: String,
-    default: "摄像头",
-  },
+    default: "摄像头"
+  }
 });
 const { width, height, source, name } = toRefs(props);
+const playbackDate = ref();
 const playbackProcess = ref(0);
 const videoWrapRef = ref();
 const videoElementRef = ref();
@@ -143,12 +157,11 @@ const playbackFlvUrl = ref(null); /*回放视频url*/
 const playbackStreamId = ref(null); /*回放id*/
 let flvPlayer = null;
 const isPlaying = ref(false);
-
 const pressed = reactive({
   left: false,
   right: false,
   up: false,
-  down: false,
+  down: false
 });
 
 /**
@@ -159,7 +172,7 @@ const pressed = reactive({
 function flvCreate(url, delay_play) {
   flvPlayer = flvjs.createPlayer({
     type: "flv",
-    url: url,
+    url: url
   });
   if (flvjs.isSupported()) {
     flvPlayer.attachMediaElement(videoElementRef.value);
@@ -220,7 +233,7 @@ const sliderMarks = {
   72000: "20:00",
   75600: "21:00",
   79200: "22:00",
-  82800: "23:00",
+  82800: "23:00"
 };
 
 /**
@@ -373,6 +386,71 @@ const loadPreviewImage = async () => {
   previewImage.value = `${url.protocol}//${url.host}/api/v1/device/channelsnap?serial=${serial}&token=${tokenStore.token}`;
 };
 
+/**
+ * 截图
+ */
+const captureScreenshot = async () => {
+  if (!tokenStore.token) {
+    await tokenStore.fetchToken();
+  }
+  const stime = dayjs(playbackDate.value).add(playbackProcess.value, "second");
+  const serial = source.value.split("/flv/hls/")[1].split("_")[0];
+  const url = new URL(source.value);
+  let snapTime = null;
+
+  // 如果存在回放,则停止回放
+  if (playbackStreamId.value) {
+    snapTime = stime.format("YYYYMMDDHHmmss");
+    await axios.get(
+      `${url.protocol}//${url.host}/api/v1/playback/stop?serial=${serial}&code=${serial}&streamid=${playbackStreamId.value}&token=${tokenStore.token}`
+    );
+  } else {
+    snapTime = "now";
+  }
+  try {
+    const snapshot = await axios.get(
+      `${url.protocol}//${url.host}/api/v1/device/channelsnap?serial=${serial}&code=${serial}&stime=${snapTime}&format=jpeg&w=-1&h=-1&token=${tokenStore.token}`,
+      {
+        responseType: "blob"
+      }
+    );
+    const filename = `${name.value}_${stime.format("YYYY-MM-DD_HH-mm-ss")}.jpg`;
+    saveAs(snapshot.data, filename);
+    await replayPlaybackAfterSnapShot();
+  } catch (e) {
+    replayPlaybackAfterSnapShot();
+  }
+};
+
+const replayPlaybackAfterSnapShot = async () => {
+  if (!tokenStore.token) {
+    await tokenStore.fetchToken();
+  }
+  const stime = dayjs(playbackDate.value).add(playbackProcess.value, "second");
+  const serial = source.value.split("/flv/hls/")[1].split("_")[0];
+  const url = new URL(source.value);
+  if (playbackStreamId.value) {
+    /*重新开始回放*/
+    const resp = await axios.get(
+      `${url.protocol}//${url.host}/api/v1/playback/start?serial=${serial}&code=${serial}&starttime=${stime.format("YYYY-MM-DD")}T00:00:00&endtime=${stime.format("YYYY-MM-DD")}T23:59:59&token=${tokenStore.token}`
+    );
+    playbackStreamId.value = resp.data.StreamID;
+    playbackFlvUrl.value = resp.data.FLV;
+    await axios.get(
+      `${url.protocol}//${url.host}/api/v1/playback/control?serial=${serial}&code=${serial}&streamid=${playbackStreamId.value}&command=play&range=${playbackProcess.value}&token=${tokenStore.token}`
+    );
+  }
+};
+const handleClickGetSnapshot = async () => {
+  snapshotDownloading.value = true;
+  try {
+    await captureScreenshot();
+  } catch (e) {
+    console.log(e);
+  }
+  snapshotDownloading.value = false;
+};
+
 /*监听回放url,销毁原播放器,如果有值则播放回放,没有则播放原视频*/
 watch(playbackFlvUrl, async (url) => {
   flvDestroy();
@@ -407,11 +485,13 @@ const destroyPlayback = async () => {
   const url = new URL(source.value);
   /*stop回放*/
   if (playbackStreamId.value) {
-    axios.get(
+    await axios.get(
       `${url.protocol}//${url.host}/api/v1/playback/stop?serial=${serial}&code=${serial}&streamid=${playbackStreamId.value}&token=${tokenStore.token}`
     );
     playbackFlvUrl.value = null;
     playbackStreamId.value = null;
+    playbackDate.value = null;
+    playbackProcess.value = 0;
   }
 };
 onUnmounted(() => {
@@ -436,6 +516,25 @@ onUnmounted(() => {
     width: 98%;
     height: 65%;
 
+    .snapshot {
+      position: absolute;
+      left: 15px;
+      top: 50%;
+      width: 40px;
+      aspect-ratio: 1/1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transform: translateY(-50%);
+      z-index: 2023;
+      border-radius: 8px;
+      cursor: pointer;
+
+      &:hover {
+        backdrop-filter: blur(8px);
+      }
+    }
+
     .exit-fullscreen {
       position: absolute;
       font-size: 40px;
@@ -576,8 +675,4 @@ onUnmounted(() => {
   }
 }
 </style>
-<style>
-.n-slider-mark {
-  color: #fff;
-}
-</style>
+

src/views/Monitor/index.vue

@@ -160,103 +160,103 @@ const loadProjectList = async () => {
   const resp = await axios.get(
     "./jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectList&sid=" + sid
   );
-  // const resp = {
-  //   data: [
-  //     {
-  //       SUPERVISORID: "",
-  //       MAP: "40.763291,111.971932",
-  //       PROID: "HT6YXM-202303232023030010",
-  //       PROTYPE: "",
-  //       UPDATEDATE: 1679559863000,
-  //       SUPERVISOR: "",
-  //       DESIGNERID: "",
-  //       STCV: 800000,
-  //       PROOWNER: "六院本部/资产运营部/",
-  //       SURVEY: "",
-  //       UPDATEUSER: "13088880001",
-  //       SURVEYID: "",
-  //       APPENDIX: "",
-  //       PROCOST: 800000,
-  //       PRICELEADERID: "13088880004",
-  //       PRODEPTLEADERID: "13088880003",
-  //       PROLEADERID: "13088880002",
-  //       PROLEADER: "建设单位项目管理人员",
-  //       CONTRACTOR: "",
-  //       FLOORAREA: 2000,
-  //       CREATEUSER: "13088880001",
-  //       ISEND: 0,
-  //       RSTATUS: "1",
-  //       LEADERID: "13088880007",
-  //       PRICELEADER: "工程造价主管部门领导",
-  //       PROSTATUS: "1",
-  //       CBDATE: 1677600000000,
-  //       CONTRACTORID: "",
-  //       LEADER: "主要领导",
-  //       PRODEPTLEADER: "建设单位项目管理部门领导",
-  //       PRONAME: "A区科创园",
-  //       ASSETLEADER: "固定资产投资主管领导",
-  //       BINDID: "47856a34-afa4-4a9b-ae28-ba450a4ab798",
-  //       ORGID: "d8ee92f8-c80f-4741-b92c-cbc60c91d754",
-  //       PROADDRESS: "内蒙古自治区呼和浩特市赛罕区黄合少镇南地村",
-  //       DESIGNER: "",
-  //       PROCESSDEFID: "obj_a48ef53d7a2f4492bf440174e32bef3a",
-  //       PROPIC: "",
-  //       CREATEDATE: 1679559863000,
-  //       ASSETLEADERID: "13088880005",
-  //       CEDATE: 1703260800000,
-  //       PROFILE: "",
-  //       ACCDATE: 1703260800000,
-  //       ID: "a0fb6df5-48e4-442f-8b9d-da5861c1bf41",
-  //     },
-  //   ],
-  // };
+  /*const resp = {
+    data: [
+      {
+        SUPERVISORID: "",
+        MAP: "40.763291,111.971932",
+        PROID: "HT6YXM-202303232023030010",
+        PROTYPE: "",
+        UPDATEDATE: 1679559863000,
+        SUPERVISOR: "",
+        DESIGNERID: "",
+        STCV: 800000,
+        PROOWNER: "六院本部/资产运营部/",
+        SURVEY: "",
+        UPDATEUSER: "13088880001",
+        SURVEYID: "",
+        APPENDIX: "",
+        PROCOST: 800000,
+        PRICELEADERID: "13088880004",
+        PRODEPTLEADERID: "13088880003",
+        PROLEADERID: "13088880002",
+        PROLEADER: "建设单位项目管理人员",
+        CONTRACTOR: "",
+        FLOORAREA: 2000,
+        CREATEUSER: "13088880001",
+        ISEND: 0,
+        RSTATUS: "1",
+        LEADERID: "13088880007",
+        PRICELEADER: "工程造价主管部门领导",
+        PROSTATUS: "1",
+        CBDATE: 1677600000000,
+        CONTRACTORID: "",
+        LEADER: "主要领导",
+        PRODEPTLEADER: "建设单位项目管理部门领导",
+        PRONAME: "A区科创园",
+        ASSETLEADER: "固定资产投资主管领导",
+        BINDID: "47856a34-afa4-4a9b-ae28-ba450a4ab798",
+        ORGID: "d8ee92f8-c80f-4741-b92c-cbc60c91d754",
+        PROADDRESS: "内蒙古自治区呼和浩特市赛罕区黄合少镇南地村",
+        DESIGNER: "",
+        PROCESSDEFID: "obj_a48ef53d7a2f4492bf440174e32bef3a",
+        PROPIC: "",
+        CREATEDATE: 1679559863000,
+        ASSETLEADERID: "13088880005",
+        CEDATE: 1703260800000,
+        PROFILE: "",
+        ACCDATE: 1703260800000,
+        ID: "a0fb6df5-48e4-442f-8b9d-da5861c1bf41",
+      },
+    ],
+  };*/
   return resp.data;
 };
 
 const loadCameraList = async () => {
   const resp = await axios(`./jd`, {
-    params: queryParams,
+    params: queryParams
   });
-  // const resp = {
-  //   data: {
-  //     code: 0,
-  //     rows: [
-  //       {
-  //         address: "A区-科创园南门内",
-  //         flvUrl:
-  //           "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000009_34020000001320000009.flv",
-  //         id: "2e627e9a-afe8-4065-9196-423467396401",
-  //         projectId: "HT6YXM-202303232023030010",
-  //         projectName: "A区科创园",
-  //       },
-  //       {
-  //         address: "A区科创园东门内",
-  //         flvUrl:
-  //           "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000008_34020000001320000008.flv",
-  //         id: "7ff7ba05-05e4-48e6-a43a-a0983ff1aa2b",
-  //         projectId: "HT6YXM-202303232023030010",
-  //         projectName: "A区科创园",
-  //       },
-  //       {
-  //         address: "A区科创园东塔吊东北角球机",
-  //         flvUrl:
-  //           "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000010_34020000001320000010.flv",
-  //         id: "e410e322-cceb-40b9-899b-4f3d2e8215eb",
-  //         projectId: "HT6YXM-202303232023030010",
-  //         projectName: "A区科创园",
-  //       },
-  //       {
-  //         address: "A区科创园东塔吊西南角球机",
-  //         flvUrl:
-  //           "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000011_34020000001320000011.flv",
-  //         id: "ff3e0079-068c-49f0-b1fe-3fa8544d91f2",
-  //         projectId: "HT6YXM-202303232023030010",
-  //         projectName: "A区科创园",
-  //       },
-  //     ],
-  //     total: 4,
-  //   },
-  // };
+  /*const resp = {
+    data: {
+      code: 0,
+      rows: [
+        {
+          address: "A区-科创园南门内",
+          flvUrl:
+            "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000009_34020000001320000009.flv",
+          id: "2e627e9a-afe8-4065-9196-423467396401",
+          projectId: "HT6YXM-202303232023030010",
+          projectName: "A区科创园",
+        },
+        {
+          address: "A区科创园东门内",
+          flvUrl:
+            "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000008_34020000001320000008.flv",
+          id: "7ff7ba05-05e4-48e6-a43a-a0983ff1aa2b",
+          projectId: "HT6YXM-202303232023030010",
+          projectName: "A区科创园",
+        },
+        {
+          address: "A区科创园东塔吊东北角球机",
+          flvUrl:
+            "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000010_34020000001320000010.flv",
+          id: "e410e322-cceb-40b9-899b-4f3d2e8215eb",
+          projectId: "HT6YXM-202303232023030010",
+          projectName: "A区科创园",
+        },
+        {
+          address: "A区科创园东塔吊西南角球机",
+          flvUrl:
+            "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000011_34020000001320000011.flv",
+          id: "ff3e0079-068c-49f0-b1fe-3fa8544d91f2",
+          projectId: "HT6YXM-202303232023030010",
+          projectName: "A区科创园",
+        },
+      ],
+      total: 4,
+    },
+  };*/
   cameraList.value = resp.data.rows;
   total.value = resp.data.total;
   // if (total.value === 0) {

vue.config.js

@@ -4,26 +4,26 @@ module.exports = defineConfig({
     plugins: [
       require("unplugin-element-plus/webpack")({
         // options
-      }),
-    ],
+      })
+    ]
   },
   devServer: {
     proxy: {
       "/dev-api": {
         target: "http://localhost:8000",
-        changeOrigin: true,
+        changeOrigin: true
       },
       "/api": {
         target: "http://81.68.90.198:8088",
         changeOrigin: true,
         pathRewrite: {
-          "^/api": "", // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 js把路径中的/api去掉
-        },
-      },
-    },
+          "^/api": "" // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 js把路径中的/api去掉
+        }
+      }
+    }
   },
   transpileDependencies: true,
   lintOnSave: false,
   publicPath: "./",
-  assetsDir: "../apps/com.awspaas.user.apps.cmp/screen",
+  assetsDir: "../apps/com.awspaas.user.apps.cmp/screen"
 });

yarn.lock

@@ -1438,6 +1438,11 @@
   resolved "https://registry.npmmirror.com/@vicons/fluent/-/fluent-0.12.0.tgz#7e9a39190114f7cb682a71dd166e7efec35e5e9c"
   integrity sha512-ATCiqPuiJ6RI5GBlD3BIpZ9Xw4MsCA4RpI5oR6MCti4quS4mX1Gp6N74FCzw7lgOj+80rV4HMKhZTVInwimpVQ==
 
+"@vicons/ionicons5@^0.12.0":
+  version "0.12.0"
+  resolved "https://registry.npmmirror.com/@vicons/ionicons5/-/ionicons5-0.12.0.tgz#c39fda04420dfae3b58053faf8aaf3555253299d"
+  integrity sha512-Iy1EUVRpX0WWxeu1VIReR1zsZLMc4fqpt223czR+Rpnrwu7pt46nbnC2ycO7ItI/uqDLJxnbcMC7FujKs9IfFA==
+
 "@vue/babel-helper-vue-jsx-merge-props@^1.4.0":
   version "1.4.0"
   resolved "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz#8d53a1e21347db8edbe54d339902583176de09f2"
@@ -3637,6 +3642,11 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+file-saver@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
+  integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
+
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"