实时标绘 历史记录样式

src/types/components.d.ts

@@ -45,6 +45,9 @@ 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']
@@ -57,12 +60,14 @@ declare module 'vue' {
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTableV2: typeof import('element-plus/es')['ElTableV2']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     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']
@@ -73,6 +78,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']
@@ -104,6 +110,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/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -72,21 +72,20 @@
       <div class="box1">
         <div class="box-item">
           <div class="btn">
-            <div class="cancel-icon"></div>
-            取消
-          </div>
-          <div class="line2"></div>
-          <div class="btn" @click="handleShowDialog">
-            <div class="save-icon"></div>
-            保存
+            <div class="merge-icon"></div>
+            合并
           </div>
         </div>
       </div>
-      <div>
-        <el-input v-model="queryParams.pattern_name" class="custom-input" placeholder="请输入标题关键字" @input="handleQuery" />
+      <div class="params-box">
+        <el-input v-model="queryParams.pattern_name" class="custom-input" placeholder="请输入" @input="handleQuery">
+          <template #prefix>
+            <el-icon class="el-input__icon"><search /></el-icon>
+          </template>
+        </el-input>
       </div>
       <div class="custom-table">
-        <div class="tr">
+        <div class="table-header">
           <div class="th">预案名称</div>
           <div class="th">操作</div>
         </div>
@@ -95,10 +94,33 @@
             <div>{{ item.pattern_name }}</div>
           </div>
           <div class="td td2">
-            <el-icon class="icon" @click="handleDelete(item.id)"><Delete /></el-icon>
-            <el-icon class="icon" @click="handleEdit(item.id)"><EditPen /></el-icon>
+            <div class="btn" @click="handleDelete(item.id)">
+              <div class="delete-icon"></div>
+              删除
+            </div>
+            <div class="line2"></div>
+            <div class="btn" @click="handleEdit(item.id)">
+              <div class="edit-icon"></div>
+              编辑
+            </div>
+            <div class="line2"></div>
+            <div class="btn">
+              <div class="share-icon"></div>
+              分享
+            </div>
           </div>
         </div>
+        <div class="footer">
+          <el-pagination
+            background
+            :hide-on-single-page="true"
+            layout="total, prev, pager, next"
+            :total="total"
+            :page-size="queryParams.pageSize"
+            :current-page="queryParams.page"
+            @current-change="getList"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -117,6 +139,7 @@ import { useHistory } from '@/hooks/useHistory';
 import { deletePatternById, getPatternInfo, getPatternList } from '@/api/globalMap/onlinePlotting';
 import TextEdit from '@/views/globalMap/RightMenu/OnlinePlotting/TextEdit.vue';
 import EditDialog from '@/views/globalMap/RightMenu/OnlinePlotting/EditDialog.vue';
+import { Search } from '@element-plus/icons-vue';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const getDrawTool = inject('getDrawTool');
@@ -493,7 +516,7 @@ const removeOverlayByIndex = (index: number) => {
 // 历史预案
 const queryParams = reactive({
   page: 1,
-  pageSize: 10,
+  pageSize: 9,
   pattern_name: ''
 });
 const patternList = ref([]);
@@ -512,7 +535,7 @@ const handleSubmit = () => {
     content: {}
   };
   getList();
-}
+};
 const handleQuery = () => {
   queryParams.page = 1;
   getList();
@@ -558,7 +581,7 @@ onMounted(() => {
   width: 1584px;
   height: 1772px;
   background: url('@/assets/images/map/rightMenu/onlinePlotting/dialog.png') no-repeat;
-  padding: 130px 20px 20px 50px;
+  padding: 130px 45px 20px 50px;
   font-size: 36px;
   position: relative;
   color: #ffffff;
@@ -636,40 +659,58 @@ onMounted(() => {
     display: flex;
     align-items: center;
   }
-  .btn {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    .revoke-icon {
-      width: 48px;
-      height: 50px;
-      margin-right: 10px;
-      background: url('@/assets/images/map/rightMenu/onlinePlotting/revoke.png') no-repeat;
-    }
-    .delete-icon {
-      width: 50px;
-      height: 50px;
-      margin-right: 10px;
-      background: url('@/assets/images/map/rightMenu/onlinePlotting/delete.png') no-repeat;
-    }
-    .cancel-icon {
-      width: 50px;
-      height: 50px;
-      margin-right: 10px;
-      background: url('@/assets/images/map/rightMenu/onlinePlotting/cancel.png') no-repeat;
-    }
-    .save-icon {
-      width: 46px;
-      height: 46px;
-      margin-right: 10px;
-      background: url('@/assets/images/map/rightMenu/onlinePlotting/save.png') no-repeat;
-    }
-    .setting-icon {
-      width: 48px;
-      height: 50px;
-      margin-right: 10px;
-      background: url('@/assets/images/map/rightMenu/onlinePlotting/setting.png') no-repeat;
-    }
+}
+.btn {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .revoke-icon {
+    width: 48px;
+    height: 50px;
+    margin-right: 10px;
+    background: url('@/assets/images/map/rightMenu/onlinePlotting/revoke.png') no-repeat;
+  }
+  .delete-icon {
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+    background: url('@/assets/images/map/rightMenu/onlinePlotting/delete.png') no-repeat;
+  }
+  .edit-icon {
+    width: 46px;
+    height: 46px;
+    margin-right: 10px;
+    background: url('@/assets/images/map/rightMenu/onlinePlotting/edit.png') no-repeat;
+  }
+  .cancel-icon {
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+    background: url('@/assets/images/map/rightMenu/onlinePlotting/cancel.png') no-repeat;
+  }
+  .save-icon {
+    width: 46px;
+    height: 46px;
+    margin-right: 10px;
+    background: url('@/assets/images/map/rightMenu/onlinePlotting/save.png') no-repeat;
+  }
+  .share-icon {
+    width: 46px;
+    height: 48px;
+    margin-right: 10px;
+    background: url('@/assets/images/map/rightMenu/onlinePlotting/share.png') no-repeat;
+  }
+  .setting-icon {
+    width: 48px;
+    height: 50px;
+    margin-right: 10px;
+    background: url('@/assets/images/map/rightMenu/onlinePlotting/setting.png') no-repeat;
+  }
+  .merge-icon {
+    width: 52px;
+    height: 52px;
+    margin-right: 10px;
+    background: url('@/assets/images/map/rightMenu/onlinePlotting/merge.png') no-repeat;
   }
 }
 .line2 {
@@ -678,6 +719,12 @@ onMounted(() => {
   background-color: #a7ccdf;
   margin: 0 70px;
 }
+.line2 {
+  width: 3px;
+  height: 24px;
+  background-color: #a7ccdf;
+  margin: 0 38px;
+}
 .tabs2 {
   width: 300px;
   min-width: 300px;
@@ -786,39 +833,47 @@ onMounted(() => {
   .custom-table {
     width: 100%;
     color: #000;
-    .tr {
+    .table-header {
       display: flex;
-      font-size: 32px;
+      font-size: 38px;
+      width: 100%;
+      background-color: #194ba0;
       .th {
-        background-color: #edf2fb;
-        padding: 9px 20px;
+        padding: 25px 30px;
         flex: 1;
-        border-left: 1px solid #dce0e7;
-        border-top: 1px solid #dce0e7;
-        border-bottom: 1px solid #dce0e7;
+        color: #edfaff;
         &:last-child {
           flex: unset;
-          width: 150px;
-          border-right: 1px solid #dce0e7;
+          width: 620px;
         }
       }
+    }
+    .tr {
+      display: flex;
+      font-size: 38px;
+      width: 1487px;
+      background: url('@/assets/images/map/rightMenu/onlinePlotting/tr.png') no-repeat;
+      background-size: 100% 100%;
+      margin-top: 10px;
+      &:hover {
+        background: url('@/assets/images/map/rightMenu/onlinePlotting/trActive.png') no-repeat;
+      }
       .td {
-        background-color: #ffffff;
-        padding: 9px 20px;
+        padding: 25px 30px;
+        color: #edfaff;
         flex: 1;
-        border-left: 1px solid #dce0e7;
-        border-top: 1px solid #dce0e7;
-        border-bottom: 1px solid #dce0e7;
-        &:last-child {
-          flex: unset;
-          width: 150px;
-          border-right: 1px solid #dce0e7;
-        }
         .icon {
           margin: 0 10px;
           cursor: pointer;
         }
       }
+      .td2 {
+        flex: unset;
+        width: 620px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     }
   }
 }
@@ -855,5 +910,48 @@ onMounted(() => {
     background: url('@/assets/images/inputIcon2.png') no-repeat;
   }
 }
+.params-box {
+  margin: 30px 0;
+}
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 30px;
+  padding-right: 40px;
+  :deep(.el-pagination__total) {
+    color: #a7ccdf;
+    font-size: 32px;
+  }
 
+  :deep(.el-pagination) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent;
+      border: none;
+      .el-icon {
+        font-size: 22px;
+        color: #a7ccdf;
+      }
+    }
+    .el-pager li {
+      width: 64px;
+      height: 64px;
+      line-height: 64px;
+      text-align: center;
+      font-size: 32px;
+      color: #a7ccdf;
+      background-color: #0e3064;
+      border: 1px solid #0c57a7;
+      margin: 0 6px;
+      &:hover {
+        background-color: #038dff;
+        border: 1px solid #038dff;
+      }
+    }
+    .el-pager li.is-active {
+      background-color: #038dff;
+      border: 1px solid #038dff;
+    }
+  }
+}
 </style>

src/views/globalMap/RightMenu/RainMonitor/RainChart.vue

@@ -3,7 +3,9 @@
     <div class="close-btn" @click="handleClose"></div>
     <div class="gradient-text title">24小时降水图</div>
     <div class="line">
-      <div class="title-box"><div class="gradient-text">{{ rainData.address }}</div></div>
+      <div class="title-box">
+        <div class="gradient-text">{{ rainData.address }}</div>
+      </div>
       <div class="time-box">
         <div class="text1">更新时间</div>
         <div class="text2" style="margin-left: 30px">{{ parseTime(updateTime, '{m}-{d}') }}</div>