大屏高度调整、优化界面布局

src/assets/styles/index.scss

@@ -453,3 +453,27 @@ aside {
   background-size: 100% 100%;
   cursor: pointer;
 }
+
+@keyframes slideLeft{
+  0% {
+    transform: translateX(-80%);
+  }
+  80% {
+    transform: translateX(92px);
+  }
+  80% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideRight {
+  0% {
+    transform: translateX(100%);
+  }
+  80% {
+    transform: translateX(-92px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}

src/components/Map/YztMap/index.vue

@@ -20,7 +20,7 @@ const emits = defineEmits(['update:drawing', 'selectGraphics']);
 const mapRef = ref(null);
 const mapState = reactive({
   center: [110.93154257997, 21.669064031332],
-  zoom: 7,
+  zoom: 7.9,
   minZoom: 6,
   maxZoom: 16,
   isThreeDimensional: false,

src/components/Map/index.vue

@@ -58,7 +58,7 @@ const height = ref('100%');
 
 const mapState = reactive({
   center: [110.93154257997, 21.669064031332],
-  zoom: 15,
+  zoom: 7.9,
   minZoom: 6,
   maxZoom: 20,
   isThreeDimensional: false,
@@ -253,7 +253,6 @@ const handlePointDetails = (data) => {
 const filterTd = (obj, dataType) => {
   let data = [];
   let tempData = {};
-  let content = '';
   let i = 0;
   for (let key in obj) {
     let keyLabel = pointDetailTemplate[dataType][key];
@@ -287,6 +286,10 @@ const filterTd = (obj, dataType) => {
   if (!!tempData && JSON.stringify(tempData) !== '{}') {
     data.push(tempData);
   }
+  debugger
+  if (data[data.length - 1].data && data[data.length - 1].data.length === 1 && data[data.length - 1].type === 'shortText') {
+    data[data.length - 1].data[1] = { label: '', value: '' };
+  }
   return data;
 };
 // 监听地图类型变化
@@ -329,19 +332,16 @@ const setMapZoom = (value) => {
   if (!map) return;
   if (value === 1) {
     map.setCenter([113.280637, 23.125178]);
-    map.setZoom(7);
+    map.setZoom(7.9);
   } else if (value === 2) {
     map.setCenter([110.93154257997, 21.6690640313328]);
-    map.setZoom(11);
+    map.setZoom(9.21);
   } else if (value === 3) {
     map.setCenter([110.93154257997, 21.669064031332]);
-    map.setZoom(13);
+    map.setZoom(11.38);
   } else if (value === 4) {
     map.setCenter([110.93154257997, 21.669064031332]);
-    map.setZoom(15);
-  } else if (value === 5) {
-    map.setCenter([110.93154257997, 21.669064031332]);
-    map.setZoom(18);
+    map.setZoom(12.83);
   }
 };
 
@@ -405,15 +405,14 @@ onUnmounted(() => {
   height: 100%;
   .zoom-text {
     position: absolute;
-    bottom: 0;
+    bottom: 120px;
     right: 170px;
     color: #eaf3fc;
     font-size: 25.73px;
-    font-family: 'SourceHanSansCN';
   }
   .right-tool {
     position: absolute;
-    bottom: 100px;
+    bottom: 160px;
     right: 175px;
     z-index: 2;
   }
@@ -437,14 +436,14 @@ onUnmounted(() => {
   :deep(.amap-scalecontrol) {
     left: unset !important;
     background-color: unset !important;
-    right: vw(170);
-    bottom: vw(0) !important;
+    right: 56px;
+    bottom: 17px !important;
   }
   :deep(.amap-scale-text) {
     text-align: left !important;
     padding-left: 20px;
     color: #eaf3fc;
-    font-size: vw(25.73);
+    font-size: vw(32);
     font-family: 'SourceHanSansCN';
   }
   :deep(.amap-scale-edgeleft),

src/components/Map/map.scss

@@ -40,20 +40,20 @@ $vh_base: 2520;
     display: flex;
     width: 100%;
     .td1 {
-      width: 50%;
+      width: 132.75px;
     }
     .td2 {
-      width: 50%;
+      width: 132.75px;
     }
   }
   .point-item2 {
     display: flex;
     width: 100%;
     .td1 {
-      width: 25%;
+      width: 132.75px;
     }
     .td2 {
-      width: 75%;
+      width: 398.25px;
     }
   }
   .td1 {

src/components/Map/quickZoom.vue

@@ -2,12 +2,11 @@
   <div class="flex">
     <div class="plusIcon" @click="addStep"></div>
     <div style="margin: 10px 0; position: relative">
-      <el-slider class="slider" v-model="step" :min="1" :max="5" vertical :show-tooltip="false" height="183px" @input="changeStep" />
-      <div v-show="step === 1" class="tooltip">省</div>
-      <div v-show="step === 2" class="tooltip" style="bottom: 30px">市</div>
-      <div v-show="step === 3" class="tooltip" style="bottom: 77px">区</div>
-      <div v-show="step === 4" class="tooltip" style="bottom: 123px">县</div>
-      <div v-show="step === 5" class="tooltip" style="bottom: 169px">镇</div>
+      <el-slider class="slider" v-model="step" :min="1" :max="4" vertical :show-tooltip="false" height="183px" @input="changeStep" />
+      <div v-show="step === 1" class="tooltip">市</div>
+      <div v-show="step === 2" class="tooltip" style="bottom: 30px">区/县</div>
+      <div v-show="step === 3" class="tooltip" style="bottom: 77px">镇/街道</div>
+      <div v-show="step === 4" class="tooltip" style="bottom: 123px">村/社区</div>
     </div>
     <div class="minusIcon" @click="reduceStep"></div>
   </div>
@@ -19,7 +18,7 @@ interface Props {
   zoom: number;
 }
 const props = withDefaults(defineProps<Props>(), {});
-const step = ref(2);
+const step = ref(1);
 watch(
   () => props.zoom,
   (zoom) => {
@@ -86,7 +85,7 @@ const reduceStep = () => {
   color: #fff;
   padding-left: 14px;
   padding-top: 4px;
-  font-size: 25.73px;
+  font-size: 32px;
   width: 63px;
   height: 33px;
   background: url('@/assets/images/map/marker.png') no-repeat;

src/components/TimeAxis/index.vue

@@ -191,7 +191,7 @@ const dialogClose = () => {
 
 // 拖拽的参数
 const dragState = reactive({
-  bottom: 100,
+  bottom: 180,
   left: 200,
   dragging: false,
   startX: 20,

src/types/components.d.ts

@@ -23,8 +23,6 @@ declare module 'vue' {
     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']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@@ -51,8 +49,6 @@ declare module 'vue' {
     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']
@@ -104,6 +100,7 @@ declare module 'vue' {
     VideoContainer: typeof import('./../components/HKVideo/video-container.vue')['default']
     VideoContainer2: typeof import('./../components/HKVideo/video-container2.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
+    YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
   export interface ComponentCustomProperties {

src/views/emergencyCommandMap/LeftSection/Communication.vue

@@ -260,6 +260,8 @@ const deleteItem = (item) => {
   position: relative;
   padding-top: 100px;
   padding-left: 60px;
+  animation-name: slideLeft;
+  animation-duration: 2s;
   .tabs {
     display: flex;
     .tab {

src/views/emergencyCommandMap/LeftSection/VideoMonitor.vue

@@ -202,6 +202,8 @@ const handleSave = () => {
   background: url('@/assets/images/video/videoBox1.png') no-repeat;
   background-size: 100% 100%;
   position: relative;
+  animation-name: slideLeft;
+  animation-duration: 1.5s;
   .video-list {
     display: flex;
     flex-wrap: wrap;

src/views/emergencyCommandMap/LeftSection/index.vue

@@ -277,8 +277,10 @@ onUnmounted(() => {
 .left-section {
   width: 1965px;
   height: 100%;
+  padding-bottom: 150px;
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
   font-size: 36px;
   margin-right: 65px;
   .weather-card {
@@ -290,6 +292,8 @@ onUnmounted(() => {
     align-items: center;
     margin-top: 35px;
     color: #fff;
+    animation-name: slideLeft;
+    animation-duration: 0.5s;
     .weather-item {
       width: 390px;
       font-size: 44px;
@@ -363,6 +367,8 @@ onUnmounted(() => {
     justify-content: center;
     align-items: center;
     position: relative;
+    animation-name: slideLeft;
+    animation-duration: 1s;
     .title {
       position: absolute;
       top: 12px;
@@ -528,15 +534,4 @@ onUnmounted(() => {
   background: url('@/assets/images/emergencyCommandMap/disasterInfo/line.png') no-repeat;
   background-size: 100% 100%;
 }
-@keyframes slide {
-  0% {
-    transform: translateX(-80%);
-  }
-  80% {
-    transform: translateX(92px);
-  }
-  80% {
-    transform: translateX(0);
-  }
-}
 </style>

src/views/emergencyCommandMap/MiddleSection.vue

@@ -21,7 +21,7 @@ const handleQuery1 = () => {
 <style lang="scss" scoped>
 .middle-section {
   flex: 1;
-  height: 2140px;
+  height: 100%;
   animation: slideAndFade 1.5s;
   position: relative;
 }

src/views/emergencyCommandMap/RightSection/JointDuty.vue

@@ -115,6 +115,8 @@ onMounted(() => {
   background: url('@/assets/images/emergencyCommandMap/duty/dutyBg.png') no-repeat;
   position: relative;
   color: #fff;
+  animation-name: slideRight;
+  animation-duration: 2s;
   .card-content {
     display: flex;
     flex-wrap: wrap;

src/views/emergencyCommandMap/RightSection/PublicOpinionSupervision.vue

@@ -42,6 +42,8 @@ const dataList = ref([
   position: relative;
   color: #fff;
   padding-top: 120px;
+  animation-name: slideRight;
+  animation-duration: 1.5s;
   .title {
     position: absolute;
     top: 6px;

src/views/emergencyCommandMap/RightSection/RightTop.vue

@@ -259,7 +259,8 @@ watch(
   background: url('@/assets/images/commandDynamic/dialog.png') no-repeat;
   position: relative;
   color: #fff;
-
+  animation-name: slideRight;
+  animation-duration: 1s;
   .card-content {
     display: flex;
     flex-wrap: wrap;

src/views/emergencyCommandMap/RightSection/index.vue

@@ -162,14 +162,18 @@ const updatePlan = (data: { eventId: string }) => {
   height: 100%;
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
   font-size: 36px;
   padding-top: 57px;
+  padding-bottom: 150px;
   margin-left: 65px;
   .task-header {
     display: flex;
     justify-content: space-around; /* 使按钮在div内均匀分布 */
     align-items: center; /* 使按钮垂直居中 */
     width: 100%;
+    animation-name: slideRight;
+    animation-duration: 0.5s;
     .task-item {
       display: flex;
       flex-direction: column;

src/views/emergencyCommandMap/index.vue

@@ -78,9 +78,9 @@ onUnmounted(() => {
     position: relative;
   }
   .dashboard-content {
-    padding: 0 81px 150px;
+    padding: 0 81px;
     display: flex;
-    height: calc(2560px - 228px - 150px);
+    height: calc(2560px - 228px);
     overflow: hidden;
   }
 }
@@ -96,7 +96,7 @@ onUnmounted(() => {
 
 .arrow-icon {
   position: absolute;
-  bottom: 100px;
+  bottom: 180px;
   left: 0;
   z-index: 9;
   width: 152px;
@@ -106,7 +106,7 @@ onUnmounted(() => {
 
 .arrow-icon2 {
   position: absolute;
-  bottom: 100px;
+  bottom: 180px;
   right: 0;
   z-index: 9;
   width: 152px;

src/views/globalMap/RightMenu/DrawTools.vue

@@ -346,7 +346,7 @@ const analysisSpatial = (data) => {
 .draw-tools-container {
   position: absolute;
   right: 340px;
-  bottom: 370px;
+  bottom: 460px;
   background-color: #304468;
   border-radius: 5px;
   display: flex;

src/views/globalMap/index.vue

@@ -196,7 +196,7 @@ provide('getDrawTool', getDrawTool);
   .tool-box {
     position: absolute;
     right: 340px;
-    bottom: 100px;
+    bottom: 180px;
     z-index: 10;
     color: #fff;
   }

src/views/globalMapPage/index.vue

@@ -8,7 +8,6 @@
       <FooterSection style="position: absolute; bottom: 0; left: 0" />
     </div>
   </div>
-<!--  <YMap :active-map="'satellite2'" />-->
 </template>
 
 <script lang="ts" setup name="globalMapPage">
@@ -21,12 +20,12 @@ let scale = ref({ scaleX: 1, scaleY: 1 });
 
 provide('containerScale', () => scale.value);
 onMounted(() => {
-  const a = autofit.init(
+  autofit.init(
     {
       dw: 8960,
       dh: 2520,
       el: '#dashboard-container',
-      resize: true,
+      resize: false,
       ignore: ['#aMap', '#YztMap']
     },
     false

src/views/routineCommandMap/LeftSection/index.vue

@@ -220,7 +220,10 @@ const initData = () => {
     { name: '巡检任务3', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
     { name: '巡检任务4', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
     { name: '巡检任务5', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
-    { name: '巡检任务6', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' }
+    { name: '巡检任务6', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
+    { name: '巡检任务7', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
+    { name: '巡检任务8', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
+    { name: '巡检任务9', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' }
   ];
 };
 // 加载完成事件
@@ -260,7 +263,7 @@ onMounted(() => {
     animation-duration: 0.5s; // 新增
   }
   &:nth-child(2) {
-    height: 667.5px;
+    height: 800px;
     animation-duration: 1s; // 新增
   }
   &:nth-child(3) {

src/views/routineCommandMap/MiddleSection.vue

@@ -25,7 +25,7 @@ const handleQuery2 = () => {
 <style lang="scss" scoped>
 .middle-section {
   flex: 1;
-  height: 2140px;
+  height: 100%;
   animation: slideAndFade 1.5s;
   position: relative;
 }

src/views/routineCommandMap/RightSection/index.vue

@@ -49,7 +49,6 @@ import KnowledgeDialog from '@/views/routineCommandMap/RightSection/KnowledgeDia
 import planManageDialog from '@/views/routineCommandMap/RightSection/planManageDialog.vue';
 import VideoMonitor from '@/views/emergencyCommandMap/LeftSection/VideoMonitor.vue';
 
-
 // 预案管理
 const planManageState = reactive({
   queryParams: {
@@ -123,6 +122,10 @@ onMounted(() => {
   flex-direction: column;
   font-size: 36px;
   margin-left: 65px;
+  :deep(.video-card) {
+    animation-name: slideRight;
+    animation-duration: 0.5s;
+  }
 }
 
 .card {
@@ -131,7 +134,7 @@ onMounted(() => {
   border-radius: 26px;
   padding: 46px 69px;
   margin-bottom: 69px;
-  animation-name: slide;
+  animation-name: slideRight;
 
   .card-header {
     width: 100%;
@@ -150,28 +153,16 @@ onMounted(() => {
   }
 
   &:nth-child(2) {
-    height: 593px;
+    height: 635px;
     animation-duration: 1s; // 新增
   }
 
   &:nth-child(3) {
-    height: 593px;
+    height: 635px;
     animation-duration: 1.5s; // 新增
   }
 }
 
-@keyframes slide {
-  0% {
-    transform: translateX(100%);
-  }
-  80% {
-    transform: translateX(-92px);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-
 .more {
   color: #1890ff;
   cursor: pointer;

src/views/routineCommandMap/index.vue

@@ -78,9 +78,9 @@ onUnmounted(() => {
     position: relative;
   }
   .dashboard-content {
-    padding: 60px 81px 150px;
+    padding: 60px 81px 0;
     display: flex;
-    height: calc(2560px - 207px - 150px);
+    height: calc(2560px - 228px);
     overflow: hidden;
   }
 }
@@ -96,7 +96,7 @@ onUnmounted(() => {
 
 .arrow-icon {
   position: absolute;
-  bottom: 100px;
+  bottom: 180px;
   left: 0;
   z-index: 9;
   width: 152px;
@@ -106,7 +106,7 @@ onUnmounted(() => {
 
 .arrow-icon2 {
   position: absolute;
-  bottom: 100px;
+  bottom: 180px;
   right: 0;
   z-index: 9;
   width: 152px;