ソースを参照

修改样式、卫星电话

hmm 9 ヶ月 前
コミット
e9cadfe0d9

+ 9 - 0
src/api/globalMap/SatellitePhone.ts

@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+// 列表信息
+export const getSatellitePhoneList = (data) => {
+  return request({
+    url: '/api/gateway/v2/get_satellite_phone_info',
+    method: 'post',
+    data: data
+  });
+};

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

@@ -20,7 +20,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']
@@ -42,28 +41,19 @@ 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']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    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']
@@ -74,7 +64,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']
@@ -107,10 +96,6 @@ 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 {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog ref="dialogRef" v-model="isDialogVisible" :title="dialogTitle" width="900px" append-to-body @close="handleCloseDialog">
+  <Dialog v-model="isDialogVisible" type="lg" ref="dialogRef" title="预案任务下发" @confirm="confirmRegister" @close="handleCloseDialog">
     <!-- 预案选择器 -->
     <div class="plan-selector">
       <label for="plan-select">预案名称:</label>
@@ -14,7 +14,7 @@
         <button class="custom-button" @click="hideDialog">取消</button>
       </span>
     </template>
-  </el-dialog>
+  </Dialog>
 </template>
 <script lang="ts" setup>
 import { listPlan, launchPlan } from '@/api/duty/eventing';

+ 179 - 0
src/views/globalMap/RightMenu/KeyVehicles.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="menu-content">
+    <div class="gradient-text title">两客一危一重货</div>
+    <div class="box2">
+      <div class="box-left">
+        <el-input v-model="queryParams.keywords" class="custom-input" placeholder="搜索" style="width: 600px" @input="initData">
+          <template #prefix>
+            <el-icon class="el-input__icon"><search /></el-icon>
+          </template>
+        </el-input>
+        <el-button class="btn" @click="handleCancel">取消</el-button>
+      </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>
+      <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">
+            <el-button type="text" size="small" @click="handleConnect(index, item)">连线</el-button>
+            <el-button type="text" size="small" @click="handleCollaborate(index, item)">协同</el-button>
+            <el-button type="text" size="small" @click="handleTrack(item)">轨迹</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Search } from '@element-plus/icons-vue';
+import { getMobileWorkstationList } from '@/api/globalMap/MobilePlatform';
+import { onMounted, reactive } from 'vue';
+// 数据列表,直接定义为数组
+const dataList = reactive([]);
+//入参
+const queryParams = reactive({
+  keywords: ''
+});
+//调接口
+const initData = () => {
+  getMobileWorkstationList({
+    query: {
+      keywords: queryParams.keywords
+    }
+  }).then((res) => {
+    if (res.code === 0 && Array.isArray(res.rows)) {
+      dataList.splice(0, dataList.length, ...res.rows); // 使用 splice 替换数组内容,保持响应性
+    } else {
+      console.error('Invalid response from server:', res);
+      // 可以选择清空数据列表或显示错误消息
+      dataList.splice(0, dataList.length); // 清空数据列表
+    }
+  });
+};
+
+// 取消按钮的逻辑,搜索框清空并重新加载数据
+const handleCancel = () => {
+  queryParams.keywords = '';
+  initData();
+};
+//调用函数
+onMounted(() => {
+  initData();
+});
+</script>
+
+<style lang="scss" scoped>
+.menu-content {
+  width: 1584px;
+  height: 2066px;
+  background: url('@/assets/images/map/rightMenu/potentialFloodHazard/dialog.png') no-repeat;
+  padding: 130px 30px 20px 40px;
+  font-size: 36px;
+  position: relative;
+  color: #ffffff;
+}
+.title {
+  font-size: 60px;
+  position: absolute;
+  top: 30px;
+  left: 160px;
+}
+.box2 {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-top: 30px;
+  margin-bottom: 20px;
+
+  .box-left {
+    display: flex;
+
+    .btn {
+      width: 140px;
+      height: 40px;
+      background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      margin-left: 20px;
+      color: #ffffff;
+      font-size: 32px;
+    }
+  }
+}
+
+.custom-input {
+  height: 40px;
+  line-height: 40px;
+}
+
+.custom-table {
+  width: 100%;
+  height: 1030px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  .table-content {
+    height: 880px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .th {
+    width: 100%;
+    height: 151px;
+    background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+  }
+  .tr {
+    width: 100%;
+    height: 139px;
+    background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    padding-right: 20px;
+    &:hover {
+      background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .td {
+    flex: 1;
+    color: #edfaff;
+    font-size: 38px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+  .td-text {
+    /* 设置字体透明 */
+    color: transparent;
+    /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
+    -webkit-background-clip: text;
+    /* 非Webkit内核浏览器需要使用标准前缀 */
+    background-clip: text;
+    font-family: 'YouSheBiaoTiHei';
+    /* 设置线性渐变,从红色渐变到蓝色 */
+    background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
+    font-size: 48px;
+  }
+  .text-green {
+    background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
+  }
+  .text-danger {
+    background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
+  }
+}
+</style>

+ 180 - 0
src/views/globalMap/RightMenu/SatellitePhone.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="menu-content">
+    <div class="gradient-text title">卫星电话</div>
+    <div class="box2">
+      <div class="box-left">
+        <el-input v-model="queryParams.keywords" class="custom-input" placeholder="搜索" style="width: 600px" @input="initData">
+          <template #prefix>
+            <el-icon class="el-input__icon"><search /></el-icon>
+          </template>
+        </el-input>
+        <el-button class="btn" @click="handleCancel">取消</el-button>
+      </div>
+    </div>
+    <div>卫星电话</div>
+    <div class="custom-table">
+      <div class="th">
+        <div class="td">全部</div>
+        <div class="td">名称</div>
+        <div class="td">操作</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">
+            <el-button type="text" size="small" @click="handleConnect(index, item)">连线</el-button>
+            <el-button type="text" size="small" @click="handleCollaborate(index, item)">电话</el-button>
+            <el-button type="text" size="small" @click="handleTrack(item)">轨迹</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Search } from '@element-plus/icons-vue';
+
+import { onMounted, reactive } from 'vue';
+import { getSatellitePhoneList } from "@/api/globalMap/SatellitePhone";
+// 数据列表,直接定义为数组
+const dataList = reactive([]);
+//入参
+const queryParams = reactive({
+  keywords: '',
+  unit_name: ''
+});
+//调接口
+const initData = () => {
+  getSatellitePhoneList({
+    query: {
+      keywords: queryParams.keywords,
+      unit_name: queryParams.unit_name
+    }
+  }).then((res) => {
+    if (res.code === 0 && Array.isArray(res.rows)) {
+      dataList.splice(0, dataList.length, ...res.rows); // 使用 splice 替换数组内容,保持响应性
+    } else {
+      console.error('Invalid response from server:', res);
+      // 可以选择清空数据列表或显示错误消息
+      dataList.splice(0, dataList.length); // 清空数据列表
+    }
+  });
+};
+
+// 取消按钮的逻辑,搜索框清空并重新加载数据
+const handleCancel = () => {
+  queryParams.keywords = '';
+  initData();
+};
+//调用函数
+onMounted(() => {
+  initData();
+});
+</script>
+
+<style lang="scss" scoped>
+.menu-content {
+  width: 1584px;
+  height: 2066px;
+  background: url('@/assets/images/map/rightMenu/potentialFloodHazard/dialog.png') no-repeat;
+  padding: 130px 30px 20px 40px;
+  font-size: 36px;
+  position: relative;
+  color: #ffffff;
+}
+.title {
+  font-size: 60px;
+  position: absolute;
+  top: 30px;
+  left: 160px;
+}
+.box2 {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-top: 30px;
+  margin-bottom: 20px;
+
+  .box-left {
+    display: flex;
+
+    .btn {
+      width: 140px;
+      height: 40px;
+      background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      margin-left: 20px;
+      color: #ffffff;
+      font-size: 32px;
+    }
+  }
+}
+
+.custom-input {
+  height: 40px;
+  line-height: 40px;
+}
+
+.custom-table {
+  width: 100%;
+  height: 1030px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  .table-content {
+    height: 880px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .th {
+    width: 100%;
+    height: 151px;
+    background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+  }
+  .tr {
+    width: 100%;
+    height: 139px;
+    background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    padding-right: 20px;
+    &:hover {
+      background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .td {
+    flex: 1;
+    color: #edfaff;
+    font-size: 38px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+  .td-text {
+    /* 设置字体透明 */
+    color: transparent;
+    /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
+    -webkit-background-clip: text;
+    /* 非Webkit内核浏览器需要使用标准前缀 */
+    background-clip: text;
+    font-family: 'YouSheBiaoTiHei';
+    /* 设置线性渐变,从红色渐变到蓝色 */
+    background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
+    font-size: 48px;
+  }
+  .text-green {
+    background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
+  }
+  .text-danger {
+    background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
+  }
+}
+</style>

+ 21 - 9
src/views/globalMap/RightMenu/UAV.vue

@@ -4,11 +4,11 @@
     <div class="flex-box">
       <el-select
         v-model="planForm.planType"
-        placeholder="请选择行政区"
+        :teleported="false"
         class="custom-select"
-        size="large"
+        placeholder="请选择行政区"
         popper-class="custom-select-popper"
-        :teleported="false"
+        size="large"
       >
         <el-option v-for="item in plan_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
       </el-select>
@@ -17,12 +17,18 @@
       <div class="th">
         <div class="td">无人机名称</div>
         <div class="td">
-          <span>类型</span>
-          <select>
-            <!-- 下拉框选项 -->
-            <option value="option1">选项1</option>
-            <option value="option2">选项2</option>
-          </select>
+          <div style="width: 201px">
+            <el-select
+              v-model="queryParams.area"
+              placeholder="类型"
+              size="large"
+              class="custom-select2"
+              popper-class="custom-select-popper2"
+              :teleported="false"
+            >
+              <el-option label="多旋翼" value="" />
+            </el-select>
+          </div>
         </div>
       </div>
       <div class="table-content">
@@ -71,6 +77,8 @@ const plan_type = [
   { label: '信宜市', value: 'xinyi' },
   { label: '化州市', value: 'huazhou' }
 ];
+
+const dropdown_options = [{ label: '多旋翼', value: '多旋翼' }];
 </script>
 
 <style lang="scss" scoped>
@@ -216,4 +224,8 @@ const plan_type = [
     background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
   }
 }
+
+.gradient-text2 {
+  color: transparent !important;
+}
 </style>

+ 6 - 1
src/views/globalMap/RightMenu/index.vue

@@ -61,6 +61,10 @@
         <CommunicationSupport v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '通讯保障'" @handle-menu="handleMenu" />
         <!--手机工作平台-->
         <MobilePlatform v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '手机工作台'" @handle-menu="handleMenu" />
+        <!--重点车辆-->
+        <KeyVehicles v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '重点车辆'" @handle-menu="handleMenu" />
+        <!--卫星电话-->
+        <SatellitePhone v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '卫星电话'" @handle-menu="handleMenu" />
       </div>
     </div>
   </div>
@@ -85,7 +89,8 @@ import PotentialFloodHazard from './PotentialFloodHazard.vue';
 import TowerStatus from './TowerStatus.vue';
 import CommunicationSupport from './CommunicationSupport.vue';
 import MobilePlatform from './MobilePlatform.vue';
-
+import KeyVehicles from './KeyVehicles.vue';
+import SatellitePhone from './SatellitePhone.vue';
 interface Props {
   pointType: PointType[];
 }

+ 1 - 1
src/views/globalMap/index.vue

@@ -119,7 +119,7 @@ const clickMenu = (item, dataList) => {
     if (item.checked || (!item.checked && index === 0)) {
       rightMenuRef.value.updateMenu(
         checked,
-        ['易涝隐患点', '无人机', '铁塔运行监测', '物资与装备', '通讯保障', '手机工作台'].includes(item.name) ? item : { name: '图层分析', meta: { icon: 'icon1' } }
+        ['易涝隐患点', '无人机', '铁塔运行监测', '物资与装备', '通讯保障', '手机工作台', '卫星电话'].includes(item.name) ? item : { name: '图层分析', meta: { icon: 'icon1' } }
       );
     }
   }