Bläddra i källkod

界面调整优化

Hwf 8 månader sedan
förälder
incheckning
afbbe0f1f1

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 0 - 0
public/lib/mapbox/js/threebox.min.js


+ 27 - 12
src/components/HKVideo/index.vue

@@ -79,20 +79,35 @@ const onHKPlayError = async () => {
   isPlaying.value = false;
 };
 
-const videoPlayer = ref(null);
-
+let videoPlayer = ref(null);
+watch(
+  () => props.dot_data,
+  () => {
+    if (props.autoplay) {
+      play_now();
+    } else {
+      if (!!videoPlayer.value) {
+        videoPlayer.value.stop();
+      }
+      posterVisible.value = true;
+      errBKVisible.value = false;
+      isPlaying.value = false;
+    }
+  },
+  {
+    deep: true
+  }
+);
 const play_now = async () => {
   console.log('play_now');
-  if (!isPlaying.value) {
-    posterVisible.value = false;
-    errBKVisible.value = false;
-    isPlaying.value = true;
-    // 视频监控数据
-    getVideoUrlById(props.dot_data.video_code).then((res) => {
-      wsUrl.value = res.data;
-      videoPlayer.value.play(wsUrl.value);
-    });
-  }
+  posterVisible.value = false;
+  errBKVisible.value = false;
+  isPlaying.value = true;
+  // 视频监控数据
+  getVideoUrlById(props.dot_data.video_code).then((res) => {
+    wsUrl.value = res.data;
+    videoPlayer.value.play(wsUrl.value);
+  });
 };
 
 const stop_now = async () => {

+ 7 - 1
src/components/Map/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="containerRef" class="map-container">
-    <div id="aMap" class="map-container2" :style="{ width: width, height: height }"></div>
+    <div id="aMap" class="map-container2" :style="{ width: width, height: height, transform: 'scale(' + inverseScale.inverseScaleX + ', ' + inverseScale.inverseScaleY + ')', transformOrigin: '0 0' }"></div>
     <!-- 右下工具  -->
     <div v-show="mapState.showScale" class="zoom-text">{{ mapState.zoom }}级</div>
     <div class="right-tool">
@@ -501,7 +501,13 @@ defineExpose({
   getMapUtils,
   getPlaceSearch
 });
+let inverseScale = ref({
+  inverseScaleX: 1,
+  inverseScaleY: 1
+});
 const handleResize = () => {
+  inverseScale.value.inverseScaleX = 1 / containerScale().scaleX;
+  inverseScale.value.inverseScaleY = 1 / containerScale().scaleY;
   const containerWidth = containerRef.value.clientWidth * containerScale().scaleX;
   const containerHeight = containerRef.value.clientHeight * containerScale().scaleY;
   width.value = containerWidth + 'px';

+ 2 - 1
src/components/Map/map.scss

@@ -77,7 +77,7 @@ $vh_base: 2520;
     right: vw(60);
     width: vw(32);
     height: vw(32);
-    background: url('@/assets/images/close.png') no-repeat;
+    background: url('@/assets/images/common/close.png') no-repeat;
     background-size: 100% 100%;
     cursor: pointer;
   }
@@ -88,6 +88,7 @@ $vh_base: 2520;
     background: url('@/assets/images/line.png') no-repeat;
     background-size: vw(163) vw(69);
     background-position: bottom left;
+    padding-left: vw(25);
     &::before {
       content: "";
       width: vw(1309);

+ 3 - 2
src/components/Step/index.vue

@@ -47,11 +47,12 @@ const props = defineProps({
       }
       .step-time {
         position: absolute;
-        top: 30px;
+        top: 60px;
         left: 20px;
         font-size: 38px;
-        color: rgba(0, 0, 0, 0.65);
+        color: #ffffff;
         width: 100%;
+        white-space: nowrap;
       }
     }
   }

+ 9 - 5
src/hooks/AMap/useAMap.ts

@@ -282,6 +282,7 @@ export function useAMap(options) {
     movePolyline?.remove();
     movePassedPolyline?.remove();
     moveMarker?.remove();
+    let index = 0;
     const icon = new AMap.Icon({
       size: new AMap.Size(26, 52),
       image: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png'
@@ -315,11 +316,14 @@ export function useAMap(options) {
     });
 
     moveMarker.on('moveend', function (e) {
-      timerId = setTimeout(() => {
-        movePolyline.remove();
-        movePassedPolyline.remove();
-        moveMarker.remove();
-      }, 5000);
+      index++;
+      if (index === lineArr.length - 1) {
+        timerId = setTimeout(() => {
+          movePolyline.remove();
+          movePassedPolyline.remove();
+          moveMarker.remove();
+        }, 5000);
+      }
     });
     moveMarker.moveAlong(lineArr, {
       // 每一段的时长

+ 0 - 17
src/types/components.d.ts

@@ -21,7 +21,6 @@ declare module 'vue' {
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
@@ -38,34 +37,22 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
     ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
-    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
@@ -76,7 +63,6 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']
@@ -113,7 +99,4 @@ declare module 'vue' {
     YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
 }

+ 15 - 3
src/views/emergencyCommandMap/LeftSection/VideoMonitor.vue

@@ -11,7 +11,7 @@
       </div>
     </div>
   </div>
-  <Dialog v-model="showListDialog" type="xl" title="视频监控" class="dialog" hide-footer @close="reset">
+  <Dialog v-if="showListDialog" v-model="showListDialog" type="xl" title="视频监控" class="dialog" hide-footer @close="reset">
     <div class="search-box">
       <div class="box-left">
         <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="200px" label-position="left">
@@ -71,7 +71,7 @@
             <div :class="item.sort ? 'common-checked-active' : 'common-checked'"></div>
             <div class="img"></div>
           </div>
-          <HKVideo v-else :dot_data="item" />
+          <HKVideo v-else :dot_data="item" autoplay />
         </div>
       </div>
     </div>
@@ -87,12 +87,13 @@
     </div>
     <div id="container" style="display: none"></div>
   </Dialog>
-  <div v-if="showTip" class="danger-tip">首页视频数量已达6个上限,如需继续操作请先取消已选择视频。</div>
+  <div v-if="showTip" class="danger-tip" :style="{ zIndex: zIndex }">首页视频数量已达6个上限,如需继续操作请先取消已选择视频。</div>
 </template>
 
 <script lang="ts" setup name="VideoMonitor">
 import { getEmergencyVideoCata, getUserVideoPoints, getVideoListByUser, updateUserVideoPoints } from '@/api/videoMonitor';
 import { deepClone } from '@/utils';
+import useAppStore from '@/store/modules/app';
 
 const props = defineProps({
   longitude: String,
@@ -136,6 +137,17 @@ let selectData = ref([]);
 let editData = ref([]);
 let dialogListData = ref([]);
 let showTip = ref(false);
+const appStore = useAppStore();
+let zIndex = ref(999);
+watch(
+  showTip,
+  () => {
+    if (showTip.value) {
+      zIndex.value = appStore.getZIndex();
+    }
+  },
+  { immediate: true }
+);
 const showVideoMonitorList = () => {
   getList();
   showListDialog.value = true;

+ 2 - 2
src/views/emergencyCommandMap/index.vue

@@ -63,7 +63,7 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .dashboard-container {
   width: 8960px;
-  height: 2560px;
+  height: 2520px;
   font-size: 36px;
   font-family: 'PingFang SC', sans-serif;
   display: flex;
@@ -78,7 +78,7 @@ onUnmounted(() => {
   .dashboard-content {
     padding: 0 81px;
     display: flex;
-    height: calc(2560px - 228px);
+    height: calc(2520px - 228px);
     overflow: hidden;
   }
 }

+ 3 - 8
src/views/globalMap/RightMenu/Helicopter.vue

@@ -12,20 +12,15 @@
         <div class="btn" @click="handleCancel">取消</div>
       </div>
     </div>
-    <div class="flex-container">
-      <div class="text-item">直升机</div>
-      <!--      <div class="button-item common-btn-primary2 edit-icon" style="margin-top: -20px">全部播放</div>-->
-    </div>
     <div class="custom-table">
       <div class="th">
         <div class="td">直升机</div>
-        <div class="td">操作</div>
+        <div class="td" style="width: 220px; flex: unset">操作</div>
       </div>
       <div class="table-content">
         <div v-for="(item, index) in dataList" :key="item.id" class="tr">
           <div class="td">{{ item.helicopter_name }}</div>
-          <div class="td">{{ item.position }}</div>
-          <div class="td">
+          <div class="td" style="width: 220px; flex: unset">
             <div class="text" @click="handleConnect(index, item)">连线</div>
             <!--            <div class="text" @click="handleCollaborate(index, item)">协同</div>-->
             <div class="text" @click="handleTrack(item)">轨迹</div>
@@ -187,7 +182,7 @@ onMounted(() => {
 }
 .text {
   font-size: 38px;
-  color: #247dff;
+  color: #00e8ff;
   margin-right: 20px;
   &:last-child {
     margin-right: 0;

+ 5 - 5
src/views/globalMap/RightMenu/KeyVehicles.vue

@@ -11,21 +11,21 @@
         <div class="btn" @click="handleCancel">取消</div>
       </div>
     </div>
-    <div>两客一危一重货</div>
     <div class="custom-table">
       <div class="th">
         <div class="td">车牌号</div>
         <div class="td">报警标识</div>
         <div class="td">车辆类型</div>
-        <div class="td">操作</div>
+        <div class="td">GPS定位时间</div>
+        <div class="td" style="width: 330px; flex: unset">操作</div>
       </div>
       <div class="table-content">
         <div v-for="(item, index) in dataList" :key="item.id" class="tr">
           <div class="td">{{ item.vehicle_no }}</div>
           <div class="td">{{ item.alarm_flag }}</div>
           <div class="td">{{ item.vehicle_type }}</div>
-          <div class="td">{{ item.position }}</div>
-          <div class="td">
+          <div class="td">{{ parseTime(item.gpsDate) }}</div>
+          <div class="td" style="width: 330px; flex: unset">
             <div class="text" @click="handleConnect(index, item)">连线</div>
             <div class="text" size="small" @click="handleCollaborate(index, item)">协同</div>
             <div class="text" size="small" @click="handleTrack(item)">轨迹</div>
@@ -197,7 +197,7 @@ onMounted(() => {
 }
 .text {
   font-size: 38px;
-  color: #247dff;
+  color: #00e8ff;
   margin-right: 20px;
   &:last-child {
     margin-right: 0;

+ 3 - 8
src/views/globalMap/RightMenu/MobileCommandVehicle.vue

@@ -12,20 +12,15 @@
         <div class="btn" @click="handleCancel">取消</div>
       </div>
     </div>
-    <div class="flex-container">
-      <div class="text-item">移动指挥车</div>
-<!--      <div class="button-item common-btn-primary2 edit-icon" style="margin-top: -20px">全部播放</div>-->
-    </div>
     <div class="custom-table">
       <div class="th">
         <div class="td">移动指挥车</div>
-        <div class="td">操作</div>
+        <div class="td" style="width: 220px; flex: unset">操作</div>
       </div>
       <div class="table-content">
         <div v-for="(item, index) in dataList" :key="item.id" class="tr">
           <div class="td">{{ item.name }}</div>
-          <div class="td">{{ item.position }}</div>
-          <div class="td">
+          <div class="td" style="width: 220px; flex: unset">
             <div class="text" @click="handleConnect(index, item)">连线</div>
             <!--            <div class="text" @click="handleCollaborate(index, item)">协同</div>-->
             <div class="text" @click="handleTrack(item)">轨迹</div>
@@ -187,7 +182,7 @@ onMounted(() => {
 }
 .text {
   font-size: 38px;
-  color: #247dff;
+  color: #00e8ff;
   margin-right: 20px;
   &:last-child {
     margin-right: 0;

+ 3 - 4
src/views/globalMap/RightMenu/MobilePlatform.vue

@@ -13,20 +13,19 @@
       </div>
     </div>
     <!--    </div>-->
-    <div>手机工作台</div>
     <div class="custom-table">
       <div class="th">
         <div class="td">姓名</div>
         <div class="td">工作单位</div>
         <div class="td">职务</div>
-        <div class="td">操作</div>
+        <div class="td" style="width: 330px; flex: unset">操作</div>
       </div>
       <div class="table-content">
         <div v-for="(item, index) in dataList" :key="item.id" class="tr">
           <div class="td">{{ item.name }}</div>
           <div class="td">{{ item.work_unit }}</div>
           <div class="td">{{ item.position }}</div>
-          <div class="td">
+          <div class="td" style="width: 330px; flex: unset">
             <div class="text" @click="handleConnect(index, item)">连线</div>
             <div class="text" @click="handleCollaborate(index, item)">协同</div>
             <div class="text" @click="handleTrack(item)">轨迹</div>
@@ -188,7 +187,7 @@ onMounted(() => {
 }
 .text {
   font-size: 38px;
-  color: #247dff;
+  color: #00e8ff;
   margin-right: 20px;
   &:last-child {
     margin-right: 0;

+ 3 - 4
src/views/globalMap/RightMenu/MobileUnmannedVehicle.vue

@@ -19,13 +19,12 @@
     <div class="custom-table">
       <div class="th">
         <div class="td">机动无人机</div>
-        <div class="td">操作</div>
+        <div class="td" style="width: 220px; flex: unset">操作</div>
       </div>
       <div class="table-content">
         <div v-for="(item, index) in dataList" :key="item.id" class="tr">
           <div class="td">{{ item.drone_name }}</div>
-          <div class="td">{{ item.position }}</div>
-          <div class="td">
+          <div class="td" style="width: 220px; flex: unset">
             <div class="text" @click="handleConnect(index, item)">视频</div>
 <!--            <div class="text" @click="handleCollaborate(index, item)">协同</div>-->
             <div class="text" @click="handleTrack(item)">轨迹</div>
@@ -197,7 +196,7 @@ onMounted(() => {
 }
 .text {
   font-size: 38px;
-  color: #247dff;
+  color: #00e8ff;
   margin-right: 20px;
   &:last-child {
     margin-right: 0;

+ 3 - 4
src/views/globalMap/RightMenu/SatellitePhone.vue

@@ -11,18 +11,17 @@
         <div class="btn" @click="handleCancel">取消</div>
       </div>
     </div>
-    <div>卫星电话</div>
     <div class="custom-table">
       <div class="th">
         <div class="td">全部</div>
         <div class="td">名称</div>
-        <div class="td">操作</div>
+        <div class="td" style="width: 330px; flex: unset">操作</div>
       </div>
       <div class="table-content">
         <div v-for="(item, index) in dataList" :key="item.id" class="tr">
           <div class="td">{{ item.name }}</div>
           <div class="td">{{ item.unit_name }}</div>
-          <div class="td">
+          <div class="td" style="width: 330px; flex: unset">
             <div class="text" @click="handleConnect(index, item)">连线</div>
             <div class="text" size="small" @click="handleCollaborate(index, item)">电话</div>
             <div class="text" size="small" @click="handleTrack(item)">轨迹</div>
@@ -190,7 +189,7 @@ onMounted(() => {
 }
 .text {
   font-size: 38px;
-  color: #247dff;
+  color: #00e8ff;
   margin-right: 20px;
   &:last-child {
     margin-right: 0;

+ 2 - 2
src/views/globalMapPage/index.vue

@@ -40,7 +40,7 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .dashboard-container {
   width: 8960px;
-  height: 2560px;
+  height: 2520px;
   font-size: 36px;
   font-family: 'PingFang SC', sans-serif;
   position: relative;
@@ -55,7 +55,7 @@ onUnmounted(() => {
   }
   .dashboard-content {
     display: flex;
-    height: calc(2560px - 228px);
+    height: calc(2520px - 228px);
     overflow: hidden;
   }
 }

+ 14 - 3
src/views/routineCommandMap/RightSection/EventReport/EventManage.vue

@@ -166,7 +166,19 @@
         </div>
         <div class="td">{{ item.event_time }}</div>
         <div class="td">
-          <div class="common-btn2" @click="enterCommand(item)">进入指挥</div>
+          <div v-if="item.event_status === '0'" class="btn-box" @click="enterCommand(item)">
+            <i class="start-icon" />
+            <div class="gradient-text3">开始指挥</div>
+          </div>
+          <div v-else-if="item.event_status === '1'" class="btn-box" @click="enterCommand(item)">
+            <i class="start-icon" />
+            <div class="gradient-text3">进入指挥</div>
+          </div>
+          <div v-else-if="['2', '3'].includes(item.event_status)" class="btn-box">
+            <i class="record-icon" />
+            <div class="gradient-text3">指挥记录</div>
+          </div>
+<!--          <div class="common-btn2" @click="enterCommand(item)">进入指挥</div>-->
           <!--          <div class="common-btn2" style="margin-left: 20px" @click="handleClose(item)">关闭事件</div>-->
         </div>
       </div>
@@ -191,10 +203,9 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, toRefs, onMounted } from 'vue';
+import { ref, reactive, toRefs } from 'vue';
 import { getEvent } from '@/api/duty/eventing';
 
-import EventEditDialog from '../../eventing/EventEditDialog.vue';
 import CloseEventDialog from '../../eventing/CloseEventDialog.vue';
 const proxy = getCurrentInstance()?.proxy;
 const { mm_event_type, mm_event_level, mm_event_state, region } = toRefs<any>(

+ 2 - 2
src/views/routineCommandMap/index.vue

@@ -64,7 +64,7 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .dashboard-container {
   width: 8960px;
-  height: 2560px;
+  height: 2520px;
   font-size: 36px;
   display: flex;
   justify-content: center;
@@ -78,7 +78,7 @@ onUnmounted(() => {
   .dashboard-content {
     padding: 60px 81px 0;
     display: flex;
-    height: calc(2560px - 228px);
+    height: calc(2520px - 228px);
     overflow: hidden;
   }
 }

Vissa filer visades inte eftersom för många filer har ändrats