Bladeren bron

调整按钮尺寸、字体大小

Hwf 7 maanden geleden
bovenliggende
commit
77dc073fd9

BIN
src/assets/images/common/btnDanger2.png


+ 12 - 0
src/assets/styles/index.scss

@@ -320,6 +320,18 @@ aside {
   cursor: pointer;
   font-size: 38px;
 }
+.common-btn-danger2{
+  width: 188px;
+  height: 56px;
+  background: url('@/assets/images/common/btnDanger2.png') no-repeat;
+  background-size: 100% 100%;
+  color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 38px;
+}
 .common-btn {
   width: 148px;
   height: 72px;

+ 27 - 2
src/components/Dialog/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="modelValue || customShow" :class="type === 'xs' ? 'common-dialog2' : 'common-dialog'" :style="{ width: computedWidth, height: computedHeight }">
+  <div v-if="modelValue || customShow" class="common-dialog" :style="{ width: computedWidth, height: computedHeight }">
     <div :class="type === 'xs' ? 'dialog-header2' : 'dialog-header'">
       <div class="dialog-title">
         {{ title ? title : '弹窗' }}
@@ -108,7 +108,8 @@ const confirm = () => {
   font-size: 38px;
   display: flex;
   flex-direction: column;
-  .dialog-header, dialog-header2 {
+  .dialog-header,
+  .dialog-header2 {
     position: relative;
     min-height: 175px;
     line-height: 135px;
@@ -146,6 +147,8 @@ const confirm = () => {
       cursor: pointer;
       display: block;
     }
+  }
+  .dialog-header {
     &::before {
       content: '';
       position: absolute;
@@ -167,6 +170,28 @@ const confirm = () => {
       background-size: 100% 100%;
     }
   }
+  .dialog-header2 {
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 19px;
+      left: 0;
+      width: 163px;
+      height: 69px;
+      background: url('@/assets/images/line.png') no-repeat;
+      background-size: 100%;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 50px;
+      left: 178px;
+      width: calc(100% - 178px);
+      height: 6.9px;
+      background-image: linear-gradient(to right, rgba(10, 154, 196, 1) 0%, rgba(10, 154, 196, 0) 100%);
+      background-size: 100% 100%;
+    }
+  }
   .el-form-item__label {
     font-size: 38px;
     color: #fff;

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

@@ -23,6 +23,7 @@ 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']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@@ -43,12 +44,17 @@ declare module 'vue' {
     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']
@@ -59,6 +65,7 @@ declare module 'vue' {
     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']
@@ -69,6 +76,7 @@ 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']

+ 1 - 1
src/utils/olMap/olMap.ts

@@ -127,7 +127,7 @@ export class olMap {
 
   // 请求接口获取地图信息
   getCapabilities(code) {
-    return axios.get(commonUrl + code + '?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities');
+    return axios.get(commonUrl + code + '?SERVICE=WMTS&REQUEST=GetCapabilities');
   }
 
   // 请求地图图片加载图层

+ 1 - 6
src/views/emergencyCommandMap/LeftSection/CloseCommand.vue

@@ -1,6 +1,6 @@
 <template>
   <Dialog
-    v-model="show"
+    custom-show
     :type="props.flag ? 'xs' : 'sm'"
     :title="title"
     confirm-text="结束指挥"
@@ -57,11 +57,7 @@ const props = withDefaults(defineProps<Props>(), {
   title: ''
 });
 
-const show = ref(false);
 const emits = defineEmits(['update:modelValue', 'closeEvent']);
-watch(show, () => {
-  emits('update:modelValue', show.value);
-});
 // 表单初始数据
 const initFormData = {
   event_title: '', // 事件标题
@@ -124,7 +120,6 @@ watch(
         eventFormRef.value?.resetFields();
       }
     }
-    show.value = newVal;
   },
   {
     immediate: true

+ 1 - 1
src/views/emergencyCommandMap/LeftSection/VideoMonitor.vue

@@ -48,7 +48,7 @@
           </div>
           <div class="flex" style="flex-direction: column; align-items: center">
             <div class="common-btn-primary3" @click="handleSave">保存</div>
-            <div class="common-btn-danger" @click="handleCancel">取消</div>
+            <div class="common-btn-danger2" @click="handleCancel">取消</div>
           </div>
         </div>
       </div>

+ 11 - 3
src/views/emergencyCommandMap/LeftSection/index.vue

@@ -45,7 +45,7 @@
             <div class="text-box">
               <div class="text1">灾害事件</div>
               <div v-if="eventData.event_title" class="text2">{{ eventData.event_title }}</div>
-              <div v-else class="gradient-text" style="font-size: 36px; cursor: pointer">关联事件</div>
+              <div v-else class="gradient-text text3">关联事件</div>
             </div>
           </div>
           <div class="event-item">
@@ -212,7 +212,8 @@ function getWindDirection(angle) {
   return directions[index];
 }
 
-const fetchEventDetail = (id: string) => {
+const fetchEventDetail = () => {
+  const id = eventId.value;
   console.log('fetchEventDetail');
   if (id && id !== eventData.value.event_id) {
     // 如果有 id,则正常获取事件详情
@@ -240,7 +241,7 @@ watch(closeCommandState.show, (newVal) => {
     // 对话框关闭时,保持 eventId 的状态
     eventId.value = closeCommandState.eventId;
     // 保持 eventData 的状态
-    fetchEventDetail(eventId.value);
+    fetchEventDetail();
   }
 });
 const updateTime = () => {
@@ -453,6 +454,13 @@ onUnmounted(() => {
             font-size: 36px;
             line-height: 36px;
             color: #ffffff;
+            margin-top: 10px;
+          }
+          .text3 {
+            font-size: 36px;
+            cursor: pointer;
+            font-family: 'PingFang SC sans-serif';
+            margin-top: 10px;
           }
         }
       }

+ 1 - 1
src/views/emergencyCommandMap/RightSection/SelectPlan.vue

@@ -10,7 +10,7 @@
     </div>
     <template #footer>
       <span class="dialog-footer">
-        <button class="custom-button" @click="startSelectedPlan">确定并启动预案</button>
+        <button class="com" @click="startSelectedPlan">确定并启动预案</button>
         <button class="custom-button" @click="hideDialog">取消</button>
       </span>
     </template>

+ 4 - 10
src/views/emergencyCommandMap/RightSection/StartPlan.vue

@@ -15,8 +15,8 @@
       >
         <el-option v-for="level in responseLevels" :key="level.value" :label="level.name" :value="level.value"></el-option>
       </el-select>
-      <div class="btn" @click="onStartPlan">启动预案</div>
-      <div class="btn" @click="onTaskDelivery">预案任务下发</div>
+      <div class="common-btn-primary2" @click="onStartPlan">启动预案</div>
+      <div class="common-btn-primary2" @click="onTaskDelivery">预案任务下发</div>
     </div>
     <div class="title-box">{{ planTitle }}</div>
 
@@ -269,14 +269,8 @@ watch(
     align-items: center;
     padding: 15px 60px;
     border-bottom: 6px solid rgba(50, 132, 251, 0.4);
-    .btn {
-      width: 440px;
-      height: 120px;
-      background: url('@/assets/images/plan/btn.png') no-repeat;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    .common-btn-primary2 {
+      margin-left: 40px;
     }
   }
   .title-box {

+ 12 - 6
src/views/globalMap/RightMenu/ReservoirMonitor.vue

@@ -39,10 +39,8 @@
       <div class="detail-container">
         <div class="flex">
           <div class="info-header">
-            <div class="gradient-text info-title">{{ selectRow.name }}</div>
-            <div class="gradient-text info-title">{{ selectRow.address }}</div>
+            <div class="gradient-text info-title">{{ selectRow.name }}{{ selectRow.address }}</div>
           </div>
-
         </div>
         <div class="flex" style="justify-content: space-between">
           <div class="flex">
@@ -257,7 +255,8 @@ const getVideoList = () => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  height: 1009px;
+  height: 100%;
+  margin-left: 20px;
   .video-box {
     margin-top: 30px;
     height: 900px;
@@ -266,11 +265,10 @@ const getVideoList = () => {
   }
 }
 .flex-box2 {
-  height: 54px;
   background: url('@/assets/images/map/rightMenu/titleBox2.png') no-repeat;
+  background-size: 372px 54px;
   padding-left: 65px;
   display: flex;
-  align-items: center;
   .title2 {
     font-size: 44px;
     flex-shrink: 0;
@@ -437,10 +435,18 @@ const getVideoList = () => {
 }
 .info-header {
   width: 100%;
+  max-width: 1200px;
   height: 56px;
   padding-left: 50px;
   background: url(@/assets/images/map/rightMenu/titleBox1.png) no-repeat;
   background-size: 322px 56px;
   background-position: bottom left;
+  .info-title {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 44px;
+  }
 }
 </style>

+ 4 - 1
src/views/globalMap/RightMenu/RiverMonitor.vue

@@ -34,7 +34,7 @@
       </div>
     </div>
   </div>
-  <Dialog v-model="showDialog" type="lg" title="河道监测" hide-footer>
+  <Dialog v-model="showDialog" type="xl" title="河道监测" hide-footer>
     <div class="flex">
       <div class="detail-container">
         <div class="flex">
@@ -231,6 +231,9 @@ const handleShowDialog = (row) => {
       height: 56px;
       padding-left: 50px;
       background: url(@/assets/images/map/rightMenu/titleBox1.png) no-repeat;
+      .info-title {
+        font-size: 44px;
+      }
     }
     .info-content {
       padding: 0 37px 26px 37px;