0726

src/echarts/options.js

@@ -1976,7 +1976,7 @@ export function setLnxm(ele, dataIn) {
 }
 
 let tzl = null
-export function setTzl(ele, dataIn) {
+export function setTzl(ele, dataIn, yUnit='单位(吨)') {
 	if(tzl) {
 		tzl.dispose()
 	}
@@ -2081,7 +2081,7 @@ export function setTzl(ele, dataIn) {
 		yAxis: {
 			type: "value",
 			position: "left",
-			name: "单位(吨)",
+			name: yUnit,
 			splitLine: {
 				show: true,
 				lineStyle: {

src/store/index.js

@@ -7,10 +7,22 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     hasRightPanel: true,
+    toolsShow: true,
+    baseMapShow: true,
+    headerShow: true
   },
   mutations: {
     changeHasRight(state, payload) {
       state.hasRightPanel = payload
+    },
+    changeToolsShow(state, payload) {
+      state.toolsShow = payload
+    },
+    changeBaseMapShow(state, payload) {
+      state.baseMapShow = payload
+    },
+    changeHeaderShow(state, payload) {
+      state.headerShow = payload
     }
   },
   actions: {

src/utils/data/all-layer-info.js

@@ -66,26 +66,6 @@ export let allLayerInfo = [
 				id: 'nydxz',
 				title: 'nydxz'
 			},
-			/* {
-				name: '高标准农田',
-				layer: 2,
-				children: [
-					{
-						name: '已建项目',
-						url: 'http://10.121.226.95:8081/OneMapServer/rest/services/gbznt_yj_202112/MapServer',
-						id: 'gbznt-yjxm',
-						title: 'gbznt-yjxm',
-						layer: 3
-					},
-					{
-						name: '在建项目',
-						url: 'http://10.121.226.95:8081/OneMapServer/rest/services/gbznt_zj_202112/MapServer',
-						id: 'gbznt-zjxm',
-						title: 'gbznt-zjxm',
-						layer: 3
-					},
-				]
-			}, */
 			{
 				name: '高标准农田现状',
 				layer: 2,
@@ -96,32 +76,6 @@ export let allLayerInfo = [
 			{
 				name: '特色产业',
 				layer: 2,
-				/* children: [
-					{
-						name: '崇明大米',
-						layer: 3
-					},
-					{
-						name: '崇明水仙花',
-						layer: 3
-					},
-					{
-						name: '崇明蔬菜',
-						layer: 3
-					},
-					{
-						name: '崇明沙乌头猪',
-						layer: 3
-					},
-					{
-						name: '崇明白山羊',
-						layer: 3
-					},
-					{
-						name: '崇明清水蟹',
-						layer: 3
-					},
-				] */
 			},
 			{
 				name: '都市项目',
@@ -138,32 +92,6 @@ export let allLayerInfo = [
 				id: 'zdxm',
 				title: 'zdxm'
 			},
-			/* {
-				name: '重点项目',
-				layer: 2,
-				children: [
-					{
-						name: '现代农业发展专项项目',
-						layer: 3
-					},
-					{
-						name: '农田建设项目',
-						layer: 3
-					},
-					{
-						name: '美丽乡村建设项目',
-						layer: 3
-					},
-					{
-						name: '都市蔬菜优势特色产业集群项目',
-						layer: 3
-					},
-					{
-						name: '水产绿色养殖推广项目',
-						layer: 3
-					}
-				]
-			}, */
 			{
 				name: '龙头企业',
 				layer: 2,
@@ -178,36 +106,6 @@ export let allLayerInfo = [
 				id: 'scjkyzsfc',
 				title: 'scjkyzsfc'
 			},
-			/* {
-				name: '基地分布',
-				layer: 2,
-				children: [
-					{
-						name: '畜牧基地',
-						layer: 3,
-					},
-					{
-						name: '水产基地',
-						layer: 3,
-					},
-					{
-						name: '蔬菜基地',
-						layer: 3,
-					},
-					{
-						name: '花卉基地',
-						layer: 3,
-					},
-					{
-						name: '林果基地',
-						layer: 3,
-					},
-					{
-						name: '种源基地',
-						layer: 3,
-					},
-				]
-			}, */
 			{
 				name: '规模化农业基地',
 				layer: 2,
@@ -215,10 +113,6 @@ export let allLayerInfo = [
 				id: 'gmhnyjd',
 				title: 'gmhnyjd',
 			},
-			/* {
-				name: '土地流转',
-				layer: 2,
-			}, */
 		]
 	},
 
@@ -232,12 +126,6 @@ export let allLayerInfo = [
 				url: 'http://10.108.3.5/ags_feature_svc/dwfy/FeatureServer/0',
 				id: 'gmhyzc',
 				title: 'gmhyzc'
-				/* children: [
-					{
-						name: '（牛、羊、猪、禽）',
-						layer: 3,
-					}
-				] */
 			},
 			{
 				name: '乡镇畜牧兽医站',
@@ -246,10 +134,6 @@ export let allLayerInfo = [
 				id: 'xzxmsyz',
 				title: 'xzxmsyz'
 			},
-			/* {
-				name: '乡镇兽医站',
-				layer: 2,
-			}, */
 			{
 				name: '宠物诊所',
 				layer: 2,
@@ -257,55 +141,12 @@ export let allLayerInfo = [
 				id: 'cwzs',
 				title: 'cwzs',
 			},
-			/* {
-				name: '宠物店',
-				layer: 2,
-			}, */
 		]
 	},
 	{
 		name: '绿色发展',
 		layer: 1,
 		children: [
-			/* {
-				name: '农资门店',
-				id: 'nzmd',
-				title: 'nzmd',
-				layer: 2,
-				url: 'http://10.108.3.5/ags_feature_svc/cm/FeatureServer/1'
-			}, */
-			/* {
-				name: '地理标志',
-				layer: 2,
-				id: 'dlbz',
-				title: 'dlbz',
-				url: 'http://10.121.226.95:8081/OneMapServer/rest/services/AgriGreen/MapServer/2',
-				type: 'tile'
-			},
-			{
-				name: '有机农产品',
-				layer: 2,
-				id: 'yjncp',
-				title: 'yjncp',
-				url: 'http://10.121.226.95:8081/OneMapServer/rest/services/AgriGreen/MapServer/1',
-				type: 'tile'
-			},
-			{
-				name: '菜篮子工程车',
-				layer: 2,
-			},
-			{
-				name: '恒温库',
-				layer: 2,
-			},
-			{
-				name: '冷藏库',
-				layer: 2,
-			},
-			{
-				name: '冷冻库',
-				layer: 2,
-			}, */
 			{
 				name: '农药门店',
 				id: 'nymd',
@@ -348,18 +189,6 @@ export let allLayerInfo = [
 		name: '土地审批',
 		layer: 1,
 		children: [
-			/* {
-				name: '市级储备',
-				layer: 2,
-			},
-			{
-				name: '区级储备',
-				layer: 2,
-			},
-			{
-				name: '一般储备',
-				layer: 2,
-			}, */
 			{
 				name: '意向招商地块',
 				layer: 2,
@@ -374,10 +203,6 @@ export let allLayerInfo = [
 				id: "ssnyd",
 				title: "ssnyd"
 			},
-			// {
-			// 	name: '土地权属',
-			// 	layer: 2,
-			// },
 		]
 	},
 	{
@@ -425,20 +250,6 @@ export let allLayerInfo = [
 				id: "xczxymlxcsfc",
 				title: "xczxymlxcsfc"
 			},
-			/* {
-				name: '三维实景',
-				layer: 2,
-				children: [
-					{
-						name: '乡村振兴示范村',
-						layer: 3,
-					},
-					{
-						name: '美丽乡村示范村',
-						layer: 3,
-					},
-				]
-			}, */
 		]
 	},
 
@@ -447,27 +258,25 @@ export let allLayerInfo = [
 		layer: 1,
 		children: [
 			{
-				name: '物联设备分布',
-				layer: 2,
-				url: 'http://10.108.3.5/ags_feature_svc/zhwl/FeatureServer/0',
-				id: 'wlsbfb',
-				title: 'wlsbfb'
-			},
-			/* {
-				name: '传感器、摄像头分布',
+				name: '观测站区域分布',
 				layer: 2,
+				url: 'http://10.108.3.5/ags_feature_svc/zhwl/FeatureServer/1',
+				id: 'gczqyfb',
+				title: 'gczqyfb'
 			},
 			{
-				name: '智慧速测设备分布',
+				name: '物联感知设备分布',
 				layer: 2,
+				url: 'http://10.108.3.5/ags_feature_svc/zhwl/FeatureServer/2',
+				id: 'wlgzsbfb',
+				title: 'wlgzsbfb'
 			},
 			{
-				name: '水肥一体机分布',
-				layer: 2,
-			}, */
-			{
-				name: '无人农机分布',
+				name: '实验室检测点分布',
 				layer: 2,
+				url: 'http://10.108.3.5/ags_feature_svc/zhwl/FeatureServer/3',
+				id: 'sysjcdfb',
+				title: 'sysjcdfb'
 			},
 		]
 	},

src/views/deck/IndexPage.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="deck">
     <my-map @pointSearchRes="(params)=>handlePointSearchRes(params)"/>
-    <div class="header">
+    <div class="header" v-show="$store.state.headerShow">
       <div class="h-left">
         <img src="../../assets/imgs/deck/btn-home.png" alt="" class="hl-home button-pic" @click="handleToMainPage()">
       </div>
@@ -72,7 +72,7 @@
         </ul>
       </div>
     </div>
-    <ul class="tools" :class="{'has-right': $store.state.hasRightPanel&&!multiScreenMode}">
+    <ul class="tools" v-show="$store.state.toolsShow" :class="{'has-right': $store.state.hasRightPanel&&!multiScreenMode}">
       <li v-for="item in toolList" :key="item.name" @click="handleClickTool(item)">
         <img :src="item.isOn? item.imgOn: item.img" alt="">
       </li>
@@ -105,8 +105,11 @@
       </el-form>
       <div class="close" @click="closeJl">x</div>
     </div>
-    <base-map-area v-show="!multiScreenMode" :class="{'has-right': $store.state.hasRightPanel}" @changeBaseMap="(name)=>handleChangeBaseMap(name)"/>
-
+    <base-map-area
+      v-show="!multiScreenMode && $store.state.baseMapShow"
+      :class="{'has-right': $store.state.hasRightPanel}"
+      @changeBaseMap="(name)=>handleChangeBaseMap(name)"
+    />
     <el-form v-if="multiScreenMode" class="multi-screen">
       <el-form-item v-for="(item,index) in 4" :key="item" :class="['split-select', 'split-select-'+item]">
         <el-select v-model="hkyxForm[index]" @change="multiScreenLayerChange(index)" placeholder="请选择" class="select-default" popper-class="select-default-popper">

src/views/deck/pages/Page_zhcj.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="page-zhcj" class="deck-pages">
-    <ul class="menu-left">
+    <ul class="menu-left" v-show="menuShow">
       <li v-for="item in menuList" :key="item.id" @click="handleChangePage(item)"
         :class="{ 'highlight': item.id===currentPage }"
       >
@@ -11,7 +11,7 @@
 
     <ZhcjTscy v-if="currentPage===1"/>
     <ZhcjZdxm v-if="currentPage===2"/>
-    <ZhcjZhgc v-if="currentPage===4"/>
+    <ZhcjZhgc v-if="currentPage===4" @toggleMenuShow="(show) => menuShow = show"/>
   </div>
 </template>
 
@@ -29,6 +29,7 @@ export default {
   },
   data() {
     return {
+      menuShow: true,
       currentPage: 1,
       menuList: [
         { id: 1, img: require('../../../assets/imgs/deck/page_zhcj/menu-zhcj-1.png'), title: '特色产业', hasRight: true },

src/views/deck/pages/zhcj_sub/ZhcjZhgc.vue

@@ -1,98 +1,165 @@
 <template>
   <div>
-    <div class="c-left">
-      <span class="box-title2">观测站概况</span>
-      <div class="cl-b1">
-        <p>{{ data_clb1.des }}</p>
-        <ul class="l1-list">
-          <li v-for="item in data_clb1.list" :key="item.title">
-            <img :src="item.icon" alt="">
+    <div class="sub-header" v-if="subPageShow">
+      <div class="sh-back" @click="toggleSubPage(false)">
+        <img src="@/assets/imgs/deck/page_zhcj/btn-back.png" alt="">
+        <span class="text-28">返回</span>
+      </div>
+      <div class="sh-title">{{ subPageData.title }}</div>
+    </div>
+    <div class="c-left" :class="{'move-left': subPageShow}">
+      <template v-if="!subPageShow">
+        <span class="box-title2">观测站概况</span>
+        <div class="cl-b1">
+          <p>{{ data_clb1.des }}</p>
+          <ul class="l1-list">
+            <li v-for="item in data_clb1.list" :key="item.title">
+              <img :src="item.icon" alt="">
+              <div>
+                <span>{{ item.title }}</span>
+                <ul class="l1-c-list">
+                  <li v-for="item2 in item.content" :key="item2.name">
+                    <span class="text-28">{{ item2.name }}</span>
+                    <div>
+                      <span class="text-emp-36">{{ item2.value }}</span>
+                      <span class="text-28">{{ item2.unit }}</span>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <span class="box-title2">观测指标概况</span>
+        <div class="cl-b2">
+          <span class="l2-subtitle">观测指标体系</span>
+          <div class="l2-p1">
+            <img src="@/assets/imgs/deck/page_zhcj/icon-gczb.png" alt="">
             <div>
-              <span>{{ item.title }}</span>
-              <ul class="l1-c-list">
-                <li v-for="item2 in item.content" :key="item2.name">
+              <div>
+                <span>观测指标</span>
+                <span><span class="text-emp-36">{{ data_clb2.gczbtx.count }}</span><span class="text-28">项</span></span>
+              </div>
+              <ul>
+                <li v-for="item in data_clb2.gczbtx.items" :key="item" class="text-28">{{ item }}</li>
+              </ul>
+            </div>
+          </div>
+          <span class="l2-subtitle">数据采集方式</span>
+          <ul class="l2-p2">
+            <li v-for="item in data_clb2.sjcjfs" :key="item.cata">
+              <div><span>{{ item.cata }}</span></div>
+              <ul class="l2p2-rows">
+                <li v-for="(item2,index) in item.items" :key="item2.name">
+                  <img v-if="index===0" src="@/assets/imgs/deck/page_zhcj/icon-sjcj-zb.png" alt="">
+                  <img v-if="index===1" src="@/assets/imgs/deck/page_zhcj/icon-sjcj-sj.png" alt="">
+                  <img v-if="index===2" src="@/assets/imgs/deck/page_zhcj/icon-sjcj-sb.png" alt="">
                   <span class="text-28">{{ item2.name }}</span>
-                  <div>
-                    <span class="text-emp-36">{{ item2.value }}</span>
-                    <span class="text-28">{{ item2.unit }}</span>
-                  </div>
+                  <div><span class="text-emp-36">{{ item2.count }}</span><span class="text-28">{{ item2.unit }}</span></div>
                 </li>
               </ul>
+            </li>
+          </ul>
+        </div>
+      </template>
+      <template v-else>
+        <span class="box-title2">观测点概况</span>
+        <ul class="sl-b1 des-plain">
+          <li v-for="item in subPageData.gcdgk" :key="item.title">
+            <span>{{ item.title }}:</span>
+            <div>
+              <span :class="{'text-emp-36':item.unit}">{{ item.value }}</span>
+              <span v-if="item.unit">{{ item.unit }}</span>
             </div>
           </li>
         </ul>
-      </div>
-      <span class="box-title2">观测指标概况</span>
-      <div class="cl-b2">
-        <span class="l2-subtitle">观测指标体系</span>
-        <div class="l2-p1">
-          <img src="@/assets/imgs/deck/page_zhcj/icon-gczb.png" alt="">
-          <div>
+        <span class="box-title2">观测试验概况</span>
+        <ul class="sl-b2 des-plain">
+          <li v-for="item in subPageData.gcsygk" :key="item.title">
+            <span>{{ item.title }}:</span>
             <div>
-              <span>观测指标</span>
-              <span><span class="text-emp-36">{{ data_clb2.gczbtx.count }}</span><span class="text-28">项</span></span>
+              <span :class="{'text-emp-36':item.unit}">{{ item.value }}</span>
+              <span v-if="item.unit">{{ item.unit }}</span>
             </div>
-            <ul>
-              <li v-for="item in data_clb2.gczbtx.items" :key="item" class="text-28">{{ item }}</li>
-            </ul>
-          </div>
-        </div>
-        <span class="l2-subtitle">数据采集方式</span>
-        <ul class="l2-p2">
-          <li v-for="item in data_clb2.sjcjfs" :key="item.cata">
-            <div><span>{{ item.cata }}</span></div>
-            <ul class="l2p2-rows">
-              <li v-for="(item2,index) in item.items" :key="item2.name">
-                <img v-if="index===0" src="@/assets/imgs/deck/page_zhcj/icon-sjcj-zb.png" alt="">
-                <img v-if="index===1" src="@/assets/imgs/deck/page_zhcj/icon-sjcj-sj.png" alt="">
-                <img v-if="index===2" src="@/assets/imgs/deck/page_zhcj/icon-sjcj-sb.png" alt="">
-                <span class="text-28">{{ item2.name }}</span>
-                <div><span class="text-emp-36">{{ item2.count }}</span><span class="text-28">{{ item2.unit }}</span></div>
-              </li>
-            </ul>
           </li>
         </ul>
-      </div>
+      </template>
     </div>
     <div class="c-right">
-      <span class="box-title2">三大技术模式</span>
-      <div class="cr-b1">
-        <el-table :data="tableData_crb1" class="table-default" height="20vh">
-          <el-table-column label="技术模式" prop="techMode" min-width="160" show-overflow-tooltip/>
-          <el-table-column label="试验面积(亩)" min-width="100" show-overflow-tooltip>
-            <template #default="scope">
-              <span :class="{'td-emphasis': scope.row.techMode==='合计'}">{{ scope.row.testArea }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="推广面积(亩)" min-width="100" show-overflow-tooltip>
-            <template #default="scope">
-              <span :class="{'td-emphasis': scope.row.techMode==='合计'}">{{ scope.row.promoteArea }}</span>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <span class="box-title2">观测站清单</span>
-      <div class="cr-b2">
-        <el-table :data="tableData_crb2" class="table-default" height="29vh">
-          <el-table-column label="名称" prop="name" min-width="90" show-overflow-tooltip/>
-          <el-table-column label="乡镇" prop="xz" min-width="90" show-overflow-tooltip/>
-          <el-table-column label="地址" prop="address" min-width="160" show-overflow-tooltip/>
-        </el-table>
-      </div>
-      <span class="box-title2">实时告警</span>
-      <div class="cr-b3">
-        <el-table :data="tableData_crb3" class="table-default" height="25vh">
-          <el-table-column label="类型" min-width="90" show-overflow-tooltip>
-            <template #default="scope">
-              <span style="color: #00ff00;">【{{ scope.row.type }}】</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="内容" prop="content" min-width="140" show-overflow-tooltip/>
-          <el-table-column label="时间" prop="time" min-width="120" show-overflow-tooltip/>
-        </el-table>
-      </div>
+      <template v-if="!subPageShow">
+        <span class="box-title2">三大技术模式</span>
+        <div class="cr-b1">
+          <el-table :data="tableData_crb1" class="table-default" height="20vh">
+            <el-table-column label="技术模式" prop="techMode" min-width="160" show-overflow-tooltip/>
+            <el-table-column label="试验面积(亩)" min-width="100" show-overflow-tooltip>
+              <template #default="scope">
+                <span :class="{'td-emphasis': scope.row.techMode==='合计'}">{{ scope.row.testArea }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="推广面积(亩)" min-width="100" show-overflow-tooltip>
+              <template #default="scope">
+                <span :class="{'td-emphasis': scope.row.techMode==='合计'}">{{ scope.row.promoteArea }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <span class="box-title2">观测站清单</span>
+        <div class="cr-b2">
+          <el-table :data="tableData_crb2" class="table-default" height="29vh" @row-click="handlePickGcz">
+            <el-table-column label="名称" prop="name" min-width="90" show-overflow-tooltip/>
+            <el-table-column label="乡镇" prop="xz" min-width="90" show-overflow-tooltip/>
+            <el-table-column label="地址" prop="address" min-width="160" show-overflow-tooltip/>
+          </el-table>
+        </div>
+        <span class="box-title2">实时告警</span>
+        <div class="cr-b3">
+          <el-table :data="tableData_crb3" class="table-default" height="25vh">
+            <el-table-column label="类型" min-width="90" show-overflow-tooltip>
+              <template #default="scope">
+                <span style="color: #00ff00;">【{{ scope.row.type }}】</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="内容" prop="content" min-width="140" show-overflow-tooltip/>
+            <el-table-column label="时间" prop="time" min-width="120" show-overflow-tooltip/>
+          </el-table>
+        </div>
+      </template>
+      <template v-else>
+        <span class="box-title2">物联网监测设备</span>
+        <div class="sr-b1">
+          <div id="chart-srb1"></div>
+          <i class="btn-left" @click="switchChartData('pre')"></i>
+          <i class="btn-right" @click="switchChartData('next')"></i>
+        </div>
+        <span class="box-title2">实验室检测</span>
+        <div class="sr-b2">
+          <el-table :data="subPageData.sysjc" class="table-default" height="28vh">
+            <el-table-column label="月份" prop="month" min-width="100" show-overflow-tooltip/>
+            <el-table-column label="水质检测" min-width="100" show-overflow-tooltip>
+              <template #default="scope">
+                <span class="td-link" @click="handleCheckTest(scope.row.water)">查看</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="土壤检测" min-width="80" show-overflow-tooltip>
+              <template #default="scope">
+                <span class="td-link" @click="handleCheckTest(scope.row.mud)">查看</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <span class="box-title2">调查统计</span>
+        <ul class="sr-b3 des-plain">
+          <li v-for="item in subPageData.dctj" :key="item.title">
+            <span>{{ item.title }}:</span>
+            <div>
+              <span :class="{'text-emp-36':item.unit}">{{ item.value }}</span>
+              <span v-if="item.unit">{{ item.unit }}</span>
+            </div>
+          </li>
+        </ul>
+      </template>
     </div>
-    <div class="legend panel-default">
+    <div class="legend panel-default" v-show="!subPageShow">
       <main>
         <ul>
           <li class="all">
@@ -107,13 +174,26 @@
         </ul>
       </main>
     </div>
-    <div class="btn-upload">
+    <div class="sub-legend panel-default" v-if="subPageShow">
+      <header><span>图例</span></header>
+      <main>
+        <ul>
+          <li v-for="item in subLegendData" :key="item.name">
+            <img v-if="item.icon" :src="item.icon" alt="">
+            <i v-else :style="'background:'+ item.bg+';borderColor:'+item.border+';'"></i>
+            <span class="text-28">{{ item.name }}</span>
+          </li>
+        </ul>
+      </main>
+    </div>
+    <div class="btn-upload" v-show="!subPageShow">
       <i :class="{'on': uploadIsOn}" @click="handleUpload"></i>
     </div>
   </div>
 </template>
 
 <script>
+import { setTzl } from '@/echarts/options'
 
 export default {
   name: 'ZhcjZhgc',
@@ -166,7 +246,59 @@ export default {
           { name: '蔬菜', icon: require('@/assets/imgs/deck/page_zhcj/legend-zhgc-scai.png'), isOn: false },
         ]
       },
-      uploadIsOn: false
+      uploadIsOn: false,
+      subPageShow: false,
+      subLegendData: [
+        { name: '实验室检测点', icon: require('@/assets/imgs/deck/page_zhcj/legend-gcd-green.png') },
+        { name: '物联感知设备点', icon: require('@/assets/imgs/deck/page_zhcj/legend-gcd-blue.png') },
+        { name: '核心区域', bg: 'rgba(0,255,0,0.2)', border: 'rgba(0,255,0,0.8)' },
+        { name: '示范区域', bg: 'rgba(255,255,0,0.2)', border: 'rgba(255,255,0,0.8)' },
+      ],
+      subPageData: {
+        title: '',
+        gcdgk: [
+          { title: '点位名称', value: 'XXXXXXXXXXXXXX' },
+          { title: '点位类型', value: 'XXXX' },
+          { title: '点位面积', value: 'XXX', unit: '亩' },
+          { title: '认证情况', value: 'XXXX' },
+          { title: '观测单位', value: 'XXXXXXXXXXXX' },
+          { title: '关键技术', value: '1.XXXXXXXXXX\n2.XXXXXXXXXXX' },
+          { title: '监测指标', value: 'XXXXX、XXXX、XXXX、XXXXXX、XXXXXXXXX、XXXXX' },
+          { title: '负责人', value: 'XXX' },
+          { title: '联系电话', value: 'XXXXXXXXXX' },
+        ],
+        gcsygk: [
+          { title: '观测试验名称', value: 'XXXXXXXXXXXXXX' },
+          { title: '核心区面积', value: 'XXX', unit: '亩' },
+          { title: '示范区面积', value: 'XXX', unit: '亩' },
+          { title: '试验目的', value: 'XXXXXXXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXXXXXXXX' },
+          { title: '试验内容', value: 'XXXXXXXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXXXXXXXX' },
+        ],
+        dctj: [
+          { title: '作物类型', value: 'XXXXXXXXXXXXXXXXXXXXX' },
+          { title: '作物品种', value: 'XXXXXXXXXXXXXXXXXXXXX' },
+          { title: '长势', value: 'XXXXXXXXXXXXXXXXXXXXX' },
+          { title: '灾情', value: 'XXXXXXXXXXXXXXXXXXXXX' },
+          { title: '病害', value: 'XXXXXXXXXXXXXXXXXXXXX' },
+          { title: '虫害', value: 'XXXXXXXXXXXXXXXXXXXXX' },
+          { title: '养殖类型', value: 'XXXXXXXXXXXXXXXXXXXXX' },
+          { title: '养殖规模', value: 'XXXXXXXXXXXXXXXXXXXXX' },
+          { title: '养殖品种', value: 'XXXXXXXXXXXXXXXXXXXXX' },
+          { title: '生物用药', value: 'XXXXXXXXXXXXXXXXXXXXX' },
+        ],
+        sysjc: [],
+        chartData: [],
+        chartCurrent: 0
+      },
+    }
+  },
+  watch: {
+    'subPageData.chartCurrent': {
+      handler(val) {
+        if(this.subPageData.chartData.length>0) {
+          setTzl(document.getElementById('chart-srb1'), this.subPageData.chartData[val], '单位：mg/L')
+        }
+      }
     }
   },
   mounted() {
@@ -222,10 +354,65 @@ export default {
       setTimeout(() => {
         this.uploadIsOn = false
       }, 200);
+    },
+    handlePickGcz(row) {
+      this.toggleSubPage(true)
+      this.getSubData(row.name)
+    },
+    getSubData(name) {    // 获取观测站子页面数据
+      this.subPageData.title = name
+      let sysjcArr= []
+      for(let i=1; i<15; i++) {
+        sysjcArr.push({ month: '2023.3', water: '', mud: ''})
+      }
+      this.subPageData.sysjc = sysjcArr
+      let chartArr = []
+      for(let i=1; i<5; i++) {
+        chartArr.push([
+          { time: '23-01', 'PH': 500 + Math.random()*3000, '电导率': 500 + Math.random()*3000, '浊度': 500 + Math.random()*3000, '溶解氧': 500 + Math.random()*3000 },
+          { time: '23-02', 'PH': 500 + Math.random()*3000, '电导率': 500 + Math.random()*3000, '浊度': 500 + Math.random()*3000, '溶解氧': 500 + Math.random()*3000 },
+          { time: '23-03', 'PH': 500 + Math.random()*3000, '电导率': 500 + Math.random()*3000, '浊度': 500 + Math.random()*3000, '溶解氧': 500 + Math.random()*3000 },
+          { time: '23-04', 'PH': 500 + Math.random()*3000, '电导率': 500 + Math.random()*3000, '浊度': 500 + Math.random()*3000, '溶解氧': 500 + Math.random()*3000 },
+          { time: '23-05', 'PH': 500 + Math.random()*3000, '电导率': 500 + Math.random()*3000, '浊度': 500 + Math.random()*3000, '溶解氧': 500 + Math.random()*3000 },
+          { time: '23-06', 'PH': 500 + Math.random()*3000, '电导率': 500 + Math.random()*3000, '浊度': 500 + Math.random()*3000, '溶解氧': 500 + Math.random()*3000 },
+        ])
+      }
+      this.subPageData.chartData = chartArr
+      this.$nextTick(() => {
+        setTzl(document.getElementById('chart-srb1'), this.subPageData.chartData[0], '单位：mg/L')
+      })
+    },
+    toggleSubPage(subShow) {    //切换观测站子页面显示
+      this.$emit('toggleMenuShow', !subShow)
+      this.$store.commit('changeToolsShow', !subShow)
+      this.$store.commit('changeBaseMapShow', !subShow)
+      this.$store.commit('changeHeaderShow', !subShow)
+      this.subPageShow = subShow
+    },
+    handleCheckTest(url) {
+      console.log(url)
+    },
+    switchChartData(type) {
+      let len = this.subPageData.chartData.length
+      let current = this.subPageData.chartCurrent
+      if(type==='pre') {
+        if(current>0) {
+          current--
+        }else {
+          current = len-1
+        }
+      }else {
+        if(current<len-1) {
+          current++
+        }else {
+          current = 0
+        }
+      }
+      this.subPageData.chartCurrent = current
     }
   },
-  watch: {
-    
+  beforeDestroy() {
+    this.toggleSubPage(false)
   }
 }
 </script>
@@ -233,6 +420,9 @@ export default {
 <style lang="scss" scoped>
 .c-left {
   left: 260px;
+  &.move-left {
+    left: 30px;
+  }
 }
 
 .cl-b1 {
@@ -448,4 +638,149 @@ export default {
     }
   }
 }
+
+.sub-header {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 189px;
+  box-sizing: border-box;
+  padding-bottom: 30px;
+  background: url('@/assets/imgs/deck/bg-header.png') no-repeat;
+  background-size: cover;
+  background-position: 50%;
+
+  .sh-back {
+    display: flex;
+    align-items: center;
+    img {
+      width: 45px;
+      height: 45px;
+      margin-right: 8px;
+    }
+    float: left;
+    margin: 60px 0 0 70px;
+    cursor: pointer;
+  }
+
+  .sh-title {
+    width: fit-content;
+    margin: 30px auto 0;
+    font-size: 80px;
+    font-family: YSBTH;
+    color: #fff;
+    text-shadow: 2px 3px 0px rgba(17,20,22,0.22);
+  }
+}
+
+.des-plain {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  li {
+    display: flex;
+    align-items: flex-start;
+    line-height: 56px;
+    &>span {
+      display: block;
+      width: 180px;
+      font-size: 28px;
+      font-weight: bold;
+      color: rgba(255,255,255,0.6);
+      text-align: justify;
+      text-align-last: justify;
+      text-justify:distribute-all-lines;
+    }
+    &>div {
+      flex: 1;
+      width: 0;
+      padding-left: 20px;
+      span:not(.text-emp-36) {
+        font-size: 28px;
+        color: #fff;
+        white-space: pre-wrap;
+      }
+      .text-emp-36 {
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.sl-b1 {
+  height: 40vh;
+  margin-bottom: 4vh;
+}
+
+.sl-b2 {
+  height: 30vh;
+  margin-bottom: 3vh;
+}
+
+.sr-b1 {
+  position: relative;
+  #chart-srb1 {
+    width: calc(100% - 70px);
+    margin: 0 auto;
+    height: 19vh;
+  }
+  .btn-left {
+    left: 0;
+    background: url('@/assets/imgs/deck/page_zhcj/arrow-left.png');
+  }
+  .btn-right {
+    right: 0;
+    background: url('@/assets/imgs/deck/page_zhcj/arrow-right.png');
+  }
+  .btn-left, .btn-right {
+    position: absolute;
+    top: calc(50% - 16px);
+    display: block;
+    width: 32px;
+    height: 32px;
+    background-size: cover;
+    cursor: pointer;
+  }
+}
+
+.sr-b2 {
+  .td-link {
+    display: block;
+    font-size: 28px;
+    text-decoration: underline;
+    height: 32px;
+    color: #00FFD5;
+    cursor: pointer;
+  }
+}
+
+.sr-b3 {
+  height: 28vh;
+  &>li>span {
+    width: 150px;
+  }
+}
+
+.sub-legend {
+  width: 360px;
+  height: 430px;
+  left: 870px;
+  bottom: calc(-100vh + 30px);
+  li {
+    display: flex;
+    align-items: center;
+    margin-bottom: 40px;
+    img {
+      width: 40px;
+      height: 40px;
+      margin-right: 15px;
+    }
+    i {
+      width: 32px;
+      height: 32px;
+      margin: 0 19px 0 4px;
+      border: 1px dotted;
+    }
+  }
+}
 </style>