查看更多-跳转蓝泰图片

src/components/card/Card01.vue

@@ -14,6 +14,8 @@ import header from "@/assets/images/card/header01.png";
         <slot name="header">
           <span class="title" v-html="title"></span>
         </slot>
+        <slot name="sec_header">
+        </slot>
       </div>
     </div>
     <div class="card-one-body">

src/router/index.ts

@@ -42,6 +42,10 @@ const router = createRouter({
           path: 'device/:stcd/:deviceid',
           name: 'device',
           component: () => import('@/views/Device.vue'),
+        }, {
+          path: 'sw/:stcd',
+          name: 'sw',
+          component: () => import('@/views/Sw.vue'),
         },
       ],
     },

src/utils/index.ts

@@ -7,6 +7,7 @@ import router from '@/router/index';
  * @param isBlank 是否新页面打开
  */
 export function jumpPage(path: string, query: any = null, isBlank = false) {
+  debugger
   if (path) {
     if (!isBlank) {
       router.push({path, query})

src/views/Situational.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import {computed, onMounted, reactive, ref, watch} from 'vue'
-import {useRoute} from 'vue-router'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import RightFrame from '@/components/RightFrame.vue'
 import Card01 from '@/components/card/Card01.vue'
-import {getStation, stationList} from '@/utils/station'
+import { getStation, stationList } from '@/utils/station'
 import ColorTag from '@/components/tag/ColorTag.vue'
 import Chart from '@/components/Chart.vue'
 import DataTag from '@/components/tag/DataTag.vue'
@@ -12,13 +12,14 @@ import {
   getWaterLevelAndFlowLatest,
   getWaterLevelAndFlowListOfPageByStcd,
   getWaterQualityLatest
-} from "@/api/gx";
-import {formatd} from "@/utils/ruoyi";
-import {filterWaterQualitys} from "@/utils/unit";
-import {getLatestTimeWithMinuteMultipleOfFive} from "@/utils/date";
-import StationRightButtonGroup from "@/components/StationRightButtonGroup.vue";
-import {useStationStore} from '@/stores/station'
-import {Operate} from "@/utils/tdInstruction";
+} from '@/api/gx'
+import { formatd } from '@/utils/ruoyi'
+import { filterWaterQualitys } from '@/utils/unit'
+import { getLatestTimeWithMinuteMultipleOfFive } from '@/utils/date'
+import StationRightButtonGroup from '@/components/StationRightButtonGroup.vue'
+import { useStationStore } from '@/stores/station'
+import { Operate } from '@/utils/tdInstruction'
+import { jumpPage } from '@/utils'
 
 const route = useRoute()
 const store = useStationStore()
@@ -30,7 +31,7 @@ const left2Ref = ref(null)
 const left3Ref = ref(null)
 const right1Ref = ref(null)
 const right3Ref = ref(null)
-const wqData = ref({d1: '6', d2: '22.3', d3: '5', d4: '20', d5: '6', d6: '22.3', d7: '5', d8: '20'})
+const wqData = ref({ d1: '6', d2: '22.3', d3: '5', d4: '20', d5: '6', d6: '22.3', d7: '5', d8: '20' })
 const station = computed(() => getStation(route.params.stcd))
 const wlData = reactive({
   ss: '0',
@@ -71,7 +72,7 @@ const waterLevelMarks = ref({
 })
 
 function formatWaterLevelTooltip(val: number) {
-  return (val * 0.05).toFixed(2) + 'm' as string;
+  return (val * 0.05).toFixed(2) + 'm' as string
 }
 
 async function reloadLeft2() {
@@ -86,7 +87,7 @@ async function reloadLeft2() {
   const option = {
     // backgroundColor: "#0B2D55",
     tooltip: {
-      trigger: 'axis',
+      trigger: 'axis'
     },
     grid: {
       top: '13%',
@@ -107,7 +108,7 @@ async function reloadLeft2() {
       axisLabel: { // 坐标轴刻度标签的相关设置
         color: '#02cacf'
       },
-      axisTick: {show: false},
+      axisTick: { show: false },
       data: flowData.map(item => item.tm ? item.tm.substring(11, 16) + '\n' + item.tm.substring(5, 10) : '')
     }],
     yAxis: [{
@@ -153,7 +154,7 @@ async function reloadLeft2() {
 async function reloadLeft3() {
   const stcds = stationList.map(s => s.stcd).join(',')
   const tm = formatd(getLatestTimeWithMinuteMultipleOfFive(new Date(), 20), 'yyyy-MM-dd hh:mm:ss')
-  const waterData = await getWaterLevelAndFlowLatest({stcds, tm}).then(res => res.data)
+  const waterData = await getWaterLevelAndFlowLatest({ stcds, tm }).then(res => res.data)
   const currentStationData = waterData.find(d => d.stcd === route.params.stcd)
   if (currentStationData) {
     store.setZ(currentStationData.z)
@@ -169,7 +170,7 @@ async function reloadLeft3() {
   const option = {
     // backgroundColor: "#0B2D55",
     tooltip: {
-      trigger: 'axis',
+      trigger: 'axis'
     },
     grid: {
       top: '14%',
@@ -189,7 +190,7 @@ async function reloadLeft3() {
       axisLabel: { // 坐标轴刻度标签的相关设置
         color: '#02cacf'
       },
-      axisTick: {show: false},
+      axisTick: { show: false },
       data: stationList.map(s => s.stnm)
     }],
     yAxis: [{
@@ -244,7 +245,7 @@ async function reloadRight1() {
   const option = {
     // backgroundColor: "#0B2D55",
     tooltip: {
-      trigger: 'axis',
+      trigger: 'axis'
     },
     grid: {
       top: '14%',
@@ -264,7 +265,7 @@ async function reloadRight1() {
       axisLabel: { // 坐标轴刻度标签的相关设置
         color: '#02cacf'
       },
-      axisTick: {show: false},
+      axisTick: { show: false },
       data: rainfallData.map(item => item.tm ? item.tm.substring(11, 16) + '\n' + item.tm.substring(5, 10) : '')
     }],
     yAxis: [{
@@ -305,7 +306,7 @@ async function reloadRight1() {
 async function reloadRight3() {
   const stcds = stationList.map(s => s.stcd).join(',')
   const tm = formatd(getLatestTimeWithMinuteMultipleOfFive(new Date(), 20), 'yyyy-MM-dd hh:mm:ss')
-  const waterData = await getWaterQualityLatest({stcds}).then(res => res.data)
+  const waterData = await getWaterQualityLatest({ stcds }).then(res => res.data)
   const list = []
 
   stationList.forEach(s => {
@@ -323,17 +324,17 @@ async function reloadRight3() {
       type: 'scroll',
       pageIconColor: '#fff',
       pageTextStyle: {
-        color: '#fff',
+        color: '#fff'
       },
       textStyle: {
         color: '#fff'
       },
-      icon: "stack",
-      selectedMode: "single",
-      data: params.map(i => i.label),
+      icon: 'stack',
+      selectedMode: 'single',
+      data: params.map(i => i.label)
     },
     tooltip: {
-      trigger: 'axis',
+      trigger: 'axis'
     },
     grid: {
       top: '25%',
@@ -354,7 +355,7 @@ async function reloadRight3() {
       axisLabel: { // 坐标轴刻度标签的相关设置
         color: '#02cacf'
       },
-      axisTick: {show: false},
+      axisTick: { show: false },
       data: list.map(s => s.stnm)
     }],
     yAxis: [{
@@ -381,13 +382,13 @@ async function reloadRight3() {
       return {
         name: i.label,
         data: list.map(e => e[i.key.toLowerCase()]),
-        type: "line",
-        smooth: true, //是否平滑曲线显示
+        type: 'line',
+        smooth: true //是否平滑曲线显示
         // lineStyle: {
         //   color: '#3deaff'
         // },
       }
-    }),
+    })
   }
   right3Ref.value.loadChart(option)
   right3Ref.value.carousel(1000, true)
@@ -397,7 +398,7 @@ async function reloadRight3() {
  * 获取最新水质数据
  */
 function getLatestWaterQuality() {
-  getWaterQualityLatest({stcds: route.params.stcd}).then(res => {
+  getWaterQualityLatest({ stcds: route.params.stcd }).then(res => {
     const data = res.data[0]
     wqData.value = {
       d1: data.ph,
@@ -420,6 +421,24 @@ function handleControlWaterLevel(value) {
   waterLevel.value = value * 0.05
 }
 
+function jumpTo(value) {
+  debugger
+  switch (value) {
+    case 'flow':
+      jumpPage(`/flow/${route.params.stcd}`)
+      break
+    case 'sw':
+      jumpPage(`/sw/${route.params.stcd}`)
+      break
+    case 'yl':
+      jumpPage(`/yl/${route.params.stcd}`)
+      break
+    case 'sz':
+      jumpPage(`/sz/${route.params.stcd}`)
+      break
+  }
+}
+
 onMounted(() => {
   reloadRight1()
   reloadRight3()
@@ -432,7 +451,7 @@ onMounted(() => {
 
 watch(() => waterLevel, (value) => {
   handleSetWaterLevel(value.value * 0.05)
-}, {deep: true})
+}, { deep: true })
 </script>
 <template>
   <right-frame>
@@ -444,37 +463,42 @@ watch(() => waterLevel, (value) => {
             <div class="difang-water-level">
               <span class="difang-water-level-value">{{ wlData.ss }}m</span>
             </div>
-            <img :src="dibaImage" alt="" class="difang-image"/>
+            <img :src="dibaImage" alt="" class="difang-image" />
           </el-col>
           <el-col :span="8"
                   style="height: 66%;margin-bottom: 1%;display: flex;flex-direction: column;justify-content: space-between;">
             <color-tag :value="wlData.ss" label="实时水位" style="height: 48%;" unit="m"
-                       @click="handleControlWaterLevel(wlData.ss)"/>
+                       @click="handleControlWaterLevel(wlData.ss)" />
             <color-tag :value="wlData.zg" label="历史最高水位" style="height: 48%;" unit="m"
-                       @click="handleSetWaterLevel(wlData.zg)"/>
+                       @click="handleSetWaterLevel(wlData.zg)" />
           </el-col>
           <el-col :span="8" style="height: 33%;">
             <color-tag :value="wlData.bz" backgroundColor="#bb232f" label="保证水位" unit="m"
-                       @click="handleSetWaterLevel(wlData.bz)"/>
+                       @click="handleSetWaterLevel(wlData.bz)" />
           </el-col>
           <el-col :span="8" style="height: 33%;">
             <color-tag :value="wlData.jj" backgroundColor="#b38b30" label="警戒水位" unit="m"
-                       @click="handleSetWaterLevel(wlData.jj)"/>
+                       @click="handleSetWaterLevel(wlData.jj)" />
           </el-col>
           <el-col :span="8" style="height: 33%;">
             <color-tag :value="wlData.zd" backgroundColor="#adcbe0" label="历史最低水位" unit="m"
-                       @click="handleSetWaterLevel(wlData.zd)"/>
+                       @click="handleSetWaterLevel(wlData.zd)" />
           </el-col>
         </el-row>
         <div :style="{'background-image': `url(${waterSliderBackground})`}" class="water-level-slider-container">
           <div class="water-level-slider-main">
             <el-slider v-model="waterLevel" :format-tooltip="formatWaterLevelTooltip" :marks="waterLevelMarks"
-                       height="90%" placement="right" tooltip-class="slider-tooltip" vertical/>
+                       height="90%" placement="right" tooltip-class="slider-tooltip" vertical />
             <span class="water-level-slider-title">水位动态模拟</span>
           </div>
         </div>
       </card01>
       <card01 style="height: 33%" title="流量监测">
+        <template v-slot:sec_header>
+          <span
+            style="font-size: 12px;display: inline-block;float:right;margin-right: 50px;cursor: pointer;"
+            @click="jumpTo('flow')">更多>></span>
+        </template>
         <chart ref="left2Ref"></chart>
       </card01>
       <card01 style="height: 33%">
@@ -482,11 +506,21 @@ watch(() => waterLevel, (value) => {
           <span class="title">水情分析</span>
           <span style="font-size: 0.8rem;">&nbsp;&nbsp;江南大运河沿线</span>
         </template>
+        <template v-slot:sec_header>
+          <span
+            style="font-size: 12px;display: inline-block;float:right;margin-right: 50px;cursor: pointer;"
+            @click="jumpTo('sw')">更多>></span>
+        </template>
         <chart ref="left3Ref"></chart>
       </card01>
     </template>
     <template #rightModule>
       <card01 style="height: 31%" title="雨量监测">
+        <template v-slot:sec_header>
+          <span
+            style="font-size: 12px;display: inline-block;float:right;margin-right: 50px;cursor: pointer;"
+            @click="jumpTo('yl')">更多>></span>
+        </template>
         <chart ref="right1Ref"></chart>
       </card01>
       <card01 style="height: 38%" title="水质评价">
@@ -497,6 +531,10 @@ watch(() => waterLevel, (value) => {
           <span class="title">水质分析</span>
           <span style="font-size: 0.8rem;">&nbsp;&nbsp;江南大运河沿线</span>
         </template>
+        <template v-slot:sec_header>
+          <span style="font-size: 12px;display: inline-block;float:right;margin-right: 50px;cursor: pointer;"
+                @click="jumpTo('sz')">更多>></span>
+        </template>
         <chart ref="right3Ref"></chart>
       </card01>
     </template>