指挥调度

src/components/Map/company-map.vue

@@ -1,261 +1,296 @@
 <template>
-  <el-dialog v-model="mapPop" title="地图定位" width="80%" @close="handleClose">
-
-    <div class="map_box">
-      <div class="map" id="map"></div>
-      <div class="search">
-        <!-- @input="handleInput(0)" -->
-        <el-input placeholder="请输入地址" v-model="location" />
-        <el-button class="btn" type="primary" @click="handleInput(0)">搜索</el-button>
-      </div>
-
-      <div class="scroll_box" v-if="searchPop">
-        <div style="height: 30px; line-height: 30px;">
-          <span style="font-weight:bold">搜索结果列表</span>
-          <i class="el-icon-close" style="float: right;font-size: 20px;cursor: pointer;" @click="closeSearchList()" />
+  <div>
+    <div v-if="visible" class="dialog-wrap">
+      <div class="dialog">
+        <div class="dialog-header">
+          <div class="dialog-title">{{ title }}</div>
+          <div class="icon-close" @click="handleClose">
+            <el-icon size="40px"><Close /></el-icon>
+          </div>
         </div>
+        <div class="dialog-content">
+          <el-form ref="queryFormRef" :model="form" :rules="rules" :inline="true">
+            <el-form-item label="详细地址" prop="address">
+              <el-input v-model="form.address" placeholder="请输入" clearable />
+            </el-form-item>
+            <el-form-item label="经度" prop="longitude">
+              <el-input v-model="form.longitude" placeholder="请输入" />
+            </el-form-item>
+            <el-form-item label="纬度" prop="latitude">
+              <el-input v-model="form.latitude" placeholder="请输入" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" size="large" @click="submit">确定</el-button>
+            </el-form-item>
+          </el-form>
+          <div ref="containerRef" class="map_box">
+            <div id="map" class="map" :style="{ width: width, height: height }"></div>
+            <div class="search">
+              <!-- @input="handleInput(0)" -->
+              <el-input v-model="location" placeholder="请输入地址" />
+              <el-button class="btn" type="primary" @click="handleInput(0)">搜索</el-button>
+            </div>
 
-        <el-scrollbar class="scroll" style="height: 250px;">
-          <div v-show="searchList.length" class="item" v-for="(item, index) in searchList" :key="index" @click="handlePanTo(index)">
-            <el-image class="img" :src="item.img" :alt="item.name" lazy>
-              <div slot="error" class="image-slot">
-                <i class="el-icon-picture-outline"></i>
+            <div v-if="searchPop" class="scroll_box">
+              <div style="height: 30px; line-height: 30px">
+                <span style="font-weight: bold">搜索结果列表</span>
+                <i class="el-icon-close" style="float: right; font-size: 20px; cursor: pointer" @click="closeSearchList()" />
               </div>
-            </el-image>
-            <div>
-              <div class="text">{{ item.name }}</div>
-              <div>{{ item.address }}</div>
+
+              <el-scrollbar class="scroll" style="height: 250px">
+                <div v-for="(item, index) in searchList" v-show="searchList.length" :key="index" class="item" @click="handlePanTo(index)">
+                  <el-image class="img" :src="item.img" :alt="item.name" lazy>
+                    <template #error>
+                      <div class="image-slot">
+                        <i class="el-icon-picture-outline"></i>
+                      </div>
+                    </template>
+                  </el-image>
+                  <div>
+                    <div class="text">{{ item.name }}</div>
+                    <div>{{ item.address }}</div>
+                  </div>
+                </div>
+                <div v-show="!searchList.length" class="empty" style="text-align: center">没有搜索到内容</div>
+              </el-scrollbar>
+
+              <el-pagination
+                background
+                small
+                :hide-on-single-page="true"
+                layout="prev, pager, next"
+                :total="total"
+                :page-size="pageSize"
+                :current-page="pageNum"
+                style="margin-top: 10px"
+                @current-change="handleChangePage"
+              >
+              </el-pagination>
             </div>
           </div>
-          <div class="empty" v-show="!searchList.length" style="text-align: center;">没有搜索到内容</div>
-        </el-scrollbar>
-
-        <el-pagination background small :hide-on-single-page="true" layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="pageNum" style="margin-top: 10px;" @current-change="handleChangePage">
-        </el-pagination>
+        </div>
       </div>
     </div>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="handleClose">取 消</el-button>
-        <el-button type="primary" @click="sureMark">确 定</el-button>
-      </div>
-    </template>
-  </el-dialog>
+  </div>
 </template>
 
-<script>
-
-import AMapLoader from '@amap/amap-jsapi-loader'
+<script setup>
+import AMapLoader from '@amap/amap-jsapi-loader';
+import { useRouter } from 'vue-router';
 
-export default {
-  props: {
-    address: {//公司地址
-      type: String,
-      default: () => {
-        return '';
-      },
-    },
-    latAndLong: {//经纬度
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-    visible: {
-      type: Boolean,
-      default: () => {
-        return false;
-      },
-    },
-  },
-  data() {
-    return {
-      // 地图对象
-      map: {},
-      amap: {},
-      location: '',
-      marker: null,//地图上的点标记
-      contextMenu: null,
-      lnglatPosition: null,//选中的新坐标
-
-      pageNum: 1,
-      pageSize: 10,
-      total: 0,
-
-      searchList: [],
-      searchPop: false,
-      placeSearch: null,
-      form: {},
-      open: false,
-      mapPop: false,
-      geocoder: {}
-    };
-  },
-  watch: {
-    async visible(n) {
-      this.mapPop = n;
-      if (n) {
-        await this.initMap()
-        this.location = this.address;
-        this.handleInput(0)
-      }
-    }
-  },
-  destroyed() {
-    if (this.map) {
-      this.map.destroy()
-      this.map.off('rightclick')
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: () => {
+      return false;
     }
-  },
-  methods: {
-    handleInput(flag) {
-      if (!this.location) return;
-
-      if (!flag) {//搜索
-        this.total = 0
-        this.pageNum = 1
-      }
-
-      const that = this;
-      if (!this.placeSearch) {
-        this.placeSearch = new this.amap.PlaceSearch({
-          pageSize: 10, // 每页条数，默认10，范围1-50
-          pageIndex: 1, // 页码
-          extensions: 'all' // 默认base，返回基本地址信息；all：返回详细信息
-        })
-      }
-
-      this.searchPop = true;
-      this.placeSearch.setPageIndex(this.pageNum)
-      this.placeSearch.search(that.location, (status, result) => {
-        // console.log(result.poiList.pois, 'result')
-        if (!!result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
-          let arr = []
-          const pois = result.poiList.pois;
-          that.total = result.poiList ? result.poiList.count : 0;
-          arr = pois.map((item) => {
-            return {
-              name: item.name,
-              address: item.address,
-              img: item.photos[0]?.url,
-              lnglat: [item.location.lng, item.location.lat]
-            }
-          })
-          that.searchList = arr
+  }
+});
+const router = useRouter();
+const emits = defineEmits(['update:visible']);
+// 地图对象
+let map = {};
+let amap = {};
+let location = ref('');
+let marker = null; //地图上的点标记
+let contextMenu = null;
+let lnglatPosition = ref([]); //选中的新坐标
+let rules = reactive({
+  address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
+  longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
+  latitude: [{ required: true, message: '纬度不能为空', trigger: 'blur' }]
+});
+let pageNum = ref(1);
+let pageSize = ref(10);
+let total = ref(0);
 
-        } else {
-          that.total = 0
-          that.searchList = []
-        }
+let searchList = ref([]);
+let searchPop = ref(false);
+let placeSearch;
+let form = reactive({
+  address: '',
+  longitude: '',
+  latitude: ''
+});
+let open = ref(false);
+let geocoder = {};
+let width = ref('100%');
+let height = ref('100%');
+watch(
+  () => props.visible,
+  (n) => {
+    if (n) {
+      nextTick(() => {
+        initMap();
+      });
+    }
+  }
+);
+onMounted(() => {
+  window.addEventListener('resize', handleResize);
+});
+onUnmounted(() => {
+  if (map) {
+    map.destroy();
+    map.off('rightclick');
+  }
+  window.removeEventListener('resize', handleResize);
+});
+function handleInput(flag) {
+  if (!location.value) return;
 
-      })
-    },
-    handleChangePage(newNum) {
-      if (!this.searchPop) return;
-      this.pageNum = newNum
-      this.handleInput(1)
-    },
-    closeSearchList() {
-      this.searchPop = false
-      this.location = ''
-      this.searchList = []
-      this.total = 0
-      this.pageNum = 1
-    },
-    // 地图中心的平移至指定点位置
-    handlePanTo(index) {
-      let lnglat = this.searchList[index].lnglat
-      this.form = {
-        longitude: lnglat[0],
-        latitude: lnglat[1]
-      }
-      this.map.panTo(lnglat)
-      this.setMarks(lnglat);
-      this.closeSearchList()
-    },
-    async initMap() {
-      let position = this.latAndLong.length ? this.latAndLong : [110.93154257997, 21.669064031332];
-      this.form = {
-        longitude: position[0],
-        latitude: position[1]
-      }
-      const AMap = await AMapLoader.load({
-        key: '30d3d8448efd68cb0b284549fd41adcf',     // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: '2.0',      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: ['AMap.PlaceSearch', 'AMap.ContextMenu', 'AMap.PolygonEditor', 'AMap.Geocoder']       // 插件列表
-      })
-      this.map = new AMap.Map('map', {
-        viewMode: '3D',    //是否为3D地图模式
-        center: position,
-        zoom: 15
-      })
-      this.amap = AMap
+  if (!flag) {
+    //搜索
+    total.value = 0;
+    pageNum.value = 1;
+  }
 
-      this.setMarks(position);
-      this.geocoder = new AMap.Geocoder({
-        // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
-        city: '010'
-      })
-      // 创建右键菜单
-      this.ContextMenu()
-      this.map.on('rightclick', this.handleRightclick);
+  if (!placeSearch) {
+    placeSearch = new amap.PlaceSearch({
+      pageSize: 10, // 每页条数，默认10，范围1-50
+      pageIndex: 1, // 页码
+      extensions: 'all' // 默认base，返回基本地址信息；all：返回详细信息
+    });
+  }
 
-    },
-    ContextMenu() {
-      this.contextMenu = new AMap.ContextMenu();
-      this.contextMenu.addItem('选择标点', () => {
-        this.form = {
-          longitude: this.lnglatPosition[0],
-          latitude: this.lnglatPosition[1]
-        }
-        this.contextMenu.close()
-        let lnglat = [this.form.longitude, this.form.latitude];
-        this.setMarks(lnglat);
-      }, 1)
-    },
-    // 右键事件
-    handleRightclick(e) {
-      let lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
-      this.contextMenu.open(this.map, e.lnglat);
-      this.lnglatPosition = lnglat;
-    },
-    sureMark() {
-      let lnglat = [this.form.longitude, this.form.latitude];
-      this.geocoder.getAddress(lnglat, (status, result) => {
+  searchPop.value = true;
+  placeSearch.setPageIndex(pageNum.value);
+  placeSearch.search(location.value, (status, result) => {
+    // console.log(result.poiList.pois, 'result')
+    if (!!result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
+      let arr = [];
+      const pois = result.poiList.pois;
+      total.value = result.poiList ? result.poiList.count : 0;
+      arr = pois.map((item) => {
+        return {
+          name: item.name,
+          address: item.address,
+          img: item.photos[0]?.url,
+          lnglat: [item.location.lng, item.location.lat]
+        };
+      });
+      searchList.value = arr;
+    } else {
+      total.value = 0;
+      searchList.value = [];
+    }
+  });
+}
+function handleChangePage(newNum) {
+  if (!searchPop.value) return;
+  pageNum.value = newNum;
+  this.handleInput(1);
+}
+function closeSearchList() {
+  searchPop.value = false;
+  location.value = '';
+  searchList.value = [];
+  total.value = 0;
+  pageNum.value = 1;
+}
+// 地图中心的平移至指定点位置
+function handlePanTo(index) {
+  let lnglat = searchList.value[index].lnglat;
+  form.longitude = searchList.value[index].name + '(' + searchList.value[index] + ')';
+  form.latitude = lnglat[0];
+  form.latitude = lnglat[1];
+  map.panTo(lnglat);
+  setMarks(lnglat);
+  closeSearchList();
+}
+const initMap = async () => {
+  let position = [110.93154257997, 21.669064031332];
+  const AMap = await AMapLoader.load({
+    key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ['AMap.PlaceSearch', 'AMap.ContextMenu', 'AMap.PolygonEditor', 'AMap.Geocoder'] // 插件列表
+  });
+  map = new AMap.Map('map', {
+    viewMode: '3D', //是否为3D地图模式
+    center: position,
+    zoom: 15
+  });
+  amap = AMap;
+  geocoder = new AMap.Geocoder({
+    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
+    city: '010'
+  });
+  // 创建右键菜单
+  ContextMenu();
+  map.on('rightclick', handleRightclick);
+  handleResize();
+};
+function ContextMenu() {
+  contextMenu = new AMap.ContextMenu();
+  contextMenu.addItem(
+    '选择标点',
+    () => {
+      form.longitude = lnglatPosition.value[0];
+      form.latitude = lnglatPosition.value[1];
+      contextMenu.close();
+      let lnglat = [form.longitude, form.latitude];
+      geocoder.getAddress(lnglat, (status, result) => {
         if (status === 'complete' && result.info === 'OK') {
-          // result为对应的地理位置详细信息
-          this.$emit("confirm", { lnglat: lnglat, address: result.regeocode.formattedAddress });
+          form.address = result.regeocode.formattedAddress;
         }
-      })
-
-    },
-    setMarks(lnglat) {//添加标记
-      if (this.marker) this.map.remove(this.marker);
-      let marker = new AMap.Marker({
-        position: lnglat,
-        icon: new AMap.Icon({
-          size: new AMap.Size(22, 28),  //图标所处区域大小
-          imageSize: new AMap.Size(22, 28), //图标大小
-          image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
-        }),
-        anchor: 'bottom-center',
-        offset: new AMap.Pixel(0, 0)
       });
-      marker.setMap(this.map);
-      this.marker = marker;
+      setMarks(lnglat);
     },
-    handleClose() {
-      this.$emit('update:visible', false)
+    1
+  );
+}
+// 右键事件
+function handleRightclick(e) {
+  let lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
+  contextMenu.open(map, e.lnglat);
+  lnglatPosition.value = lnglat;
+}
+function setMarks(lnglat) {
+  //添加标记
+  if (marker.value) map.remove(marker.value);
+  let marker = new AMap.Marker({
+    position: lnglat,
+    icon: new AMap.Icon({
+      size: new AMap.Size(22, 28), //图标所处区域大小
+      imageSize: new AMap.Size(22, 28), //图标大小
+      image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
+    }),
+    anchor: 'bottom-center',
+    offset: new AMap.Pixel(0, 0)
+  });
+  marker.setMap(map);
+  marker.value = marker;
+}
+function handleClose() {
+  emits('update:visible', false);
+}
+let queryFormRef = ref();
+let containerRef = ref();
+function handleResize() {
+  const containerWidth = containerRef.value.clientWidth * (document.body.clientWidth / 8960);
+  const containerHeight = containerRef.value.clientHeight * (document.body.clientHeight / 2520);
+  width.value = containerWidth + 'px';
+  height.value = containerHeight + 'px';
+  nextTick(() => {
+    map.resize();
+  });
+}
+function submit() {
+  queryFormRef.value.validate((valid) => {
+    if (valid) {
+      console.log('提交数据', form);
+      router.push({
+        path: '/emergencyCommandMap',
+        query: { event_id: '11111111' }
+      });
     }
-  }
-};
+  });
+}
 </script>
 
 <style lang="scss" scoped>
 .map_box {
   position: relative;
-  width: 100%;
-  height: 450px;
   background: rgba(0, 0, 0, 0.3);
   margin-bottom: 20px;
 }
@@ -348,4 +383,46 @@ export default {
 .empty {
   margin: 20px 0;
 }
+.dialog-wrap {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  .dialog {
+    width: 4000px;
+    height: 2000px;
+    margin: 0 auto;
+    background-color: #fff;
+    border-radius: 10px;
+  }
+}
+.dialog {
+  padding: 0 20px;
+  .dialog-header {
+    width: 100%;
+    height: 70px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .dialog-title {
+      font-size: 36px;
+    }
+    .icon-close {
+      cursor: pointer;
+    }
+  }
+  .dialog-content {
+    padding: 10px 0;
+    .map_box {
+      width: calc(4000px - 50px) !important;
+      height: calc(2000px - 200px) !important;
+      overflow: hidden;
+    }
+  }
+}
 </style>

src/types/components.d.ts

@@ -13,6 +13,7 @@ declare module 'vue' {
     Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
     BuildCode: typeof import('./../components/BuildCode/index.vue')['default']
     Chart: typeof import('./../components/Chart/index.vue')['default']
+    CompanyMap: typeof import('./../components/Map/company-map.vue')['default']
     Dialog: typeof import('./../components/Dialog/index.vue')['default']
     DictTag: typeof import('./../components/DictTag/index.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
@@ -73,6 +74,7 @@ declare module 'vue' {
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']
+    Index2: typeof import('./../components/Dialog/index2.vue')['default']
     LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
     Map: typeof import('./../components/Map/index.vue')['default']
     MapLogical: typeof import('./../components/Map/MapLogical.vue')['default']
@@ -97,6 +99,7 @@ declare module 'vue' {
     UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
     VideoContainer: typeof import('./../components/HKVideo/video-container.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/RiverMonitor.vue

@@ -178,7 +178,9 @@ const handleShowDialog = (row) => {
   videoMonitorData.value = [];
   nextTick(() => {
     chartOption1.value.xAxis.data = ['12时', '15时', '18时', '21时', '0时', '3时', '6时', '9时'];
-    chartOption1.value.series[0].data = [123, 232, 0, 0, 0, 0, 0, 0];
+    chartOption1.value.series[0].data = [123, 232, '', '', '', '', '', ''];
+    chartOption1.value.series[1].data = [123, 232, '', '', '', '', '', ''];
+    chartOption1.value.series[2].data = [123, 232, '', '', '', '', '', ''];
     getRiverCourseLevel({ code: row.code }).then((res) => {
       const data = res.data.list;
       const time = [];
@@ -188,9 +190,9 @@ const handleShowDialog = (row) => {
         time.push(parseTime(item.time, '{h}'));
         resultData.push(item.water_level);
       });
-      chartOption2.value.xAxis.data = time;
+      chartOption2.value.xAxis[0].data = time;
       chartOption2.value.series[0].data = resultData;
-      chartOption2.value.series[0].markLine.data[0].yAxis = row.warningLevel;
+      // chartOption2.value.series[0].markLine.data[0].yAxis = row.warningLevel;
     });
     queryParams2.location = `POINT(${row.longitude} ${row.latitude})`;
     getVideoInfo(queryParams2).then((res) => {

src/views/globalMap/RightMenu/echartOptions.ts

@@ -4,49 +4,34 @@ import { graphic } from 'echarts';
 export const option1 = {
   xAxis: {
     type: 'category',
+    axisLabel: {
+      color: '#A8CCDE',
+      fontSize: 18
+    },
+    axisTick: false,
     data: []
   },
   yAxis: {
-    type: 'value'
-  },
-  visualMap: [
-    {
-      show: false,
-      pieces: [
-        {
-          gt: 0,
-          lte: 8.5,
-          color: 'blue'
-        },
-        {
-          gt: 8.5,
-          color: 'red'
-        }
-      ],
-      seriesIndex: 1
+    type: 'value',
+    splitLine: {
+      show: true,
+      color: '#303b4d'
+    },
+    axisLabel: {
+      color: '#A8CCDE',
+      fontSize: 18
     }
-  ],
+  },
   series: [
     {
       //柱底圆片
       name: '',
       type: 'pictorialBar',
-      symbolSize: [60, 20],
+      symbolSize: [30, 20],
       symbolOffset: [0, 10],
-      z: 12,
+      z: 13,
       itemStyle: {
-        'normal': {
-          color: new graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: 'rgba(89,211,255,1)'
-            },
-            {
-              offset: 1,
-              color: 'rgba(23,237,194,1)'
-            }
-          ])
-        }
+        color: 'rgba(50, 96, 225, 0.4)'
       },
       data: []
     },
@@ -54,44 +39,120 @@ export const option1 = {
     {
       name: '',
       type: 'bar',
-      barWidth: 60,
+      barWidth: 30,
       barGap: '0%',
       itemStyle: {
-        'normal': {
-          'color': {
-            'x': 0,
-            'y': 0,
-            'x2': 0,
-            'y2': 1,
-            'type': 'linear',
-            'global': false,
-            'colorStops': [
-              {
-                //第一节下面
-                'offset': 0,
-                'color': 'rgba(0,255,245,0.5)'
-              },
-              {
-                'offset': 1,
-                'color': '#43bafe'
-              }
-            ]
-          }
+        color: {
+          'x': 0,
+          'y': 0,
+          'x2': 0,
+          'y2': 1,
+          'type': 'linear',
+          'global': false,
+          'colorStops': [
+            {
+              'offset': 0,
+              'color': '#52b4f9'
+            },
+            {
+              'offset': 1,
+              'color': 'rgba(43, 67, 165, 0.35)'
+            }
+          ]
         }
       },
-
       data: []
     },
     //柱顶圆片
     {
       name: '',
       type: 'pictorialBar',
-      symbolSize: [60, 20],
+      symbolSize: [30, 20],
       symbolOffset: [0, -10],
       z: 12,
       symbolPosition: 'end',
-      'itemStyle': {
-        'normal': {
+      itemStyle: {
+        color: '#98c3ff'
+      },
+      data: []
+    }
+  ]
+};
+
+// 过去24小时河流水位变化图
+export const option2 = {
+  legend: {
+    show: true,
+    top: true,
+    right: 100
+  },
+  xAxis: [
+    {
+      type: 'category',
+      boundaryGap: false,
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: '#A8CCDE',
+          fontSize: 24
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#394350'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      data: []
+    }
+  ],
+  yAxis: [
+    {
+      name: '水位：m',
+      nameTextStyle: {
+        color: '#A8CCDE',
+        fontSize: 24,
+        padding: [10, 0]
+      },
+      min: 0,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#192a44'
+        }
+      },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: '#A8CCDE',
+          fontSize: 24
+        }
+      },
+      axisTick: {
+        show: false
+      }
+    }
+  ],
+  series: [
+    {
+      type: 'line',
+      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+      showAllSymbol: true,
+      symbolSize: 20,
+      smooth: true,
+      areaStyle: {
+        //区域填充样式
+        normal: {
+          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
           color: new graphic.LinearGradient(
             0,
             0,
@@ -100,15 +161,17 @@ export const option1 = {
             [
               {
                 offset: 0,
-                color: 'rgba(89,211,255,1)'
+                color: 'rgba(82, 180, 249, 0.35)'
               },
               {
                 offset: 1,
-                color: 'rgba(23,237,194,1)'
+                color: '#2b43a5'
               }
             ],
             false
-          )
+          ),
+          shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
+          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
         }
       },
       data: []
@@ -116,40 +179,6 @@ export const option1 = {
   ]
 };
 
-// 过去24小时河流水位变化图
-export const option2 = {
-  xAxis: {
-    type: 'category',
-    data: []
-  },
-  yAxis: {
-    type: 'value'
-  },
-  tooltip: {
-    show: true
-  },
-  series: [
-    {
-      data: [],
-      type: 'line',
-      markLine: {
-        // 警戒线样式
-        silent: true, // 不响应和触发鼠标事件
-        data: [
-          {
-            yAxis: '', // 自定义警戒线的y轴值
-            name: '警戒水位',
-            lineStyle: {
-              color: 'red', // 警戒线颜色为红色
-              type: 'dashed' // 警戒线线型为虚线
-            }
-          }
-        ]
-      }
-    }
-  ]
-};
-
 const yName = `水位 : m`;
 
 export const option3 = {

src/views/routineCommandMap/MiddleSection.vue

@@ -4,10 +4,7 @@
       <el-button type="primary" @click="handleQuery1">备战防御</el-button>
       <el-button type="primary" @click="handleQuery2">指挥调度</el-button>
     </div>
-    <!--    <Dialog id="selectMap" v-model="mapDialogVisible" title="气象图" width="700px" height="600px" @close="dialogClose">-->
-    <company-map v-model:visible="mapDialogVisible" :address="form.address" style="height: 1500px" @confirm="handleMapChange"></company-map>
-    <!--    </Dialog>-->
-
+    <company-map v-model:visible="mapDialogVisible" />
     <GlobalMap is-component width="3894" height="2140" />
   </div>
 </template>

src/views/routineCommandMap/index.vue

@@ -22,7 +22,7 @@ onMounted(() => {
       dh: 2520,
       el: '#dashboard-container',
       resize: false,
-      ignore: ['#aMap', '#YztMap', '#selectMap']
+      ignore: ['#aMap', '#YztMap', '#map']
     },
     false
   );