Merge branch 'lifeline_develop_siping' of http://116.142.80.13:3000/sooka_onest/visu_lifeline into lifeline_develop_siping

src/router/index.js

@@ -30,9 +30,10 @@ import Layout from '@/layout'
 
 // 公共路由（可视化首页头部链接）
 export const constantRoutes = [{
-	path: '/',
-	redirect: 'forest',
-}]
+		path: '/',
+		redirect: 'homePage',
+	}
+]
 
 
 
@@ -42,16 +43,15 @@ export const constantRoutesNew = [{
 		redirect: 'homePage',
 	},
 
-	{
-		//首页
-		path: '/homePage',
-		name: 'homePage',
-		component: () => import('@/views/homePage'),
-		meta: {
-			// title: '水利云图'
-			title: '水务云图'
-		}
-	},
+  {
+    //首页
+    path: '/homePage',
+    name: 'homePage',
+    component: () => import('@/views/homePage'),
+    meta: {
+      title: '首页'
+    }
+  },
 	{
 		//驾驶舱
 		path: '/Cockpit',
@@ -73,7 +73,17 @@ export const constantRoutesNew = [{
 		}
 	},
 	{
-		//哨兵
+		//哨兵驾驶舱
+		path: '/SentryCockpit',
+		name: 'SentryCockpit',
+		component: () => import('@/views/SentryCockpit'),
+		meta: {
+			// title: '水利云图'
+			title: '哨兵驾驶舱'
+		}
+	},
+	{
+		//哨兵设备中心
 		path: '/Sentinel',
 		name: 'Sentinel',
 		component: () => import('@/views/Sentinel'),
@@ -82,7 +92,16 @@ export const constantRoutesNew = [{
 			title: '哨兵'
 		}
 	},
-
+	{
+		//哨兵用户中心
+		path: '/useCenter',
+		name: 'useCenter',
+		component: () => import('@/views/useCenter'),
+		meta: {
+			// title: '水利云图'
+			title: '哨兵'
+		}
+	},
 	{
 		path: '/login',
 		component: () => import('@/views/system/login'),
@@ -187,4 +206,4 @@ export default new Router({
 		y: 0
 	}),
 	routes: constantRoutesNew
-})
+})

src/views/Cockpit.vue

@@ -1,424 +1,447 @@
 <!--可视化公共模板 林业-->
 <template>
-	<div class="visual-con lifeline-con">
-		<!--主体-->
-		<div class="visual-body">
-			<div class="life-header">
-				<span>四平市城市生命线监管平台</span>
-			</div>
-            <div class="con_left"></div>
-            <div class="con_right">
-                <div class="con_tckz">
-                    <div class="con_tit">图层控制</div>
-                    <div class="con_tckz_div">
-                        <el-tabs v-model="activeName">
-                            <el-tab-pane label="燃气" name="first">
-                                <div class="rq_div tekz_div">
-                                    <p>华生燃气：
-                                        <el-checkbox-group
-                                                v-model="checkedCities1_1">
-                                            <el-checkbox v-for="city in cities1_1" :label="city" :key="city">{{city}}</el-checkbox>
-                                        </el-checkbox-group>
-                                    </p>
-                                    <p>港华燃气：  <el-checkbox-group
-                                            v-model="checkedCities1_2">
-                                        <el-checkbox v-for="city in cities1_2" :label="city" :key="city">{{city}}</el-checkbox>
-                                    </el-checkbox-group></p>
-                                    <p>奥德燃气： <el-checkbox-group
-                                            v-model="checkedCities1_3">
-                                        <el-checkbox v-for="city in cities1_3" :label="city" :key="city">{{city}}</el-checkbox>
-                                    </el-checkbox-group></p>
-                                    <p>润发燃气： <el-checkbox-group
-                                            v-model="checkedCities1_4">
-                                        <el-checkbox v-for="city in cities1_4" :label="city" :key="city">{{city}}</el-checkbox>
-                                    </el-checkbox-group></p>
-                                </div>
-                                <div class="map_btn">
-                                    <span class="map_btn_span on">开挖</span>
-                                    <span class="map_btn_span">测距</span>
-                                    <span class="map_btn_span">测面</span>
-                                    <span class="map_btn_span">测高</span>
-                                    <span class="map_btn_span">填挖方分析</span>
-                                </div>
-                                <a class="map_clear">清除</a>
-                            </el-tab-pane>
-                            <el-tab-pane label="管廊" name="second">
-                                <div class="gl_div tekz_div">
-                                    <p><el-checkbox-group
-                                            v-model="checkedCities2">
-                                        <el-checkbox v-for="city in cities2" :label="city" :key="city">{{city}}</el-checkbox>
-                                    </el-checkbox-group></p>
-                                </div>
-                                <div class="map_btn">
-                                    <span class="map_btn_span on">开挖</span>
-                                    <span class="map_btn_span">测距</span>
-                                    <span class="map_btn_span">测面</span>
-                                    <span class="map_btn_span">测高</span>
-                                    <span class="map_btn_span">填挖方分析</span>
-                                </div>
-                                <a class="map_clear">清除</a>
-                            </el-tab-pane>
-                            <el-tab-pane label="供水" name="three">
-                                <div class="gs_div tekz_div">
-                                    <p><el-checkbox-group
-                                            v-model="checkedCities3">
-                                        <el-checkbox v-for="city in cities3" :label="city" :key="city">{{city}}</el-checkbox>
-                                    </el-checkbox-group></p>
-                                </div>
-                                <div class="map_btn">
-                                    <span class="map_btn_span on">开挖</span>
-                                    <span class="map_btn_span">测距</span>
-                                    <span class="map_btn_span">测面</span>
-                                    <span class="map_btn_span">测高</span>
-                                    <span class="map_btn_span">填挖方分析</span>
-                                </div>
-                                <a class="map_clear">清除</a>
-                            </el-tab-pane>
-                            <el-tab-pane label="排水" name="four">
-                                <div class="ps_div tekz_div">
-                                    <p><el-checkbox-group
-                                            v-model="checkedCities4">
-                                        <el-checkbox v-for="city in cities4" :label="city" :key="city">{{city}}</el-checkbox>
-                                    </el-checkbox-group></p>
-                                </div>
-                                <div class="map_btn">
-                                    <span class="map_btn_span on">开挖</span>
-                                    <span class="map_btn_span">测距</span>
-                                    <span class="map_btn_span">测面</span>
-                                    <span class="map_btn_span">测高</span>
-                                    <span class="map_btn_span">填挖方分析</span>
-                                </div>
-                                <a class="map_clear">清除</a>
-                            </el-tab-pane>
-                            <el-tab-pane label="热力" name="five">
-                                <div class="rl_div tekz_div">
-                                    <p><el-checkbox-group
-                                            v-model="checkedCities5">
-                                        <el-checkbox v-for="city in cities5" :label="city" :key="city">{{city}}</el-checkbox>
-                                    </el-checkbox-group></p>
-                                </div>
-                                <div class="map_btn">
-                                    <span class="map_btn_span on">开挖</span>
-                                    <span class="map_btn_span">测距</span>
-                                    <span class="map_btn_span">测面</span>
-                                    <span class="map_btn_span">测高</span>
-                                    <span class="map_btn_span">填挖方分析</span>
-                                </div>
-                                <a class="map_clear">清除</a>
-                            </el-tab-pane>
-                        </el-tabs>
-                    </div>
+  <div class="visual-con lifeline-con">
+    <!--主体-->
+    <div class="visual-body">
+      <div class="life-header">
+        <span>四平市城市生命线监管平台</span>
+      </div>
+      <div class="con_left"></div>
+      <div class="con_right">
+        <div class="con_tckz">
+          <div class="con_tit">图层控制</div>
+          <div class="con_tckz_div">
+            <el-tabs v-model="activeName">
+              <el-tab-pane label="燃气" name="first">
+                <div class="rq_div tekz_div">
+                  <p>华生燃气：
+                    <el-checkbox-group
+                      v-model="checkedCities1_1">
+                      <el-checkbox v-for="city in cities1_1" :label="city" :key="city">{{city}}</el-checkbox>
+                    </el-checkbox-group>
+                  </p>
+                  <p>港华燃气：  <el-checkbox-group
+                    v-model="checkedCities1_2">
+                    <el-checkbox v-for="city in cities1_2" :label="city" :key="city">{{city}}</el-checkbox>
+                  </el-checkbox-group></p>
+                  <p>奥德燃气： <el-checkbox-group
+                    v-model="checkedCities1_3">
+                    <el-checkbox v-for="city in cities1_3" :label="city" :key="city">{{city}}</el-checkbox>
+                  </el-checkbox-group></p>
+                  <p>润发燃气： <el-checkbox-group
+                    v-model="checkedCities1_4">
+                    <el-checkbox v-for="city in cities1_4" :label="city" :key="city">{{city}}</el-checkbox>
+                  </el-checkbox-group></p>
+                </div>
+                <div class="map_btn">
+                  <button class="map_btn_span on" @click="showExcavation()">开挖</button>
+                  <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
+                  <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
+                  <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>
+                </div>
+                <a class="map_clear" @click="clearAll()">清除</a>
+              </el-tab-pane>
+              <el-tab-pane label="管廊" name="second">
+                <div class="gl_div tekz_div">
+                  <p><el-checkbox-group
+                    v-model="checkedCities2">
+                    <el-checkbox v-for="city in cities2" :label="city" :key="city">{{city}}</el-checkbox>
+                  </el-checkbox-group></p>
+                </div>
+                <div class="map_btn">
+                  <button class="map_btn_span on" @click="showExcavation()">开挖</button>
+                  <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
+                  <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
+                  <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>
+                </div>
+                <a class="map_clear" @click="clearAll()">清除</a>
+              </el-tab-pane>
+              <el-tab-pane label="供水" name="three">
+                <div class="gs_div tekz_div">
+                  <p><el-checkbox-group
+                    v-model="checkedCities3">
+                    <el-checkbox v-for="city in cities3" :label="city" :key="city">{{city}}</el-checkbox>
+                  </el-checkbox-group></p>
+                </div>
+                <div class="map_btn">
+                  <button class="map_btn_span on" @click="showExcavation()">开挖</button>
+                  <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
+                  <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
+                  <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>
+                </div>
+                <a class="map_clear" @click="clearAll()">清除</a>
+              </el-tab-pane>
+              <el-tab-pane label="排水" name="four">
+                <div class="ps_div tekz_div">
+                  <p><el-checkbox-group
+                    v-model="checkedCities4">
+                    <el-checkbox v-for="city in cities4" :label="city" :key="city">{{city}}</el-checkbox>
+                  </el-checkbox-group></p>
+                </div>
+                <div class="map_btn">
+                  <button class="map_btn_span on" @click="showExcavation()">开挖</button>
+                  <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
+                  <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
+                  <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>
+                </div>
+                <a class="map_clear" @click="clearAll()">清除</a>
+              </el-tab-pane>
+              <el-tab-pane label="热力" name="five">
+                <div class="rl_div tekz_div">
+                  <p><el-checkbox-group
+                    v-model="checkedCities5">
+                    <el-checkbox v-for="city in cities5" :label="city" :key="city">{{city}}</el-checkbox>
+                  </el-checkbox-group></p>
+                </div>
+                <div class="map_btn">
+                  <button class="map_btn_span on" @click="showExcavation()">开挖</button>
+                  <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
+                  <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
+                  <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>
+                </div>
+                <a class="map_clear" @click="clearAll()">清除</a>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
 
 
-                </div>
-            </div>
+        </div>
+      </div>
 
-			<!-- 地图 -->
-			<supermap ref="supermap" style="width: 100%;height: 100vh;">
-			</supermap>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%;height: 100vh;">
+      </supermap>
 
 
-			<!-- 底部按钮 -->
-			<div class="life-btm-btn">
-				<div class="btn-span on">
-					<span>驾驶舱</span>
-				</div>
-				<div class="btn-span">
-					<span>监测系统</span>
-				</div>
-				<div class="btn-span">
-					<span>风险清单</span>
-				</div>
-				<div class="btn-span">
-					<span>数据库</span>
-				</div>
-				<div class="btn-span">
-					<span>监管平台</span>
-				</div>
-				<div class="btn-span">
-					<span>运管体系</span>
-				</div>
-			</div>
+      <!-- 底部按钮 -->
+      <div class="life-btm-btn">
+        <div class="btn-span on">
+          <span>驾驶舱</span>
+        </div>
+        <div class="btn-span">
+          <span>监测系统</span>
+        </div>
+        <div class="btn-span">
+          <span>风险清单</span>
+        </div>
+        <div class="btn-span">
+          <span>数据库</span>
+        </div>
+        <div class="btn-span">
+          <span>监管平台</span>
+        </div>
+        <div class="btn-span">
+          <span>运管体系</span>
+        </div>
+      </div>
 
-		</div>
-	</div>
+    </div>
+  </div>
 </template>
 
 <script>
-	import Cookies from 'js-cookie'
-	import supermap from '@/components/supermap-2.5d' //超图
-	import {
-		getUserProfile
-	} from "@/api/system/user";
+import Cookies from 'js-cookie'
+import supermap from '@/components/supermap-2.5d' //超图
+import {
+  getUserProfile
+} from "@/api/system/user";
 
-	import '../assets/styles/hz_body.css';
+import '../assets/styles/hz_body.css';
 
-	import {
-		selectConfigKey
-	} from "@/api/system/config";
-	let echarts = require('echarts')
-    const cityOptions1_1 = ['企业', '厂站', '管网'];
-    const cityOptions1_2 = ['企业', '厂站', '管网'];
-    const cityOptions1_3 = ['企业', '厂站', '管网'];
-    const cityOptions1_4 = ['企业', '厂站', '管网'];
-    const cityOptions2 = ['企业',  '管网'];
-    const cityOptions3 = ['企业',  '供水'];
-    const cityOptions4 = ['企业',  '合流','污水','雨水'];
-    const cityOptions5 = ['企业',  '一次网','二次网','电厂'];
-	export default {
-		components: {
-			supermap,
-		},
-		metaInfo() {
-			return {
-				title: '全域视联态势感知平台',
-				meta: [{
-						charset: "utf-8"
-					},
-					{
-						name: "viewport",
-						content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-					}
-				]
-			}
-		},
-		created() {
+import {
+  selectConfigKey
+} from "@/api/system/config";
+let echarts = require('echarts')
+const cityOptions1_1 = ['企业', '厂站', '管网'];
+const cityOptions1_2 = ['企业', '厂站', '管网'];
+const cityOptions1_3 = ['企业', '厂站', '管网'];
+const cityOptions1_4 = ['企业', '厂站', '管网'];
+const cityOptions2 = ['企业',  '管网'];
+const cityOptions3 = ['企业',  '供水'];
+const cityOptions4 = ['企业',  '合流','污水','雨水'];
+const cityOptions5 = ['企业',  '一次网','二次网','电厂'];
+export default {
+  components: {
+    supermap,
+  },
+  metaInfo() {
+    return {
+      title: '全域视联态势感知平台',
+      meta: [{
+        charset: "utf-8"
+      },
+        {
+          name: "viewport",
+          content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+        }
+      ]
+    }
+  },
+  created() {
 
-		},
-		mounted() {
-			// 初始化地图数据
-			this.getSuperMapUrl();
-			setTimeout(() => {
-				this.title = '全域视联态势感知平台'
-			}, 1000)
-		},
-		data() {
-			return {
-				input: '',
-                activeName:'first',
-                checkedCities1_1: [],
-                checkedCities1_2: [],
-                checkedCities1_3: [],
-                checkedCities1_4: [],
-                checkedCities2: [],
-                checkedCities3: [],
-                checkedCities4: [],
-                checkedCities5: [],
-                cities1_1: cityOptions1_1,
-                cities1_2: cityOptions1_2,
-                cities1_3: cityOptions1_3,
-                cities1_4: cityOptions1_4,
-                cities2: cityOptions2,
-                cities3: cityOptions3,
-                cities4: cityOptions4,
-                cities5: cityOptions5,
-			}
-		},
-		methods: {
-			getSuperMapUrl() {
-				getUserProfile().then(response => {
-					let mapDeptId = response.mapDeptId
-					let num = 0;
-					if (mapDeptId == "365") {
-						num = 0;
-					} else if (mapDeptId == "369") {
-						num = 1;
-					} else if (mapDeptId == "371") {
-						num = 2;
-					} else if (mapDeptId == "373") {
-						num = 3;
-					} else if (mapDeptId == "372") {
-						num = 4;
-					} else if (mapDeptId == "370") {
-						num = 5;
-					}
-					this.$refs.supermap.removeAllviewer(mapDeptId, -1);
-				});
-			},
-            handleClick(tab, event) {
-                console.log(tab, event);
-            }
-		},
-	}
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+    setTimeout(() => {
+      this.title = '全域视联态势感知平台'
+    }, 1000)
+  },
+  data() {
+    return {
+      input: '',
+      activeName:'first',
+      checkedCities1_1: [],
+      checkedCities1_2: [],
+      checkedCities1_3: [],
+      checkedCities1_4: [],
+      checkedCities2: [],
+      checkedCities3: [],
+      checkedCities4: [],
+      checkedCities5: [],
+      cities1_1: cityOptions1_1,
+      cities1_2: cityOptions1_2,
+      cities1_3: cityOptions1_3,
+      cities1_4: cityOptions1_4,
+      cities2: cityOptions2,
+      cities3: cityOptions3,
+      cities4: cityOptions4,
+      cities5: cityOptions5,
+    }
+  },
+  methods: {
+    getSuperMapUrl() {
+      getUserProfile().then(response => {
+        let mapDeptId = response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    //开挖
+    showExcavation(){
+      this.$refs.supermap.excavation();
+    },
+    //开挖
+    showExcavationAnalyze(){
+      this.$refs.supermap.excavationAnalyze();
+    },
+    //测距
+    choseMeasuringDistance(){
+      this.$refs.supermap.choseMeasuringDistance();
+    },
+    //测面
+    choseMeasuringArea(){
+      this.$refs.supermap.choseMeasuringArea();
+    },
+    //测高
+    choseMeasuringHeight(){
+      this.$refs.supermap.choseMeasuringHeight();
+    },
+    //清除
+    clearAll(){
+      this.$refs.supermap.closeMeasuringAll();
+      this.$refs.supermap.closeExcavationAll();
+    }
+  },
+}
 </script>
 <style>
-    .el-tabs__item{
-        border-radius: 25px;
-        height: 33px;
-        line-height: 33px;
-    }
-    .el-tabs__nav-next, .el-tabs__nav-prev{
-        line-height: 33px;
+.el-tabs__item{
+  border-radius: 25px;
+  height: 33px;
+  line-height: 33px;
+}
+.el-tabs__nav-next, .el-tabs__nav-prev{
+  line-height: 33px;
+}
+.el-tabs__item.is-active {
+  background: -webkit-gradient(linear, right top, left top, from(#051d2b4f), color-stop(#006ec861), to(#051d2b96));
+  background: linear-gradient(to left, #051d2b4f, #006ec861, #051d2b96);
+  -webkit-box-shadow: rgba(5, 103, 194, 0.8) 0px 0px 15px inset;
+  box-shadow: rgb(5 103 194 / 80%) 0px 0px 15px inset;
+}
+.el-checkbox{
+  margin-right: 15px!important;
+}
+.el-checkbox__inner{
+  border: 1px solid #0fc5f2;
+  width: 13px;
+  height: 13px;
+  background: none;
+}
+.el-checkbox__label {
+  color: #b9e4ef;
+}
+.el-checkbox__inner::after{
+  border-color:#0fc5f2;
+}
+.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  border-color: #0fc0ee;
+  background: none;
+}
+.el-checkbox__input.is-checked+.el-checkbox__label {
+  color: #0fc5f2;
+}
+.el-checkbox__input.is-disabled .el-checkbox__inner {
+  background-color: #628c91;
+  border-color: #407983;
+  cursor: not-allowed;
+}
+</style>
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import '@/assets/styles/base.scss';
+
+.lifeline-con {
+  /*background: url('../assets/index_img/b-bg.jpg') no-repeat;*/
+
+  .life-header {
+    width: 100%;
+    height: 109px;
+    background: url('../assets/index_img/header-img.png') no-repeat center;
+    position: fixed;
+    top: 0;
+    font-family: pmzd;
+    font-size: 42px;
+    text-align: center;
+    line-height: 80px;
+    animation: headermove 1s ease-out;
+			z-index: 10000;
+
+    span {
+      line-height: 22px;
+      font-weight: 400;
+      color: #EFF8FC;
+      background: linear-gradient(0deg, rgba(119, 186, 255, 1), rgba(255, 255, 255, 1));
+      opacity: 1;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
-    .el-tabs__item.is-active {
-        background: -webkit-gradient(linear, right top, left top, from(#051d2b4f), color-stop(#006ec861), to(#051d2b96));
-        background: linear-gradient(to left, #051d2b4f, #006ec861, #051d2b96);
-        -webkit-box-shadow: rgba(5, 103, 194, 0.8) 0px 0px 15px inset;
-        box-shadow: rgb(5 103 194 / 80%) 0px 0px 15px inset;
+
+  }
+
+  //底部按钮5个
+  .life-btm-btn{
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: url("../assets/images/sixZ/btmbg.png") no-repeat bottom;
+    background-size: 100% 25%;
+    .btn-span:nth-child(1){
+      animation: btnmove 1s ;
     }
-    .el-checkbox{
-        margin-right: 15px!important;
+    .btn-span:nth-child(2){
+      animation: btnmove 1.2s ;
     }
-    .el-checkbox__inner{
-        border: 1px solid #0fc5f2;
-        width: 13px;
-        height: 13px;
-        background: none;
+    .btn-span:nth-child(3){
+      animation: btnmove 1.4s ;
     }
-    .el-checkbox__label {
-        color: #b9e4ef;
+    .btn-span:nth-child(4){
+      animation: btnmove 1.6s ;
     }
-    .el-checkbox__inner::after{
-        border-color:#0fc5f2;
+    .btn-span:nth-child(5){
+      animation: btnmove 1.8s ;
     }
-    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-        border-color: #0fc0ee;
-        background: none;
+    .btn-span{
+      width: 166px;
+      height: 50px;
+      background:url('../assets/index_img/btm-btn.png') no-repeat center;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 10px 5px;
+      transition: all 0.3s ease-in-out ;
+      cursor: pointer;
+      span{
+        font-size: 20px;
+        color: #EFF2FF;
+        font-family: ysbth;
+        line-height: 40px;
+        background: linear-gradient(0deg, rgba(49,190,255,1),  rgba(239,252,254,1), rgba(239,252,254,1));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
     }
-    .el-checkbox__input.is-checked+.el-checkbox__label {
-        color: #0fc5f2;
+    .btn-span:hover{
+      filter: brightness(170%) hue-rotate(-20deg);
+      transform: translateY(-10px);
     }
-    .el-checkbox__input.is-disabled .el-checkbox__inner {
-        background-color: #628c91;
-        border-color: #407983;
-        cursor: not-allowed;
+    .btn-span.on{
+      filter: brightness(170%) hue-rotate(-20deg);
+      box-shadow: none;
     }
-</style>
-<style rel="stylesheet/scss" lang="scss" scoped>
-	@import '@/assets/styles/base.scss';
+  }
+  .btm-btn2{
+    position: absolute;
+    bottom: 80px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    animation: btmmove2 1s ease-out;
+    .btn-span2{
+      margin: 0 10px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      transition: all 0.3s;
 
-	.lifeline-con {
-		/*background: url('../assets/index_img/b-bg.jpg') no-repeat;*/
-
-		.life-header {
-			width: 100%;
-			height: 109px;
-			background: url('../assets/index_img/header-img.png') no-repeat center;
-			position: fixed;
-			top: 0;
-			font-family: pmzd;
-			font-size: 42px;
-			text-align: center;
-			line-height: 80px;
-			animation: headermove 1s ease-out;
-
-			span {
-				line-height: 22px;
-				font-weight: 400;
-				color: #EFF8FC;
-				background: linear-gradient(0deg, rgba(119, 186, 255, 1), rgba(255, 255, 255, 1));
-				opacity: 1;
-				-webkit-background-clip: text;
-				-webkit-text-fill-color: transparent;
-			}
-
-		}
-
-		//底部按钮5个
-	    .life-btm-btn{
-			position: absolute;
-			bottom: 0;
-			width: 100%;
-			display: flex;
-		    justify-content: center;
-			align-items: center;
-            background: url("../assets/images/sixZ/btmbg.png") no-repeat bottom;
-            background-size: 100% 25%;
-			.btn-span:nth-child(1){
-				animation: btnmove 1s ;
-			}
-			.btn-span:nth-child(2){
-				animation: btnmove 1.2s ;
-			}
-			.btn-span:nth-child(3){
-				animation: btnmove 1.4s ;
-			}
-			.btn-span:nth-child(4){
-				animation: btnmove 1.6s ;
-			}
-			.btn-span:nth-child(5){
-				animation: btnmove 1.8s ;
-			}
-			.btn-span{
-				width: 166px;
-				height: 50px;
-				background:url('../assets/index_img/btm-btn.png') no-repeat center;
-				text-align: center;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				margin: 10px 5px;
-				transition: all 0.3s ease-in-out ;
-				cursor: pointer;
-				span{
-					font-size: 20px;
-					color: #EFF2FF;
-					font-family: ysbth;
-					line-height: 40px;
-					background: linear-gradient(0deg, rgba(49,190,255,1),  rgba(239,252,254,1), rgba(239,252,254,1));
-					-webkit-background-clip: text;
-					-webkit-text-fill-color: transparent;
-				}
-			}
-			.btn-span:hover{
-				filter: brightness(170%) hue-rotate(-20deg);
-				transform: translateY(-10px);
-			}
-			.btn-span.on{
-				filter: brightness(170%) hue-rotate(-20deg);
-                box-shadow: none;
-			}
-		}
-		.btm-btn2{
-			position: absolute;
-			bottom: 80px;
-			width: 100%;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			cursor: pointer;
-			animation: btmmove2 1s ease-out;
-			.btn-span2{
-				margin: 0 10px;
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				transition: all 0.3s;
-
-				img{
-					width: 150px;
-					height: 100px;
-				}
-				span{
-					font-size: 20px;
-					color: #EFF2FF;
-					font-family: ysbth;
-					line-height: 40px;
-					background: linear-gradient(0deg, rgba(49,190,255,1),  rgba(239,252,254,1), rgba(239,252,254,1));
-					-webkit-background-clip: text;
-					-webkit-text-fill-color: transparent;
-					margin-top: -10px;
-				}
-			}
-			.btn-span2:hover{
-				filter: brightness(170%) hue-rotate(-20deg);
-				transform: translateY(-10px);
-			}
-		}
+      img{
+        width: 150px;
+        height: 100px;
+      }
+      span{
+        font-size: 20px;
+        color: #EFF2FF;
+        font-family: ysbth;
+        line-height: 40px;
+        background: linear-gradient(0deg, rgba(49,190,255,1),  rgba(239,252,254,1), rgba(239,252,254,1));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        margin-top: -10px;
+      }
+    }
+    .btn-span2:hover{
+      filter: brightness(170%) hue-rotate(-20deg);
+      transform: translateY(-10px);
+    }
+  }
 
 
-	}
-    .con_right{
-        position: absolute;
-        right:20px;
-        top:150px;
-        z-index: 99;
-        width: 350px;
-        background: rgba(3,16,27,0.6);
-        .con_tckz{
-.con_tckz_div{
-    margin: 0px 15px;
-    .tekz_div{
+}
+.con_right{
+  position: absolute;
+  right:20px;
+  top:150px;
+  z-index: 99;
+  width: 350px;
+  background: rgba(3,16,27,0.6);
+  .con_tckz{
+    .con_tckz_div{
+      margin: 0px 15px;
+      .tekz_div{
         font-size: 14px;
         text-align: left;
         color: #fff;
@@ -426,14 +449,14 @@
         border-bottom: 1px dashed #4a5958;
         margin-bottom: 15px;
         p{
-            height: 40px;
-            line-height: 40px;
-            padding-left: 15px;
-            display: flex;
-            flex-direction: row;
+          height: 40px;
+          line-height: 40px;
+          padding-left: 15px;
+          display: flex;
+          flex-direction: row;
         }
-    }
-    .map_btn span{
+      }
+      .map_btn button{
         display: inline-block;
         background: url("../assets/images/sixZ/sixzbtn1.png") no-repeat center;
         background-size: 100% 100%;
@@ -442,13 +465,13 @@
         font-size: 14px;
         color: #fff;
         cursor: pointer;
-    }
-    .map_btn span.on{
+      }
+      .map_btn button.on{
         background: url("../assets/images/sixZ/sixzbtn1_on.png") no-repeat center;
         background-size: 100% 100%;
         box-shadow: none;
-    }
-    .map_clear{
+      }
+      .map_clear{
         background: #09335f;
         color: #a4bfe2;
         font-size: 14px;
@@ -456,25 +479,25 @@
         margin: 20px 0px;
         display: inline-block;
         padding: 6px 18px;
-    }
-    .map_clear:hover{
+      }
+      .map_clear:hover{
         background: #0a5184;
+      }
     }
-}
 
-        }
+  }
 
-    }
+}
 
-    .con_tit{
-        font-size: 18px;
-        font-family: 'ysbth';
-        color: #fff;
-        padding-left: 30px;
-        background: url("../assets/images/sixZ/sixztit.png") no-repeat left;
-        background-size: 100% 100%;
-        height: 35px;
-        line-height: 35px;
-        margin-bottom: 15px;
-    }
+.con_tit{
+  font-size: 18px;
+  font-family: 'ysbth';
+  color: #fff;
+  padding-left: 30px;
+  background: url("../assets/images/sixZ/sixztit.png") no-repeat left;
+  background-size: 100% 100%;
+  height: 35px;
+  line-height: 35px;
+  margin-bottom: 15px;
+}
 </style>

src/views/Sentinel.vue

@@ -503,6 +503,7 @@
 		height: 29px;
 		line-height: 29px;
 		text-align: center;
+		transition: all 0.3s;
 	}
 	.s_header .head_btn a i{
 		display: block;
@@ -516,9 +517,10 @@
 		display: block;
 		text-align: center;
 	}
-	.s_header .head_btn a.on{
+	.s_header .head_btn a.on ,.s_header .head_btn a:hover{
 		background: url("../assets/images/sentinel/hz_btnbg_on.png") no-repeat center;
 		box-shadow: none;
+		filter: brightness(170%);
 	}
 	.con_left{
 		position: absolute;
@@ -574,10 +576,16 @@
 		height: 38px;
 		line-height: 38px;
 		margin-bottom: 5px;
+		
 	}
 	.sp_list dd{
 		display: flex;
 		flex-direction: row;
+		cursor: pointer;
+		transition: all 0.3s;
+	}
+	.sp_list dd:hover{
+		filter: brightness(170%) hue-rotate(-20deg);
 	}
 	.sp_list dd:nth-child(odd){
 		background: linear-gradient(to right, rgba(40, 115, 124, 0.68), rgba(38, 75, 80, 0.68));

src/views/useCenter.vue

@@ -0,0 +1,682 @@
+<!--设备中心-->
+<template>
+	<div class="visual-con hz_body">
+		<div class="s_header">
+			<div class="head_btn">
+				<a><i>驾驶舱</i></a>
+				<a><i>设备中心</i></a>
+			</div>
+			<div class="header_tit"><i>{{title}}</i></div>
+			<div class="head_btn">
+				<a><i>事件中心</i></a>
+				<a class="on"><i>用户中心</i></a>
+			</div>
+			<div class="head_tx">
+				<span><img src="../assets/images/sentinel/hz_tx.png"/></span>
+			</div>
+		</div>
+		<!--主体-->
+		<div class="con_left">
+			<div class="list_tit">用户列表</div>
+			<el-select v-model="value" placeholder="请选择">
+				<el-option
+						v-for="item in options"
+						:key="item.value"
+						:label="item.label"
+						:value="item.value">
+				</el-option>
+			</el-select>
+			<el-input
+					placeholder="请输入用户姓名"
+					suffix-icon="el-icon-search"
+					v-model="input1">
+			</el-input>
+			<dl class="sp_list">
+				<dt><span class="dt1">序号</span><span class="dt2">用户</span><span class="dt3">定位</span></dt>
+				<div class="hei_scroll hei56">
+					<dd><span class="dt1">0101</span><span class="dt2">王大力</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0102</span><span class="dt2">王大力</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0103</span><span class="dt2">王大力</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0104</span><span class="dt2">王大力</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0105</span><span class="dt2">王大力</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0101</span><span class="dt2">王大力</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0102</span><span class="dt2">王大力</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0103</span><span class="dt2">王大力</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0104</span><span class="dt2">王大力</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0105</span><span class="dt2">王大力</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0102</span><span class="dt2">王大力</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0103</span><span class="dt2">王大力</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0104</span><span class="dt2">王大力</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+				</div>
+			</dl>
+			<el-pagination
+					background
+					layout="prev, pager, next"
+					:total="100">
+			</el-pagination>
+		</div>
+		<div class="visual-body">
+			<!--弹框演示模板 开始-->
+			<img src="../assets/images/sentinel/hz_qy.png" class="qydw1"/>
+			<img src="../assets/images/sentinel/hz_qy.png" class="qydw2"/>
+			<img src="../assets/images/sentinel/hz_qy.png" class="qydw3"/>
+			<div class="tk_div">
+				<div class="tk1 tk_bor">
+					<h1>用户信息<i>使用中</i></h1>
+					<p>用户名称：XXXXXXXXXXX</p>
+					<p>用户类型：商业、居民、工业</p>
+					<p>设备建设时间：2005年1月15日</p>
+					<p>用户开栓时间：2025年8月15日</p>
+					<p>最近检查时间：2025年8月15日</p>
+					<p>最近检查报告：<a  @click="toggleDisplay">详情</a></p>
+					<p>历史数值：<a  @click="toggleDisplay">详情</a></p>
+				</div>
+				<div class="tk2 tk_bor"  v-if="isVisible">
+					<h1>哨兵详情</h1>
+					<div id="sbxqChart" ref="MyChart"></div>
+				</div>
+			</div>
+			<!--弹框演示模板 结束-->
+
+
+			<!-- 地图 -->
+			<supermap ref="supermap" style="width: 100%;height: 100vh;">
+			</supermap>
+		</div>
+	</div>
+</template>
+
+<script>
+	import Cookies from 'js-cookie'
+	import supermap from '@/components/supermap-2.5d' //超图
+	import {getUserProfile} from "@/api/system/user";
+
+	import '../assets/styles/hz_body.css';
+
+	import {
+		selectConfigKey
+	} from "@/api/system/config";
+	// import * as echarts from 'echarts'
+	let echarts = require("echarts");
+	export default {
+		name:'MyChart',
+		components: {
+			supermap,
+		},
+		metaInfo () {
+			return {
+				title:'四平市智慧哨兵监管平台',
+				meta:[{
+					charset: "utf-8"
+				},
+					{
+						name: "viewport",
+						content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+					}]
+			}
+		},
+		created() {
+
+		},
+		mounted() {
+			// 初始化地图数据
+			this.getSuperMapUrl();
+			setTimeout(() => {
+				this.title = '四平市智慧哨兵监管平台'
+			}, 1000);
+			this.initChart();
+		},
+		data() {
+			return {
+				isVisible: false, // 初始时设置为false，不显示内容
+				input:'',
+				input1: '',
+				title:'四平市智慧哨兵监管平台',
+				options: [{
+					value: '选项1',
+					label: '华生1'
+				}, {
+					value: '选项2',
+					label: '华生2'
+				}, {
+					value: '选项3',
+					label: '华生3'
+				}, {
+					value: '选项4',
+					label: '华生4'
+				}, {
+					value: '选项5',
+					label: '华生5'
+				}],
+				value: ''
+			}
+		},
+		methods: {
+			getSuperMapUrl(){
+				getUserProfile().then(response => {
+					let mapDeptId=response.mapDeptId
+					let num = 0;
+					if (mapDeptId == "365") {
+						num = 0;
+					} else if (mapDeptId == "369") {
+						num = 1;
+					} else if (mapDeptId == "371") {
+						num = 2;
+					} else if (mapDeptId == "373") {
+						num = 3;
+					} else if (mapDeptId == "372") {
+						num = 4;
+					} else if (mapDeptId == "370") {
+						num = 5;
+					}
+					this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+				});
+			},
+			toggleDisplay() {
+				this.isVisible = !this.isVisible; // 点击按钮时切换isVisible的值
+			},
+			initChart(){
+				// 基于准备好的dom，初始化echarts实例
+				const myChart = echarts.init(this.$refs.myChart)
+				let xdata = [
+					"B4",
+					"B3",
+					"C4",
+					"A1",
+					"E2",
+					"C1",
+					"D1",
+					"A3",
+					"E3",
+					"A2",
+					"D2",
+					"C2",
+					"D3",
+					"D4",
+					"B2",
+					"A4",
+					"C3",
+					"E1",
+					"B1",
+				]; //x轴
+				let dataArr = [
+					4000, 4200, 3800, 3500, 4100, 4150, 4800, 4000, 3200, 3600, 3200, 3100, 4700,
+					3500, 4600, 4500, 3900, 4700, 3400,
+				]; //value
+				let dashedArr = [
+					4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000,
+					4000, 4000, 4000, 4000, 4000, 4000,
+				];
+				let titleName = "预期值";
+				let titleNames = "各馆实际承载力";
+				let option = {
+					backgroundColor: "#11183c",
+					grid: {
+						left: "5%",
+						bottom: "10%",
+						top: "18%",
+						containLabel: true,
+					},
+					tooltip: {
+						trigger: "axis",
+						axisPointer: {
+							type: "shadow",
+						},
+					},
+					legend: {
+						show: true,
+						x: "center",
+						y: 60,
+						textStyle: {
+							color: "#fff", // 图例文字颜色
+							fontSize: 16,
+						},
+					},
+					xAxis: {
+						type: "category",
+						boundaryGap: false,
+						data: xdata,
+						axisLabel: {
+							show: true,
+							textStyle: {
+								color: "#fff",
+							},
+						},
+						axisLine: {
+							lineStyle: {
+								color: "transparent",
+								width: 2, //这里是为了突出显示加上的
+							},
+						},
+					},
+					yAxis: [
+						{
+							type: "value",
+							name: "立方米",
+							nameTextStyle: {
+								color: "#fff",
+							},
+							min: 0,
+							max: 6000,
+							axisLabel: {
+								formatter: "{value}",
+								textStyle: {
+									color: "#fff",
+								},
+							},
+							axisLine: {
+								lineStyle: {
+									color: "transparent",
+									width: 2, //这里是为了突出显示加上的
+								},
+							},
+							axisTick: {
+								show: false,
+							},
+							splitLine: {
+								show: true,
+								lineStyle: {
+									color: "#11366e",
+								},
+							},
+						},
+					],
+					series: [
+						{
+							name: titleName,
+							type: "line",
+							smooth: true,
+							symbol: "none",
+							itemStyle: {
+								normal: {
+									lineStyle: {
+										type: "dashed",
+									},
+									color: "#01F699", //拐点的颜色
+									borderColor: "#01F699", //拐点边框的颜色
+								},
+							},
+							data: dashedArr,
+						},
+						{
+							name: titleNames,
+							type: "line",
+							stack: "总量",
+							smooth: true, //平滑曲线显示
+							symbol: "circle", //标记的图形为实心圆
+							symbolSize: 8,
+							itemStyle: {
+								normal: {
+									color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+										{
+											offset: 0,
+											color: "rgba(3,191,255,1)",
+										},
+										{
+											offset: 1,
+											color: "rgba(18,93,236,1)",
+										},
+									]),
+									areaStyle: {
+										color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+											{
+												offset: 0,
+												color: "rgba(3,191,255,.3)",
+											},
+											{
+												offset: 1,
+												color: "rgba(18,93,236,.3)",
+											},
+										]),
+									},
+								},
+							},
+							data: dataArr,
+						},
+					],
+				};
+				myChart.setOption(option);
+			}
+		},
+	}
+</script>
+<style rel="stylesheet/scss" lang="scss">
+	.visual-con .el-input__inner {
+		border: 1px solid #3bb8a4;
+		background-color: rgba(20, 107, 115, 0.3);
+		color: #fff;
+	}
+
+
+	.hz_body{
+		position: relative;
+	}
+	i,b,u{
+		font-style: normal;
+		text-decoration: none;
+	}
+	/*//头部通用*/
+	.s_header{
+		width: 100%;
+		height: 110px;
+		position: absolute;
+		top:0px;
+		left: 0px;
+		z-index: 99;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-around;
+		background: url("../assets/images/sentinel/hz_header.png") no-repeat center;
+		background-size: contain;
+	}
+	.s_header .header_tit{
+		display: block;
+		width: 1000px;
+		height: 109px;
+		line-height: 65px;
+		text-align: center;
+
+
+	}
+	.s_header .header_tit i{
+		font-family: 'ysbth';
+		font-size: 40px;
+		/*text-shadow: 3px 5.196px 0px rgba(17, 20, 22, 0.22);*/
+		letter-spacing: 4px;
+		background: linear-gradient(180deg, #fff 0%, #b0d3f1 100%);
+		-webkit-background-clip: text;
+		color: transparent;
+		mix-blend-mode: screen;
+		/*text-shadow: 3px 5px 0px rgba(17, 20, 22, 0.22);*/
+		display: block;
+		text-align: center;
+	}
+	.s_header .head_btn{
+		width: 316px;
+	}
+	.s_header .head_tx{
+		display: block;
+		position: absolute;
+		right:20px;
+	}
+
+	.s_header .head_btn a{
+		display: inline-block;
+		background: url("../assets/images/sentinel/hz_btnbg.png") no-repeat center;
+		width: 138px;
+		margin: 0px 10px;
+		height: 29px;
+		line-height: 29px;
+		text-align: center;
+		transition: all 0.3s;
+	}
+	.s_header .head_btn a i{
+		display: block;
+		font-family: 'ysbth';
+		font-size: 20px;
+		background: linear-gradient(180deg, #95dded 60%, #fff 40%);
+		-webkit-background-clip: text;
+		color: transparent;
+		mix-blend-mode: screen;
+		/*text-shadow: 3px 5px 0px rgba(17, 20, 22, 0.22);*/
+		display: block;
+		text-align: center;
+	}
+	.s_header .head_btn a.on ,.s_header .head_btn a:hover{
+		background: url("../assets/images/sentinel/hz_btnbg_on.png") no-repeat center;
+		box-shadow: none;
+		filter: brightness(170%);
+	}
+	.con_left{
+		position: absolute;
+		z-index: 99;
+		left: 30px;
+		top:100px;
+		width: 320px;
+		background: rgba(0,0,0,0.25);
+		padding: 0px 10px 20px 10px!important;
+	}
+	.con_left .list_tit{
+		background: url("../assets/images/sentinel/hz_list_tit.png") no-repeat center;
+		background-size: 100% 100%;
+		height: 44px;
+		line-height: 44px;
+		padding-left: 20px;
+		font-family: 'ysbth';
+		font-size: 20px;
+		color: #fff;
+		margin-bottom: 10px;
+	}
+	.con_left .el-select{
+		width: 100%;
+		margin-bottom: 8px;
+	}
+	.el-select-dropdown {
+		border: 1px solid #3bb7a3;
+		background-color: #0c3038;
+	}
+	.el-select-dropdown__item {
+		color: #b0d3f1;
+	}
+	.el-select-dropdown__item.hover,.con_left  .el-select-dropdown__item:hover {
+		background-color: #0a4c5c;
+	}
+	.el-select-dropdown__item.selected {
+		color: #3bb7a3;
+	}
+	.el-input__inner {
+		color: #b0d3f1;
+		height: 35px;
+		line-height: 35px;
+	}
+	.el-input__icon{
+		line-height: 35px;
+		color: #5bf9e0;
+	}
+	.sp_list{
+		margin-top: 10px!important;
+	}
+	.sp_list dt{
+		background: linear-gradient(to right, rgba(40, 115, 124, 0.68), rgba(38, 75, 80, 0.68));
+		height: 38px;
+		line-height: 38px;
+		margin-bottom: 5px;
+		
+	}
+	.sp_list dd{
+		display: flex;
+		flex-direction: row;
+		cursor: pointer;
+		transition: all 0.3s;
+	}
+	.sp_list dd:hover{
+		filter: brightness(170%) hue-rotate(-20deg);
+	}
+	.sp_list dd:nth-child(odd){
+		background: linear-gradient(to right, rgba(40, 115, 124, 0.68), rgba(38, 75, 80, 0.68));
+		height: 38px;
+		line-height: 38px;
+		margin-bottom: 5px;
+	}
+	.sp_list dd:nth-child(even){
+		background: linear-gradient(to right, rgba(40, 115, 124, 0.38), rgba(38, 75, 80, 0.38));
+		height: 38px;
+		line-height: 38px;
+		margin-bottom: 5px;
+	}
+	.sp_list span{
+		display: inline-block;
+		text-align: left;
+		font-size: 14px;
+		color: #acdfe5;
+		height: 38px;
+		line-height: 38px;
+	}
+	.sp_list span.dt1{
+		width: 60px;
+		background: url("../assets/images/sentinel/hz_list_j.png") no-repeat left;
+		padding-left: 15px;
+	}
+	.sp_list span.dt2{
+		width: 200px;
+		text-align: left;
+	}
+	.sp_list span.dt3{
+		width: 40px;
+		text-align: center;
+		line-height: 38px;
+		position: relative;
+	}
+	.sp_list span.dt3 img{
+		display: inline-block;
+		position: absolute;
+		top:10px;
+		left: 11px;
+	}
+	.el-pagination{
+		width: 100%;
+		margin-top: 20px!important;
+	}
+	.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
+		margin: 0 2px;
+		background-color:unset!important;
+		color: #47c5b0;
+		min-width: 26px;
+	}
+	.el-pagination.is-background .el-pager li:not(.disabled).active {
+		background-color: #47c5b0!important;
+		color: #FFF;
+	}
+	.el-pagination.is-background .el-pager li:not(.disabled):hover {
+		background-color: #47c5b0!important;
+		color: #FFF;
+	}
+	.el-pager li:hover {
+		background-color: #47c5b0!important;
+		color: #FFF;
+	}
+	.hei_scroll{
+		overflow-y: scroll;
+	}
+	.hei_scroll::-webkit-scrollbar{
+		width: 0px;
+		height: 0px;
+	}
+	.hei56{
+		height: 56vh;
+	}
+	.qydw1{
+		position: absolute;
+		top: 60%;
+		left: 40%;
+		display: block;
+		width:54px ;
+		height: 77px;
+	}
+	.qydw2{
+		position: absolute;
+		top: 50%;
+		left: 70%;
+		display: block;
+		width:54px ;
+		height: 77px;
+	}
+	.qydw3{
+		position: absolute;
+		top: 40%;
+		left: 80%;
+		display: block;
+		width:54px ;
+		height: 77px;
+	}
+
+	.tk_div{
+		position: absolute;
+		top: 24%;
+		left: 32.2%;
+		z-index: 98;
+		display: flex;
+		flex-direction: row;
+	}
+	.tk_bor{
+		padding: 15px!important;
+		border: 3px solid #28727e;
+		box-shadow: 0px 0px 24px #28727e;
+		background: rgba(0,0,0,0.39);
+	}
+	.tk_bor h1{
+		padding-left: 20px;
+		background: url("../assets/images/sentinel/hz_k.png") no-repeat left;
+		font-size: 18px;
+		color: #e0e5fa;
+		font-weight: bold;
+		height: 38px;
+		line-height: 38px;
+	}
+	.tk_bor h1 i{
+		display: inline-block;
+		float: right;
+		background: #3bad96;
+		padding: 0px 10px;
+		color: #fff;
+		font-size: 16px;
+		height: 30px;
+		line-height: 30px;
+		position: relative;
+		border-radius: 4px;
+	}
+	.tk_bor h1 i::after{
+		display: block;
+		content: '';
+		border-bottom: 9px solid transparent;
+		border-right: 9px solid #3bad96;
+		border-top: 9px solid transparent;
+		position: absolute;
+		left:-8px;
+		top:8px;
+	}
+	.tk_bor p{
+		padding-left: 20px;
+		background: url("../assets/images/sentinel/hz_k.png") no-repeat left;
+		background-size: 12px;
+		font-size: 16px;
+		color: #fff;
+		line-height: 35px;
+	}
+	.tk_bor p a{
+		color: #6bf5f2;
+		text-underline-offset: 0.4em;
+		text-decoration: underline;
+	}
+	.tk_bor p a:hover{
+		color: #6bf5f2;
+		text-underline-offset: 0.4em;
+		text-decoration: underline;
+		cursor: pointer;
+	}
+	.tk1{
+		position: relative;
+		margin-right: 20px!important;
+	}
+	.tk1::after{
+		display: block;
+		content: '';
+		background: url("../assets/images/sentinel/hz_down.png") no-repeat left;
+		width: 46px;
+		height: 40px;
+		position: absolute;
+		bottom:-40px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+	#sbxqChart{
+		width: 250px;
+		height: 200px;
+	}
+
+
+
+</style>
+<style rel="stylesheet/scss" lang="scss" scoped>
+	@import '@/assets/styles/base.scss';
+</style>