+++11.3

src/layout/components/AppMain.vue

@@ -8,35 +8,209 @@
       <!-- </transition> -->
     </router-view>
     <iframe-toggle />
-    <!-- <iframe id="myIframe" :src="srcUrl" style="width: 100%;height: 100%;" frameborder="0"
-      v-show="pathUrl == '/index' || pathUrl == '/system/energy' || pathUrl == '/system/video' || pathUrl == '/system/inspection' || pathUrl == '/system/entranceguard'"></iframe> -->
-    <!-- <iframe id="myIframeil" :src="srcUrl1" style="width: 100%;height: 100%;" frameborder="0"
-      v-if="pathUrl != '/index' && pathShow || pathShow && pathUrl != '/system/lighting'"></iframe> -->
+    <mapMode id="myIframe" ref="mapElement" :markerData="deptList" @titleClick="goObserving"></mapMode>
+    <div class="gradient-dialog">
+      <el-dialog v-model="dialogFormVisible" fullscreen @close="closeWater">
+        <template #header>
+          <div class="my-header">
+            <h1 style="color: #ffffff;text-align: center;">{{ waterSupply.deptName }}</h1>
+          </div>
+        </template>
+        <div class="flowchart_body">
+          <div class="lct_flowchart">
+            <div class="header_top">
+              <div class="item_left_images">
+                <el-image style="width:25px;flex: none;" :src="temperature" fit="cover">
+                </el-image>
+                <div class="left_title">控制室温度：<span class="num_title_left">14.4</span><span class="unit_left">℃</span>
+                </div>
+                <div class="left_title">泵房温度：<span class="num_title_left">14.4</span><span class="unit_left">℃</span>
+                </div>
+              </div>
+              <div class="item_left_images">
+                <el-image style="width:25px;flex: none;" :src="humidity" fit="cover">
+                </el-image>
+                <div class="left_title">控制室湿度：<span class="num_title_left">54.9</span><span class="unit_left">%PH</span>
+                </div>
+                <div class="left_title">泵房温度：<span class="num_title_left">53.4</span><span class="unit_left">%RH</span>
+                </div>
+              </div>
+            </div>
+            <div class="right_flow_lct">
+              <div class="item_right_images" v-for="(item, index) in rightFlow" :key="index"
+                @click="getMonitoring(item)">
+                <el-image style="width:25px;" :src="item.url" fit="cover">
+                </el-image>
+                <span style="color: #ffffff;margin: 0px 5px 0px 5px;">:</span>
+                <div class="right_title">{{ item.name }}</div>
+              </div>
+            </div>
+            <!-- 状态 -->
+            <div class="water_aspirator_state"></div>
+            <div class="water_aspirator_state1"></div>
+            <div class="water_aspirator_state2"></div>
+            <!-- 深水泵温度 -->
+            <div class="deep_well_pump1"><span class="num_title">0.00</span><span class="unit_title">℃</span></div>
+            <div class="deep_well_pump2"><span class="num_title">0.00</span><span class="unit_title">m3</span></div>
+            <div class="deep_well_pump3"><span class="num_title">0.00</span><span class="unit_title">MPa</span></div>
+            <div class="deep_well_pump4"><span class="num_title">0.00</span><span class="unit_title">m3</span></div>
+            <div class="deep_well_pump5"><span class="num_title">0.00</span><span class="unit_title">MPa</span></div>
+            <div class="deep_well_pump6"><span class="num_title">0.000</span><span class="unit_title">m</span></div>
+            <div class="deep_well_pump7"><span class="num_title">0.000</span><span class="unit_title">m</span></div>
+            <!-- 水井摄像头 -->
+            <div class="camera_1"></div>
+            <div class="camera_2"></div>
+            <div class="camera_3"></div>
+            <div class="camera_4"></div>
+            <div class="camera_5"></div>
+            <div class="camera_6"></div>
+            <div class="camera_7"></div>
+            <div class="camera_8"></div>
+            <div class="camera_9"></div>
+            <div class="camera_10"></div>
+            <div class="camera_11"></div>
+            <div class="camera_12"></div>
+            <!-- 温湿度表 -->
+            <div class="humiture_1"></div>
+            <div class="humiture_2"></div>
+            <div class="humiture_3"></div>
+            <div class="humiture_4"></div>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+    <div class="monitoring-container" v-if="dialogFormVisible && monitoringVisible" @click="closeMonitor">
+      <transition name="fade" mode="out-in">
+        <div class="inner-content">
+          <!-- 你的内容 -->
+          <div class="tech-border-container">
+            <div class="tech-border"></div>
+            <div class="corner corner-top-left"></div>
+            <div class="corner corner-top-right"></div>
+            <div class="corner corner-bottom-left"></div>
+            <div class="corner corner-bottom-right"></div>
+            <div class="content">
+              <curve :resultData="historyData" :curveType="curveType"></curve>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
   </section>
 </template>
 
 <script setup>
+import { getAllPointDataList, getHistorySaveData } from "@/api/home"
 import iframeToggle from "./IframeToggle/index"
 import useTagsViewStore from '@/store/modules/tagsView'
+import mapMode from "../../views/index/mapMode.vue"
+import curve from "../../views/index/curve.vue"
+import temperature from '/src/assets/images/temperature.png';
+import humidity from '/src/assets/images/humidity.png';
+import piezometer from '/src/assets/images/piezometer.png';
+import gauge from '/src/assets/images/gauge.png';
 
 const route = useRoute()
 const tagsViewStore = useTagsViewStore()
-const pathUrl = ref('')
-const pathShow = ref(false)
-const srcUrl = 'https://v3d.baozhida.cn/ViewRun?T_ViewID=dzT9YREjSHPJp6LONo1mUCi4v8wMF2lK'
-// const srcUrl = 'http://192.168.11.88:9191/ViewRun?T_ViewID=41rwFKnP9R7DAQXGYkz2S8Vcba3qTUd1'
-const srcUrl1 = ref('')
-
+const mapElement = ref(null)
+const allShow = ref(true)
+const deptList = ref([])
+const dialogFormVisible = ref(false)
+const monitoringVisible = ref(false)
+const waterSupply = ref({})
+// 数据
+const historyData = ref([])
+const curveType = ref('temperature')
+const rightFlow = reactive([
+  { name: '温度', url: temperature, type: 'temperature' },
+  { name: '湿度', url: humidity, type: 'humidity' },
+  { name: '压力', url: piezometer, type: 'pressure' },
+  { name: '流量', url: gauge, type: 'total_flow' },
+])
 onMounted(() => {
   nextTick(() => {
     addIframe()
+    mapElement.value.keyUpSearch();
   });
+  setTimeout(() => {
+    deptList.value.push(
+      { id: '9', deptName: '格尔木南站', address: '格尔木南站', longitude: 94.90405, latitude: 36.355008, status: '0' },
+      { id: 'j494440', deptName: '大灶火', address: '大灶火站', longitude: 94.046751, latitude: 36.594943, status: '1' },
+      { id: '3', deptName: '乌图美仁', address: '乌图美仁', longitude: 93.162812, latitude: 36.909138, status: '2' },
+      { id: 'j625043', deptName: '甘森', address: '甘森', longitude: 92.470147, latitude: 37.285573, status: '3' },
+      { id: '4', deptName: '茫崖', address: '茫崖', longitude: 90.80729, latitude: 38.250777, status: '3' },
+      { id: '5', deptName: '那曲', address: '那曲', longitude: 91.990936, latitude: 31.442993, status: '3' },
+      { id: '6', deptName: '那曲物流', address: '那曲物流', longitude: 92.067379, latitude: 31.486961, status: '3' },
+      { id: '7', deptName: '当雄', address: '当雄', longitude: 91.106599, latitude: 30.472104, status: '3' },
+      { id: '8', deptName: '安多', address: '安多', longitude: 91.667323, latitude: 32.250644, status: '3' }
+    )
+  }, 2000);
 })
 function addIframe() {
   if (route.meta.link) {
     useTagsViewStore().addIframeView(route)
   }
 }
+
+// 获取当天开始时间（00:00:00）
+function getTodayStartTime() {
+  const now = new Date();
+  const startTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
+  return formatDateTime(startTime);
+}
+
+// 获取当天结束时间（23:59:59）
+function getTodayEndTime() {
+  const now = new Date();
+  const endTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
+  return formatDateTime(endTime);
+}
+
+// 格式化日期时间函数
+function formatDateTime(date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+function getHistory(value) {
+  getHistorySaveData({
+    deviceId: value.id,
+    startTime: getTodayStartTime(),
+    endTime: getTodayEndTime(),
+  }).then((res) => {
+    if (res.code == 200) {
+      historyData.value = res.data
+    }
+  })
+}
+// 点击标记点
+function goObserving(value) {
+  allShow.value = false
+  dialogFormVisible.value = true
+  waterSupply.value = value
+  getHistory(value)
+}
+
+function closeWater() {
+  allShow.value = true
+  dialogFormVisible.value = false
+  monitoringVisible.value = false
+}
+// 打开曲线视频弹窗
+function getMonitoring(value) {
+  curveType.value = value.type
+  monitoringVisible.value = true
+}
+// 曲线视频弹窗关闭
+function closeMonitor() {
+  // console.log('关闭视频弹窗');
+  monitoringVisible.value = false
+}
 </script>
 
 <style lang="scss" scoped>
@@ -77,6 +251,39 @@ function addIframe() {
     padding-top: 84px;
   }
 }
+
+.gradient-dialog {
+  :deep(.el-overlay) {
+    background: radial-gradient(at 50% 50%, rgb(29, 52, 94) 1%, rgb(3, 22, 46) 60%);
+  }
+
+  :deep(.el-dialog) {
+    background: transparent !important;
+    box-shadow: none !important;
+    margin: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    color: #fff !important;
+  }
+
+  :deep(.el-dialog__body) {
+    background: transparent !important;
+    width: 100%;
+  }
+
+  :deep(.el-dialog__headerbtn .el-dialog__close) {
+    color: #fff !important;
+    font-size: 34px !important;
+    z-index: 2026 !important;
+    right: 20px !important;
+    top: 10px !important;
+    cursor: pointer !important;
+  }
+
+  :deep(.el-dialog__header) {
+    padding-bottom: 0px !important;
+  }
+}
 </style>
 
 <style lang="scss">
@@ -100,4 +307,524 @@ function addIframe() {
   background-color: #c0c0c0;
   border-radius: 3px;
 }
+
+.monitoring-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 2025;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+/* 内容居中样式 */
+.inner-content {
+  position: fixed;
+  z-index: 2030;
+  top: calc(50% - 300px);
+  left: calc(50% - 400px);
+  width: 800px;
+  height: 600px;
+  overflow: hidden;
+}
+
+.tech-border-container {
+  position: relative;
+  width: 800px;
+  /* 自适应宽度 */
+  height: 600px;
+  /* 可以设置为任何高度或使用百分比 */
+  box-sizing: border-box;
+}
+
+.tech-border {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 1px solid rgba(0, 255, 255, 0.5);
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.tech-border::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(45deg,
+      transparent 25%,
+      rgba(0, 255, 255, 0.1) 25%,
+      rgba(0, 255, 255, 0.1) 50%,
+      transparent 50%,
+      transparent 75%,
+      rgba(0, 255, 255, 0.1) 75%);
+  background-size: 10px 10px;
+  animation: move 2s linear infinite;
+}
+
+.tech-border::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 1px solid rgba(0, 255, 255, 0.3);
+  border-radius: 5px;
+  box-shadow:
+    0 0 10px rgba(0, 255, 255, 0.5),
+    inset 0 0 10px rgba(0, 255, 255, 0.5);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.corner {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-color: cyan;
+  border-style: solid;
+  border-width: 0;
+}
+
+.corner-top-left {
+  top: 0;
+  left: 0;
+  border-top-width: 2px;
+  border-left-width: 2px;
+  border-top-left-radius: 5px;
+}
+
+.corner-top-right {
+  top: 0;
+  right: 0;
+  border-top-width: 2px;
+  border-right-width: 2px;
+  border-top-right-radius: 5px;
+}
+
+.corner-bottom-left {
+  bottom: 0;
+  left: 0;
+  border-bottom-width: 2px;
+  border-left-width: 2px;
+  border-bottom-left-radius: 5px;
+}
+
+.corner-bottom-right {
+  bottom: 0;
+  right: 0;
+  border-bottom-width: 2px;
+  border-right-width: 2px;
+  border-bottom-right-radius: 5px;
+}
+
+@keyframes move {
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: 10px 10px;
+  }
+}
+
+@keyframes pulse {
+
+  0%,
+  100% {
+    opacity: 0.8;
+  }
+
+  50% {
+    opacity: 0.3;
+  }
+}
+
+.content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  color: cyan;
+  font-family: 'Arial', sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+@keyframes animloader113 {
+  0% {
+    transform: translate(0px, 0px) scaleX(1);
+  }
+
+  14% {
+    transform: translate(-12px, -16px) scaleX(1.05);
+  }
+
+  28% {
+    transform: translate(-27px, -28px) scaleX(1.07);
+  }
+
+  42% {
+    transform: translate(-46px, -35px) scaleX(1.1);
+  }
+
+  57% {
+    transform: translate(-70px, -37px) scaleX(1.1);
+  }
+
+  71% {
+    transform: translate(-94px, -32px) scaleX(1.07);
+  }
+
+  85% {
+    transform: translate(-111px, -22px) scaleX(1.05);
+  }
+
+  100% {
+    transform: translate(-125px, -9px) scaleX(1);
+  }
+}
+
+@keyframes animloader113L {
+  0% {
+    box-shadow: 0 -6px, -122.9px -8px;
+  }
+
+  25%,
+  75% {
+    box-shadow: 0 0px, -122.9px -8px;
+  }
+
+  100% {
+    box-shadow: 0 0px, -122.9px -16px;
+  }
+}
+
+////////
+/* 滑入滑出动画 */
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 0.3s ease;
+}
+
+.slide-enter-from {
+  transform: translateY(-20px);
+  opacity: 0;
+}
+
+.slide-leave-to {
+  transform: translateY(20px);
+  opacity: 0;
+}
+
+.my-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flowchart_body {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lct_flowchart {
+  position: relative;
+  width: 1024px;
+  height: 768px;
+  background: url('/src/assets/images/flowchart.png') no-repeat center;
+  background-size: contain;
+  margin: 0 auto;
+}
+
+.right_flow_lct {
+  position: absolute;
+  top: 20px;
+  right: 230px;
+  display: flex;
+  flex-direction: column;
+}
+
+.item_right_images {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.right_title {
+  font-size: 18px;
+  color: #fff;
+}
+
+.header_top {
+  position: absolute;
+  top: 20px;
+  left: 25px;
+  display: flex;
+  flex-direction: column;
+}
+
+.item_left_images {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.left_title {
+  display: flex;
+  color: #fff;
+  font-size: 18px;
+  margin-left: 10px;
+  align-items: baseline;
+  width: 240px;
+}
+
+.num_title_left {
+  color: #3aa73f;
+  margin: 0 5px 0 15px;
+}
+
+.unit_left {
+  margin-right: 25px;
+  color: #f9d615;
+}
+
+.num_title {
+  color: #3aa73f;
+  font-size: 16px;
+}
+
+.unit_title {
+  color: #f9d615;
+  font-size: 16px;
+}
+
+.water_aspirator_state {
+  position: absolute;
+  top: 42.5%;
+  left: 158px;
+  width: 15px;
+  height: 20px;
+  border-radius: 20px;
+  background-color: red;
+}
+
+.water_aspirator_state1 {
+  position: absolute;
+  top: 42.5%;
+  left: 246px;
+  width: 15px;
+  height: 20px;
+  border-radius: 20px;
+  background-color: #3cad45;
+}
+
+.water_aspirator_state2 {
+  position: absolute;
+  top: 53.1%;
+  right: 92px;
+  width: 15px;
+  height: 20px;
+  border-radius: 20px;
+  background-color: red;
+}
+
+.deep_well_pump1 {
+  position: absolute;
+  top: 47%;
+  right: 28px;
+}
+
+.deep_well_pump2 {
+  position: absolute;
+  top: 40%;
+  right: 220px;
+}
+
+.deep_well_pump3 {
+  position: absolute;
+  top: 40%;
+  right: 300px;
+}
+
+.deep_well_pump4 {
+  position: absolute;
+  top: 30%;
+  right: 415px;
+}
+
+.deep_well_pump5 {
+  position: absolute;
+  top: 30%;
+  right: 500px;
+}
+
+.deep_well_pump6 {
+  position: absolute;
+  top: 58.6%;
+  right: 465px;
+}
+
+.deep_well_pump7 {
+  position: absolute;
+  top: 58.6%;
+  left: 210px;
+}
+
+.camera_1 {
+  position: absolute;
+  cursor: pointer;
+  top: 57%;
+  right: 48px;
+  width: 30px;
+  height: 30px;
+}
+
+.camera_2 {
+  position: absolute;
+  cursor: pointer;
+  top: 62%;
+  right: 20px;
+  width: 30px;
+  height: 30px;
+}
+
+.camera_3 {
+  position: absolute;
+  cursor: pointer;
+  top: 31%;
+  right: 275px;
+  width: 30px;
+  height: 30px;
+}
+
+.camera_4 {
+  position: absolute;
+  cursor: pointer;
+  top: 22%;
+  right: 387px;
+  width: 30px;
+  height: 30px;
+}
+
+.camera_5 {
+  position: absolute;
+  cursor: pointer;
+  top: 17%;
+  right: 390px;
+  width: 30px;
+  height: 30px;
+}
+
+.camera_6 {
+  position: absolute;
+  cursor: pointer;
+  top: 21%;
+  right: 450px;
+  width: 30px;
+  height: 30px;
+}
+
+.camera_7 {
+  position: absolute;
+  cursor: pointer;
+  top: 17%;
+  right: 570px;
+  width: 30px;
+  height: 30px;
+}
+
+.camera_8 {
+  position: absolute;
+  cursor: pointer;
+  top: 66%;
+  right: 360px;
+  width: 30px;
+  height: 30px;
+}
+
+.camera_9 {
+  position: absolute;
+  cursor: pointer;
+  top: 21.5%;
+  left: 45px;
+  width: 30px;
+  height: 30px;
+}
+
+.camera_10 {
+  position: absolute;
+  cursor: pointer;
+  bottom: 14%;
+  left: 71px;
+  width: 30px;
+  height: 30px;
+}
+
+.camera_11 {
+  position: absolute;
+  cursor: pointer;
+  bottom: 10%;
+  left: 85px;
+  width: 30px;
+  height: 30px;
+}
+
+.camera_12 {
+  position: absolute;
+  cursor: pointer;
+  bottom: 36%;
+  left: 74px;
+  width: 30px;
+  height: 30px;
+}
+
+.humiture_1 {
+  position: absolute;
+  cursor: pointer;
+  top: 31%;
+  right: 232px;
+  width: 30px;
+  height: 30px;
+}
+
+.humiture_2 {
+  position: absolute;
+  cursor: pointer;
+  top: 31%;
+  right: 319px;
+  width: 30px;
+  height: 30px;
+}
+
+.humiture_3 {
+  position: absolute;
+  cursor: pointer;
+  top: 25.5%;
+  right: 461px;
+  width: 30px;
+  height: 30px;
+}
+
+.humiture_4 {
+  position: absolute;
+  cursor: pointer;
+  top: 25.5%;
+  right: 490px;
+  width: 30px;
+  height: 30px;
+}
 </style>

src/layout/index.vue

@@ -4,7 +4,7 @@
             <div :class="classObj" class="app-wrapper">
                 <logo :collapse="isCollapse" class="fixed-header" />
                 <app-main />
-                <!-- <sidebar v-if="!sidebar.hide" class="fixed-bottom" /> -->
+                <sidebar v-if="!sidebar.hide" class="fixed-bottom" />
             </div>
         </div>
     </dv-full-screen-container>

src/views/index.vue

@@ -10,83 +10,6 @@
         <waterIntakingDesk :resultData="leftData1"></waterIntakingDesk>
       </template>
     </layout>
-    <mapMode id="myIframe" ref="mapElement" :markerData="deptList" @titleClick="goObserving"></mapMode>
-    <div class="gradient-dialog">
-      <el-dialog v-model="dialogFormVisible" fullscreen @close="closeWater">
-        <template #header>
-          <div class="my-header">
-            <h1 style="color: #ffffff;text-align: center;">{{ waterSupply.deptName }}</h1>
-          </div>
-        </template>
-        <div class="flowchart_body">
-          <div class="lct_flowchart">
-            <div class="header_top">
-              <div class="item_left_images">
-                <el-image style="width:25px;flex: none;" :src="temperature" fit="cover">
-                </el-image>
-                <div class="left_title">控制室温度：<span class="num_title_left">14.4</span><span class="unit_left">℃</span>
-                </div>
-                <div class="left_title">泵房温度：<span class="num_title_left">14.4</span><span class="unit_left">℃</span>
-                </div>
-              </div>
-              <div class="item_left_images">
-                <el-image style="width:25px;flex: none;" :src="humidity" fit="cover">
-                </el-image>
-                <div class="left_title">控制室湿度：<span class="num_title_left">54.9</span><span class="unit_left">%PH</span>
-                </div>
-                <div class="left_title">泵房温度：<span class="num_title_left">53.4</span><span class="unit_left">%RH</span>
-                </div>
-              </div>
-            </div>
-            <div class="right_flow_lct">
-              <div class="item_right_images" v-for="(item, index) in rightFlow" :key="index" @click="getMonitoring(item)">
-                <el-image style="width:25px;" :src="item.url" fit="cover">
-                </el-image>
-                <span style="color: #ffffff;margin: 0px 5px 0px 5px;">:</span>
-                <div class="right_title">{{ item.name }}</div>
-              </div>
-            </div>
-            <!-- 深水泵温度 -->
-            <div class="deep_well_pump"><span class="num_title">0.00</span><span class="unit_title">℃</span></div>
-            <!-- 水井摄像头 -->
-            <div class="camera_1"></div>
-            <div class="camera_2"></div>
-            <div class="camera_3"></div>
-            <div class="camera_4"></div>
-            <div class="camera_5"></div>
-            <div class="camera_6"></div>
-            <div class="camera_7"></div>
-            <div class="camera_8"></div>
-            <div class="camera_9"></div>
-            <div class="camera_10"></div>
-            <div class="camera_11"></div>
-            <div class="camera_12"></div>
-            <!-- 温湿度表 -->
-            <div class="humiture_1"></div>
-            <div class="humiture_2"></div>
-            <div class="humiture_3"></div>
-            <div class="humiture_4"></div>
-          </div>
-        </div>
-      </el-dialog>
-    </div>
-    <div class="monitoring-container" v-if="dialogFormVisible && monitoringVisible" @click="closeMonitor">
-      <transition name="fade" mode="out-in">
-        <div class="inner-content">
-          <!-- 你的内容 -->
-          <div class="tech-border-container">
-            <div class="tech-border"></div>
-            <div class="corner corner-top-left"></div>
-            <div class="corner corner-top-right"></div>
-            <div class="corner corner-bottom-left"></div>
-            <div class="corner corner-bottom-right"></div>
-            <div class="content">
-              <curve :resultData="historyData" :curveType="curveType"></curve>
-            </div>
-          </div>
-        </div>
-      </transition>
-    </div>
   </div>
 </template>
 
@@ -98,12 +21,6 @@ import leftDesk from './index/leftDesk.vue'
 import feedwaterDesk from './index/feedwaterDesk.vue'
 import waterIntakingDesk from './index/waterIntakingDesk.vue'
 import reightDesk from './index/reightDesk.vue'
-import mapMode from "./index/mapMode.vue"
-import curve from "./index/curve.vue"
-import temperature from '/src/assets/images/temperature.png';
-import humidity from '/src/assets/images/humidity.png';
-import piezometer from '/src/assets/images/piezometer.png';
-import gauge from '/src/assets/images/gauge.png';
 
 const intervalId = ref(null)
 const mapElement = ref(null)
@@ -114,33 +31,8 @@ const deptList = reactive([])
 const dialogFormVisible = ref(false);
 const waterSupply = ref({})
 const monitoringVisible = ref(false)
-// 数据
-const historyData = ref([])
-const curveType = ref('temperature')
-const rightFlow = reactive([
-  { name: '温度', url: temperature, type: 'temperature' },
-  { name: '湿度', url: humidity, type: 'humidity' },
-  { name: '压力', url: piezometer, type: 'pressure' },
-  { name: '流量', url: gauge, type: 'total_flow' },
-])
 // 生命周期
 onMounted(() => {
-  nextTick(() => {
-    mapElement.value.keyUpSearch();
-  });
-  setTimeout(() => {
-    deptList.push(
-      { id: 1, deptName: '格尔木南站', address: '格尔木南站', longitude: 94.90405, latitude: 36.355008, status: '0' },
-      { id: 'j494440', deptName: '大灶火', address: '大灶火站', longitude: 94.046751, latitude: 36.594943, status: '1' },
-      { id: 3, deptName: '乌图美仁', address: '乌图美仁', longitude: 93.162812, latitude: 36.909138, status: '2' },
-      { id: 'j625043', deptName: '甘森', address: '甘森', longitude: 92.470147, latitude: 37.285573, status: '3' },
-      { id: 4, deptName: '茫崖', address: '茫崖', longitude: 90.80729, latitude: 38.250777, status: '3' },
-      { id: 4, deptName: '那曲', address: '那曲', longitude: 91.990936, latitude: 31.442993, status: '3' },
-      { id: 4, deptName: '那曲物流', address: '那曲物流', longitude: 92.067379, latitude: 31.486961, status: '3' },
-      { id: 4, deptName: '当雄', address: '当雄', longitude: 91.106599, latitude: 30.472104, status: '3' },
-      { id: 4, deptName: '安多', address: '安多', longitude: 91.667323, latitude: 32.250644, status: '3' },
-    )
-  }, 2000);
   getHomeData()
 });
 onUnmounted(() => {
@@ -153,65 +45,6 @@ function getHomeData() {
     }
   })
 }
-// 获取当天开始时间（00:00:00）
-function getTodayStartTime() {
-  const now = new Date();
-  const startTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
-  return formatDateTime(startTime);
-}
-
-// 获取当天结束时间（23:59:59）
-function getTodayEndTime() {
-  const now = new Date();
-  const endTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
-  return formatDateTime(endTime);
-}
-
-// 格式化日期时间函数
-function formatDateTime(date) {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const day = String(date.getDate()).padStart(2, '0');
-  const hours = String(date.getHours()).padStart(2, '0');
-  const minutes = String(date.getMinutes()).padStart(2, '0');
-  const seconds = String(date.getSeconds()).padStart(2, '0');
-
-  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
-}
-function getHistory(value) {
-  getHistorySaveData({
-    deviceId: value.id,
-    startTime: getTodayStartTime(),
-    endTime: getTodayEndTime(),
-  }).then((res) => {
-    if (res.code == 200) {
-      historyData.value = res.data
-    }
-  })
-}
-// 点击标记点
-function goObserving(value) {
-  allShow.value = false
-  dialogFormVisible.value = true
-  waterSupply.value = value
-  getHistory(value)
-}
-
-function closeWater() {
-  allShow.value = true
-  dialogFormVisible.value = false
-  monitoringVisible.value = false
-}
-// 打开曲线视频弹窗
-function getMonitoring(value) {
-  curveType.value = value.type
-  monitoringVisible.value = true
-}
-// 曲线视频弹窗关闭
-function closeMonitor() {
-  // console.log('关闭视频弹窗');
-  monitoringVisible.value = false
-}
 </script>
 
 <style lang="scss" scoped>
@@ -264,491 +97,4 @@ function closeMonitor() {
 .text-red {
   color: rgb(239, 93, 57);
 }
-
-.gradient-dialog {
-  :deep(.el-overlay) {
-    background: radial-gradient(at 50% 50%, rgb(29, 52, 94) 1%, rgb(3, 22, 46) 60%);
-  }
-
-  :deep(.el-dialog) {
-    background: transparent !important;
-    box-shadow: none !important;
-    margin: 0 !important;
-    width: 100% !important;
-    height: 100% !important;
-    color: #fff !important;
-  }
-
-  :deep(.el-dialog__body) {
-    background: transparent !important;
-    width: 100%;
-  }
-
-  :deep(.el-dialog__headerbtn .el-dialog__close) {
-    color: #fff !important;
-    font-size: 34px !important;
-    z-index: 2026 !important;
-    right: 20px !important;
-    top: 10px !important;
-    cursor: pointer !important;
-  }
-
-  :deep(.el-dialog__header) {
-    padding-bottom: 0px !important;
-  }
-}
-
-.monitoring-container {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  top: 0;
-  z-index: 2025;
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-/* 内容居中样式 */
-.inner-content {
-  position: fixed;
-  z-index: 2030;
-  top: calc(50% - 300px);
-  left: calc(50% - 400px);
-  width: 800px;
-  height: 600px;
-  overflow: hidden;
-}
-
-.tech-border-container {
-  position: relative;
-  width: 800px;
-  /* 自适应宽度 */
-  height: 600px;
-  /* 可以设置为任何高度或使用百分比 */
-  box-sizing: border-box;
-}
-
-.tech-border {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: 1px solid rgba(0, 255, 255, 0.5);
-  border-radius: 5px;
-  overflow: hidden;
-}
-
-.tech-border::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(45deg,
-      transparent 25%,
-      rgba(0, 255, 255, 0.1) 25%,
-      rgba(0, 255, 255, 0.1) 50%,
-      transparent 50%,
-      transparent 75%,
-      rgba(0, 255, 255, 0.1) 75%);
-  background-size: 10px 10px;
-  animation: move 2s linear infinite;
-}
-
-.tech-border::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: 1px solid rgba(0, 255, 255, 0.3);
-  border-radius: 5px;
-  box-shadow:
-    0 0 10px rgba(0, 255, 255, 0.5),
-    inset 0 0 10px rgba(0, 255, 255, 0.5);
-  animation: pulse 2s ease-in-out infinite;
-}
-
-.corner {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  border-color: cyan;
-  border-style: solid;
-  border-width: 0;
-}
-
-.corner-top-left {
-  top: 0;
-  left: 0;
-  border-top-width: 2px;
-  border-left-width: 2px;
-  border-top-left-radius: 5px;
-}
-
-.corner-top-right {
-  top: 0;
-  right: 0;
-  border-top-width: 2px;
-  border-right-width: 2px;
-  border-top-right-radius: 5px;
-}
-
-.corner-bottom-left {
-  bottom: 0;
-  left: 0;
-  border-bottom-width: 2px;
-  border-left-width: 2px;
-  border-bottom-left-radius: 5px;
-}
-
-.corner-bottom-right {
-  bottom: 0;
-  right: 0;
-  border-bottom-width: 2px;
-  border-right-width: 2px;
-  border-bottom-right-radius: 5px;
-}
-
-@keyframes move {
-  0% {
-    background-position: 0 0;
-  }
-
-  100% {
-    background-position: 10px 10px;
-  }
-}
-
-@keyframes pulse {
-
-  0%,
-  100% {
-    opacity: 0.8;
-  }
-
-  50% {
-    opacity: 0.3;
-  }
-}
-
-.content {
-  position: relative;
-  z-index: 1;
-  height: 100%;
-  color: cyan;
-  font-family: 'Arial', sans-serif;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-
-@keyframes animloader113 {
-  0% {
-    transform: translate(0px, 0px) scaleX(1);
-  }
-
-  14% {
-    transform: translate(-12px, -16px) scaleX(1.05);
-  }
-
-  28% {
-    transform: translate(-27px, -28px) scaleX(1.07);
-  }
-
-  42% {
-    transform: translate(-46px, -35px) scaleX(1.1);
-  }
-
-  57% {
-    transform: translate(-70px, -37px) scaleX(1.1);
-  }
-
-  71% {
-    transform: translate(-94px, -32px) scaleX(1.07);
-  }
-
-  85% {
-    transform: translate(-111px, -22px) scaleX(1.05);
-  }
-
-  100% {
-    transform: translate(-125px, -9px) scaleX(1);
-  }
-}
-
-@keyframes animloader113L {
-  0% {
-    box-shadow: 0 -6px, -122.9px -8px;
-  }
-
-  25%,
-  75% {
-    box-shadow: 0 0px, -122.9px -8px;
-  }
-
-  100% {
-    box-shadow: 0 0px, -122.9px -16px;
-  }
-}
-
-////////
-/* 滑入滑出动画 */
-.slide-enter-active,
-.slide-leave-active {
-  transition: all 0.3s ease;
-}
-
-.slide-enter-from {
-  transform: translateY(-20px);
-  opacity: 0;
-}
-
-.slide-leave-to {
-  transform: translateY(20px);
-  opacity: 0;
-}
-
-.my-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.flowchart_body {
-  position: absolute;
-  top: 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.lct_flowchart {
-  position: relative;
-  width: 1024px;
-  height: 768px;
-  background: url('/src/assets/images/flowchart.png') no-repeat center;
-  background-size: contain;
-  margin: 0 auto;
-}
-
-.right_flow_lct {
-  position: absolute;
-  top: 20px;
-  right: 230px;
-  display: flex;
-  flex-direction: column;
-}
-
-.item_right_images {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.right_title {
-  font-size: 18px;
-  color: #fff;
-}
-
-.header_top {
-  position: absolute;
-  top: 20px;
-  left: 25px;
-  display: flex;
-  flex-direction: column;
-}
-
-.item_left_images {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.left_title {
-  display: flex;
-  color: #fff;
-  font-size: 18px;
-  margin-left: 10px;
-  align-items: baseline;
-  width: 240px;
-}
-
-.num_title_left {
-  color: #3aa73f;
-  margin: 0 5px 0 15px;
-}
-
-.unit_left {
-  margin-right: 25px;
-  color: #f9d615;
-}
-
-.num_title {
-  color: #3aa73f;
-  font-size: 16px;
-}
-
-.unit_title {
-  color: #f9d615;
-  font-size: 16px;
-}
-
-.deep_well_pump {
-  position: absolute;
-  top: 47%;
-  right: 28px;
-}
-
-.camera_1 {
-  position: absolute;
-  cursor: pointer;
-  top: 57%;
-  right: 48px;
-  width: 30px;
-  height: 30px;
-}
-
-.camera_2 {
-  position: absolute;
-  cursor: pointer;
-  top: 62%;
-  right: 20px;
-  width: 30px;
-  height: 30px;
-}
-
-.camera_3 {
-  position: absolute;
-  cursor: pointer;
-  top: 31%;
-  right: 275px;
-  width: 30px;
-  height: 30px;
-}
-
-.camera_4 {
-  position: absolute;
-  cursor: pointer;
-  top: 22%;
-  right: 387px;
-  width: 30px;
-  height: 30px;
-}
-
-.camera_5 {
-  position: absolute;
-  cursor: pointer;
-  top: 17%;
-  right: 390px;
-  width: 30px;
-  height: 30px;
-}
-
-.camera_6 {
-  position: absolute;
-  cursor: pointer;
-  top: 21%;
-  right: 450px;
-  width: 30px;
-  height: 30px;
-}
-
-.camera_7 {
-  position: absolute;
-  cursor: pointer;
-  top: 17%;
-  right: 570px;
-  width: 30px;
-  height: 30px;
-}
-
-.camera_8 {
-  position: absolute;
-  cursor: pointer;
-  top: 66%;
-  right: 360px;
-  width: 30px;
-  height: 30px;
-}
-
-.camera_9 {
-  position: absolute;
-  cursor: pointer;
-  top: 21.5%;
-  left: 45px;
-  width: 30px;
-  height: 30px;
-}
-
-.camera_10 {
-  position: absolute;
-  cursor: pointer;
-  bottom: 14%;
-  left: 71px;
-  width: 30px;
-  height: 30px;
-}
-
-.camera_11 {
-  position: absolute;
-  cursor: pointer;
-  bottom: 10%;
-  left: 85px;
-  width: 30px;
-  height: 30px;
-}
-
-.camera_12 {
-  position: absolute;
-  cursor: pointer;
-  bottom: 36%;
-  left: 74px;
-  width: 30px;
-  height: 30px;
-}
-
-.humiture_1 {
-  position: absolute;
-  cursor: pointer;
-  top: 31%;
-  right: 232px;
-  width: 30px;
-  height: 30px;
-}
-
-.humiture_2 {
-  position: absolute;
-  cursor: pointer;
-  top: 31%;
-  right: 319px;
-  width: 30px;
-  height: 30px;
-}
-
-.humiture_3 {
-  position: absolute;
-  cursor: pointer;
-  top: 25.5%;
-  right: 461px;
-  width: 30px;
-  height: 30px;
-}
-
-.humiture_4 {
-  position: absolute;
-  cursor: pointer;
-  top: 25.5%;
-  right: 490px;
-  width: 30px;
-  height: 30px;
-}
 </style>

src/views/index/curve.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="_consume">
-        <div class="_consume_mains">
-            <div ref="chartRef" style="width: 100%; height: 100%;"></div>
+    <div class="_consumeil">
+        <div class="_consumeil_mainsil">
+            <div ref="chartRefil" style="width: 100%; height: 100%;"></div>
         </div>
     </div>
 </template>
@@ -9,7 +9,6 @@
 <script setup>
 import { ref, onMounted, onUnmounted, nextTick } from 'vue';
 import * as echarts from 'echarts';
-import { el } from 'element-plus/es/locales.mjs';
 const props = defineProps({
     resultData: {
         type: Array,
@@ -20,7 +19,7 @@ const props = defineProps({
         default: 'temperature'
     }
 })
-const chartRef = ref(null);
+const chartRefil = ref(null);
 let chart = null;
 
 const generateRandomData = (length, max) => {
@@ -41,8 +40,8 @@ onMounted(() => {
     initChart();
 });
 const initChart = (dates, EPE, typeName, unitType) => {
-    if (chartRef.value) {
-        chart = echarts.init(chartRef.value);
+    if (chartRefil.value) {
+        chart = echarts.init(chartRefil.value);
         // 生成 24 小时的时间数据
         // const hours = Array.from({ length: 24 }, (_, i) => `${i}时`);
         const hours = []
@@ -210,13 +209,13 @@ onUnmounted(() => {
     margin: 0 10px;
 }
 
-._consume {
+._consumeil {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
 
-    &_mains {
+    &_mainsil {
         margin: 10px 10px;
         flex: 1;
         display: flex;

src/views/index/feedwater.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="flex_home">
-        <HeadlineTag type="left" :value="waterData.deviceName"></HeadlineTag>
+        <HeadlineTag type="left" :value="deviceName"></HeadlineTag>
         <div class="box_arch">
             <div class="left_content">
                 <div class="item_water_supply" v-for="(item, index) in leftData" :key="index">
@@ -20,6 +20,7 @@ const props = defineProps({
         default: {}
     }
 })
+const deviceName = ref('')
 const leftData = ref([{
     title: '水箱液位',
     pointId: '01030016W0',
@@ -41,13 +42,26 @@ const leftData = ref([{
     value: '',
     configUnit: '%RH',
 }])
-
+const deptData = ref([{ id: '9', deptName: '格尔木南站', address: '格尔木南站', longitude: 94.90405, latitude: 36.355008, status: '0' },
+{ id: 'j494440', deptName: '大灶火', address: '大灶火站', longitude: 94.046751, latitude: 36.594943, status: '1' },
+{ id: '3', deptName: '乌图美仁', address: '乌图美仁', longitude: 93.162812, latitude: 36.909138, status: '2' },
+{ id: 'j625043', deptName: '甘森', address: '甘森', longitude: 92.470147, latitude: 37.285573, status: '3' },
+{ id: '4', deptName: '茫崖', address: '茫崖', longitude: 90.80729, latitude: 38.250777, status: '3' },
+{ id: '5', deptName: '那曲', address: '那曲', longitude: 91.990936, latitude: 31.442993, status: '3' },
+{ id: '6', deptName: '那曲物流', address: '那曲物流', longitude: 92.067379, latitude: 31.486961, status: '3' },
+{ id: '7', deptName: '当雄', address: '当雄', longitude: 91.106599, latitude: 30.472104, status: '3' },
+{ id: '8', deptName: '安多', address: '安多', longitude: 91.667323, latitude: 32.250644, status: '3' }])
 watch(() => props.waterData, (newVal) => {
     if (newVal) {
         leftData.value[0].value = newVal.liquid_level
         leftData.value[1].value = newVal.pressure
         leftData.value[2].value = newVal.temperature
         leftData.value[3].value = newVal.humidity
+        deptData.value.forEach(item => {
+            if (item.id == newVal.deviceid) {
+                deviceName.value = item.deptName
+            }
+        });
     }
 }, { deep: true, immediate: true })
 </script>

src/views/index/waterIntaking.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="flex_home">
-        <HeadlineTag type="right" :value="waterData.deviceName"></HeadlineTag>
+        <HeadlineTag type="right" :value="deviceName"></HeadlineTag>
         <div class="box_arch">
             <div class="left_content">
                 <div class="item_water_supply" v-for="(item, index) in leftData" :key="index">
@@ -20,6 +20,7 @@ const props = defineProps({
         default: {}
     }
 })
+const deviceName = ref('')
 const leftData = ref([{
     title: '累计流量',
     pointId: '0103001CO0',
@@ -41,27 +42,27 @@ const leftData = ref([{
     value: '',
     configUnit: '',
 }])
+const deptData = ref([{ id: '9', deptName: '格尔木南站', address: '格尔木南站', longitude: 94.90405, latitude: 36.355008, status: '0' },
+{ id: 'j494440', deptName: '大灶火', address: '大灶火站', longitude: 94.046751, latitude: 36.594943, status: '1' },
+{ id: '3', deptName: '乌图美仁', address: '乌图美仁', longitude: 93.162812, latitude: 36.909138, status: '2' },
+{ id: 'j625043', deptName: '甘森', address: '甘森', longitude: 92.470147, latitude: 37.285573, status: '3' },
+{ id: '4', deptName: '茫崖', address: '茫崖', longitude: 90.80729, latitude: 38.250777, status: '3' },
+{ id: '5', deptName: '那曲', address: '那曲', longitude: 91.990936, latitude: 31.442993, status: '3' },
+{ id: '6', deptName: '那曲物流', address: '那曲物流', longitude: 92.067379, latitude: 31.486961, status: '3' },
+{ id: '7', deptName: '当雄', address: '当雄', longitude: 91.106599, latitude: 30.472104, status: '3' },
+{ id: '8', deptName: '安多', address: '安多', longitude: 91.667323, latitude: 32.250644, status: '3' }])
 watch(() => props.waterData, (newVal) => {
     if (newVal) {
         leftData.value[0].value = newVal['累计流量']
         leftData.value[1].value = newVal['瞬时流量']
         leftData.value[2].value = newVal['高液位限值小端']
         leftData.value[3].value = newVal['低液位限值小端']
+        deptData.value.forEach(item => {
+            if (item.id == newVal.deviceid) {
+                deviceName.value = item.deptName
+            }
+        });
     }
-    // if (newVal && Array.isArray(newVal.points)) {
-    //     leftData.value.forEach(item => {
-    //         const point = newVal.points.find(p => p.pointId === item.pointId);
-    //         if (point) {
-    //             if (item.pointId === "0103001CO0" || item.pointId === '01030008K0') {
-    //                 item.value = point.calculatedValue;
-    //                 item.configUnit = point.configUnit;
-    //             } else {
-    //                 item.value = point.value;
-    //                 item.configUnit = point.configUnit;
-    //             }
-    //         }
-    //     });
-    // }
 }, { deep: true, immediate: true })
 </script>