syy

src/views/Cockpit.vue

@@ -10,99 +10,125 @@
       <div class="con_right">
         <div class="con_tckz">
           <div class="con_tit">图层控制</div>
+          <div class="map_tab">
+            <span class="on">四平市</span>
+            <span>铁东区</span>
+            <span>铁西区</span>
+          </div>
           <div class="con_tckz_div">
             <el-tabs v-model="activeName">
               <el-tab-pane label="燃气" name="first">
                 <div class="rq_div tekz_div">
-                  <p>华生燃气：
+                  <div class="tc_div">
+                  <div class="scrollx">
+                  <span>华生燃气：</span>
+                    <div class="scroll-container">
                     <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
+                    </div>
+                </div>
+                  </div>
+                  <div class="tc_div">
+                    <div class="scrollx"><span>港华燃气：</span> <div class="scroll-container"> <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
+                  </el-checkbox-group></div></div>
+                  </div>
+                  <div class="tc_div">
+                    <div class="scrollx"><span>奥德燃气：</span> <div class="scroll-container"><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
+                  </el-checkbox-group></div></div>
+                  </div>
+                      <div class="tc_div">
+                        <div class="scrollx"><span>润发燃气：</span><div class="scroll-container"> <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>
+                  </el-checkbox-group></div></div>
+                      </div>
                 </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
+                  <div class="tc_div">
+                    <div class="scrollx"><span>管廊公司：</span><div class="scroll-container"><el-checkbox-group
                     v-model="checkedCities2">
                     <el-checkbox v-for="city in cities2" :label="city" :key="city">{{city}}</el-checkbox>
-                  </el-checkbox-group></p>
+                  </el-checkbox-group></div></div>
+                </div>
                 </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>
+                  <button class="map_btn_span" @click="choseMeasuringHeight()">测高</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
+                  <div class="tc_div">
+                    <div class="scrollx"><span>水务集团：</span><div class="scroll-container"><el-checkbox-group
                     v-model="checkedCities3">
                     <el-checkbox v-for="city in cities3" :label="city" :key="city">{{city}}</el-checkbox>
-                  </el-checkbox-group></p>
+                  </el-checkbox-group></div></div>
+                </div>
                 </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
+                  <div class="tc_div">
+                    <div class="scrollx"><span>排水部门：</span><div class="scroll-container"><el-checkbox-group
                     v-model="checkedCities4">
                     <el-checkbox v-for="city in cities4" :label="city" :key="city">{{city}}</el-checkbox>
-                  </el-checkbox-group></p>
+                  </el-checkbox-group></div></div>
+                </div>
                 </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
+                  <div class="tc_div">
+                    <div class="scrollx"><span>四平热力：</span><div class="scroll-container"><el-checkbox-group
                     v-model="checkedCities5">
                     <el-checkbox v-for="city in cities5" :label="city" :key="city">{{city}}</el-checkbox>
-                  </el-checkbox-group></p>
+                  </el-checkbox-group></div>
+                    </div>
+                    </div>
+                      <div class="tc_div">
+                        <div class="scrollx"><span>四平电厂：</span><div class="scroll-container"><el-checkbox-group
+                          v-model="checkedCities6">
+                    <el-checkbox v-for="city in cities6" :label="city" :key="city">{{city}}</el-checkbox>
+                  </el-checkbox-group></div>
+                        </div>
+                        </div>
                 </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>
@@ -157,14 +183,15 @@ import {
   selectConfigKey
 } from "@/api/system/config";
 let echarts = require('echarts')
-const cityOptions1_1 = ['企业', '厂站', '管网'];
+const cityOptions1_1 = ['企业', '厂站','次高压管网','中压管网','阀门'];
 const cityOptions1_2 = ['企业', '厂站', '管网'];
 const cityOptions1_3 = ['企业', '厂站', '管网'];
 const cityOptions1_4 = ['企业', '厂站', '管网'];
-const cityOptions2 = ['企业',  '管网'];
-const cityOptions3 = ['企业',  '供水'];
-const cityOptions4 = ['企业',  '合流','污水','雨水'];
-const cityOptions5 = ['企业',  '一次网','二次网','电厂'];
+const cityOptions2 = ['企业',  '管廊'];
+const cityOptions3 = ['企业',  '泵站', '管网'];
+const cityOptions4 = ['企业',  '合流管','污水管','雨水管','雨水篦子'];
+const cityOptions5 = ['企业',  '一次网','二次网','阀门'];
+const cityOptions6 = ['企业',  '直供网'];
 export default {
   components: {
     supermap,
@@ -204,6 +231,7 @@ export default {
       checkedCities3: [],
       checkedCities4: [],
       checkedCities5: [],
+      checkedCities6: [],
       cities1_1: cityOptions1_1,
       cities1_2: cityOptions1_2,
       cities1_3: cityOptions1_3,
@@ -212,6 +240,7 @@ export default {
       cities3: cityOptions3,
       cities4: cityOptions4,
       cities5: cityOptions5,
+      cities6: cityOptions6,
     }
   },
   methods: {
@@ -448,14 +477,69 @@ export default {
         padding-bottom: 15px;
         border-bottom: 1px dashed #4a5958;
         margin-bottom: 15px;
-        p{
-          height: 40px;
+
+        .tc_div{
           line-height: 40px;
           padding-left: 15px;
           display: flex;
           flex-direction: row;
+          width: 100%;
+          .scrollx{
+            width: 100%;
+            white-space: nowrap;
+
+            display: flex;
+            flex-direction: row;
+            height: 40px;
+            span{
+              display: block;
+              width: 80px;
+            }
+            .scroll-container{
+              display: block;
+              height: 40px;
+              overflow-y: scroll;
+              width: 220px;
+              .el-checkbox-group{
+                label{
+                  display: block;
+                  float: left;
+                }
+            }
+
+
+          }
+
+
+
+          }
         }
+
+      }
+
+      .scroll-container::-webkit-scrollbar {
+        /*滚动条整体样式*/
+        width: 6px!important; /*高宽分别对应横竖滚动条的尺寸*/
+        height: 1px!important;
+        display: block!important;
+        cursor: pointer;
       }
+      .scroll-container::-webkit-scrollbar-thumb {
+        /*滚动条里面小方块*/
+        border-radius: 10px;
+        height: 15px;
+        -webkit-box-shadow: inset 0 0 5px rgba(0, 22, 55, 0.87);
+        // background: #E5E5E5;
+        background: rgba(38, 235, 255, 0.5);
+      }
+      .scroll-container::-webkit-scrollbar-track {
+        /*滚动条里面轨道*/
+        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+        border-radius: 10px;
+        background: rgba(10, 37, 64, 0.75);
+      }
+
+
       .map_btn button{
         display: inline-block;
         background: url("../assets/images/sixZ/sixzbtn1.png") no-repeat center;
@@ -500,4 +584,40 @@ export default {
   line-height: 35px;
   margin-bottom: 15px;
 }
+  .map_tab{
+    display: flex;
+    flex-direction: row;
+    justify-content:space-around ;
+    margin-bottom: 25px!important;
+    border-bottom: 2px solid rgba(13, 107, 179, 0.53);
+    span{
+      display: block;
+      /*background: rgba(13, 107, 179, 0.53);*/
+      padding: 8px 20px;
+      color: #fff;
+      font-size: 16px;
+      text-shadow: 0px 0px 4px #0bf3f7;
+      cursor: pointer;
+    }
+    .on{
+      color: #0bf3f7;
+      background: none!important;
+      box-shadow:none;
+      font-weight: bold;
+      position: relative;
+    }
+    .on::after{
+      content: '';
+      display: block;
+      position: absolute;
+      bottom: -10px; /* 下三角位于链接的底部 */
+      left: 50%; /* 水平居中 */
+      width: 0;
+      height: 0;
+      border-left: 9px solid transparent; /* 左边透明 */
+      border-right: 9px solid transparent; /* 右边透明 */
+      border-top: 10px solid rgba(13, 107, 179, 0.53); /* 上边是三角形颜色 */
+      transform: translateX(-50%); /* 确保三角形中心对齐链接的中心 */
+    }
+  }
 </style>