Browse Source

天气小组件,系统title

viviandjava 6 months ago
parent
commit
bd9ac46f48

BIN
src/assets/images/layout/header-title3.png


BIN
src/assets/images/weatherTool.png


+ 3 - 3
src/layout/components/Navbar.vue

@@ -8,7 +8,7 @@ const route = useRoute()
 const router = useRouter()
 
 let navbarBackgroundImage = new URL('@/assets/images/layout/header-background.png', import.meta.url).href
-let navbarTitleImage = ref(new URL('@/assets/images/layout/header-title.png', import.meta.url).href)
+let navbarTitleImage = ref(new URL('@/assets/images/layout/header-title3.png', import.meta.url).href)
 let menuLeftImage = ref(new URL('@/assets/images/layout/menu-left.png', import.meta.url).href)
 let menuRightImage = ref(new URL('@/assets/images/layout/menu-right.png', import.meta.url).href)
 const navbarBackgroundStyle = computed(() => {
@@ -17,7 +17,7 @@ const navbarBackgroundStyle = computed(() => {
 const showMenu = computed(() => route.path !== '/index')
 let leftMenu = [
   {name: '总  览', path: '/index', type: 'left', style: {}},
-  {name: '监测感知', path: '/index', type: 'left', style: {}},
+  {name: '监测感知', path: '/situational/63304700', type: 'left', style: {}},
 ]
 let rightMenu = [
   {name: '智慧运维', path: '/index', type: 'right', style: {}},
@@ -34,7 +34,7 @@ function titleChange(path) {
       navbarTitleImage.value = new URL('@/assets/images/layout/header-title-tsq.png', import.meta.url).href
       break
     default:
-      navbarTitleImage.value = new URL('@/assets/images/layout/header-title.png', import.meta.url).href
+      navbarTitleImage.value = new URL('@/assets/images/layout/header-title3.png', import.meta.url).href
   }
 }
 

+ 34 - 13
src/views/Home.vue

@@ -289,18 +289,28 @@ function initPoints() {
   }
   mapStore.setOption(option)
 }
+
+const showTool = ref(false)
+
+function showTools() {
+  showTool.value = true
+}
+function closeTool() {
+  showTool.value = false
+}
+
 const homeSrc = ref(new URL('@/assets/images/home.png', import.meta.url).href)
 const weatherSrc = ref(new URL('@/assets/images/weather.png', import.meta.url).href)
 const flagSrc = ref(new URL('@/assets/images/flag.png', import.meta.url).href)
 const walkSrc = ref(new URL('@/assets/images/walk.png', import.meta.url).href)
 const cultureSrc = ref(new URL('@/assets/images/culture.png', import.meta.url).href)
+const weaTool = ref(new URL('@/assets/images/weatherTool.png', import.meta.url).href)
 
 onMounted(() => {
   reloadLeft2()
-
   reloadRight1()
   getStationList()
-  reloadRight3()
+  // reloadRight3()
 })
 
 // 订阅一个具体的事件
@@ -336,28 +346,39 @@ bus.on('point_click', (data: any) => {
       </card01>
     </template>
     <template #rightModule>
-      <card01 style="height: 33%" title="超警超保统计">
-        <chart ref="right1Ref"></chart>
-      </card01>
-      <card01 style="height: 33%" title="站点清单">
+      <card01 style="height: 66%" title="站点清单">
         <stripe-table :columns="tableColumns" :data="tableData"></stripe-table>
       </card01>
-      <card01 style="height: 33%">
-        <template v-slot:header>
-          <span class="title">水质分析</span>
-          <span style="font-size: 0.8rem;">&nbsp;&nbsp;江南大运河沿线</span>
-        </template>
-        <chart ref="right3Ref"></chart>
+      <card01 style="height: 33%" title="超警超保统计">
+        <chart ref="right1Ref"></chart>
       </card01>
     </template>
     <template #btnGroup>
       <div style="display: flex;flex-direction: column;">
         <div><img :src="homeSrc"></div>
-        <div><img :src="weatherSrc"></div>
+        <div><img :src="weatherSrc" @click="showTools"></div>
         <div><img :src="flagSrc"></div>
         <div><img :src="walkSrc"></div>
         <div><img :src="cultureSrc"></div>
       </div>
+      <div v-if="showTool"
+           style="position: absolute;background:rgba(133,199,245,0.6);width:300px;height:200px;top:60px;right:50px;"
+           @click="closeTool">
+        <!--        <div>时间与现实同步</div>-->
+        <!--        <el-row>-->
+        <!--          <el-col :span="4"><img :src="homeSrc"></el-col>-->
+        <!--          <el-col :span="4"><img :src="homeSrc"></el-col>-->
+        <!--          <el-col :span="4"><img :src="homeSrc"></el-col>-->
+        <!--        </el-row>-->
+        <!--        <div>天气与现实同步</div>-->
+        <!--        <el-row>-->
+        <!--          <el-col :span="3"><img :src="homeSrc"></el-col>-->
+        <!--          <el-col :span="3"><img :src="homeSrc"></el-col>-->
+        <!--          <el-col :span="3"><img :src="homeSrc"></el-col>-->
+        <!--          <el-col :span="3"><img :src="homeSrc"></el-col>-->
+        <!--        </el-row>-->
+        <img :src="weaTool" style="width: 300px;height: 230px;">
+      </div>
     </template>
   </right-frame>
 </template>

+ 1 - 37
src/views/Station.vue

@@ -58,7 +58,7 @@ onMounted(() => {
 
 <template>
   <right-frame>
-    <template #leftModule>
+    <template #rightModule>
       <card01 title="测站简介">
         <h3 class="introduce-title">{{ station.stnm + station.sttp }}</h3>
         <p v-for="text in introduces" class="introduce-text" v-html="text"></p>
@@ -68,42 +68,6 @@ onMounted(() => {
         <img :src="jiankong" alt="" style="width: 100%;height: 100%;"/>
       </card01>
     </template>
-    <template #rightModule>
-      <card01 style="height: 33%;" title="特征水位">
-        <el-row :gutter="10" justify="space-around" style="height: 100%;">
-          <el-col :span="16" style="height: 66%;margin-bottom: 1%;position: relative;">
-            <div class="difang-water-level">
-              <span class="difang-water-level-value">3.8m</span>
-            </div>
-            <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.jj" label="实时水位" style="height: 48%;" unit="m"></color-tag>
-            <color-tag :value="wlData.zg" label="历史最高水位" style="height: 48%;" unit="m"></color-tag>
-          </el-col>
-          <el-col :span="8" style="height: 33%;">
-            <color-tag :value="wlData.bz" backgroundColor="#bb232f" label="保证水位" unit="m"></color-tag>
-          </el-col>
-          <el-col :span="8" style="height: 33%;">
-            <color-tag :value="wlData.jj" backgroundColor="#b38b30" label="警戒水位" unit="m"></color-tag>
-          </el-col>
-          <el-col :span="8" style="height: 33%;">
-            <color-tag :value="wlData.zd" backgroundColor="#adcbe0" label="历史最低水位" unit="m"></color-tag>
-          </el-col>
-        </el-row>
-      </card01>
-      <card01 style="height: 33%" title="水质分析">
-        <el-row :gutter="10" style="height: 100%;">
-          <el-col v-for="(item, index) in wqData" :key="index" :span="6" style="height: 49%;margin-bottom: 1%;">
-            <image-tag :imgSrc="item.imgSrc" :label="item.label" :unit="item.unit" :value="item.value"></image-tag>
-          </el-col>
-        </el-row>
-      </card01>
-      <card01 style="height: 33%" title="设备总览">
-        <stripe-table :columns="deviceInfoColumns" :data="deviceInfoData"></stripe-table>
-      </card01>
-    </template>
   </right-frame>
 </template>
 <style lang="scss" scoped>