syy

src/views/sixZ.vue

@@ -6,8 +6,113 @@
 			<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>
+            </div>
+
 			<!-- 地图 -->
 			<supermap ref="supermap" style="width: 100%;height: 100vh;">
 			</supermap>
@@ -15,7 +120,7 @@
 
 			<!-- 底部按钮 -->
 			<div class="life-btm-btn">
-				<div class="btn-span">
+				<div class="btn-span on">
 					<span>驾驶舱</span>
 				</div>
 				<div class="btn-span">
@@ -31,7 +136,7 @@
 					<span>监管平台</span>
 				</div>
 				<div class="btn-span">
-					<span>运营体系</span>
+					<span>运管体系</span>
 				</div>
 			</div>
 
@@ -52,6 +157,14 @@
 		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,
@@ -81,7 +194,24 @@
 		},
 		data() {
 			return {
-				input: ''
+				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: {
@@ -105,10 +235,55 @@
 					this.$refs.supermap.removeAllviewer(mapDeptId, -1);
 				});
 			},
+            handleClick(tab, event) {
+                console.log(tab, event);
+            }
 		},
 	}
 </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.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';
 
@@ -147,7 +322,8 @@
 			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 ;
 			}
@@ -188,6 +364,9 @@
 				filter: brightness(170%) hue-rotate(-20deg);
 				transform: translateY(-10px);
 			}
+			.btn-span.on{
+				filter: brightness(170%) hue-rotate(-20deg);
+			}
 		}
 		.btm-btn2{
 			position: absolute;
@@ -228,4 +407,73 @@
 
 
 	}
+    .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;
+        padding-bottom: 15px;
+        border-bottom: 1px dashed #94ccc8;
+        margin-bottom: 15px;
+        p{
+            height: 40px;
+            line-height: 40px;
+            padding-left: 15px;
+            display: flex;
+            flex-direction: row;
+        }
+    }
+    .map_btn span{
+        display: inline-block;
+        background: url("../assets/images/sixZ/sixzbtn1.png") no-repeat center;
+        background-size: 100% 100%;
+        padding: 8px 20px;
+        margin: 8px 8px 8px 0px;
+        font-size: 14px;
+        color: #fff;
+        cursor: pointer;
+    }
+    .map_btn span.on{
+        background: url("../assets/images/sixZ/sixzbtn1_on.png") no-repeat center;
+        background-size: 100% 100%;
+        box-shadow: none;
+    }
+    .map_clear{
+        background: #09335f;
+        color: #a4bfe2;
+        font-size: 14px;
+        float: right;
+        margin: 20px 0px;
+        display: inline-block;
+        padding: 6px 18px;
+    }
+    .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;
+    }
 </style>