syy

src/assets/styles/base.scss

@@ -45,7 +45,7 @@ $fBlue: #03c6e2;
 $fBlueHover: #07ffc1;
 $fBlueG: #0bf3f7;
 $fListTitle: #2bacf7;
-$barBgc: rgba($color: #051520, $alpha: .9);
+$barBgc: rgba($color: #156b73, $alpha: .7);
 $barShadow: rgba($color: #078ad1, $alpha: .8) 0px 0px 18px inset;
 $barBorder: solid rgba($color: #33467f, $alpha: .7);
 $tableBorder: solid rgba($color: #33467f, $alpha: .7);
@@ -412,7 +412,7 @@ ul {
   }
 
   .el-input__inner:hover {
-    background: #00335c;
+    background: #156b73;
   }
 
   // .el-input__icon {
@@ -585,12 +585,12 @@ ul {
     background: $barBgc;
     box-shadow: $shadowTitle;
     height: 2rem;
-    color:#56dfff ;
+    color:#a5d7dd ;
     border: solid 1px #56dfff;
   }
 
   .el-input__inner:hover {
-    background: #00335c;
+    background: #156b73;
   }
 
   // .el-input__icon {
@@ -1223,11 +1223,11 @@ div::-webkit-scrollbar {
           }
 
           .el-input__inner {
-            background: rgba(0, 18, 64, 0.3);
+            background: rgba(19, 130, 116, 0.3);
             box-shadow: $shadowTitle;
             height: 1.5rem;
             color: $inBlue;
-            border: 1px solid #143E83;
+            border: 1px solid #3bb8a4;
           }
 
           .el-input__inner:hover {
@@ -1530,11 +1530,11 @@ div::-webkit-scrollbar {
           }
 
           .el-input__inner {
-            background: rgba(0, 18, 64, 0.3);
+            background:  rgba(19, 130, 116, 0.3);
             box-shadow: $shadowTitle;
             height: 1.5rem;
             color: $inBlue;
-            border: 1px solid #143E83;
+            border: 1px solid #3bb8a4;
           }
 
           .el-input__inner:hover {
@@ -1888,8 +1888,8 @@ div::-webkit-scrollbar {
 
   }
   .el-input__inner {
-    border: 1px solid #143E83;
-    background-color: rgba(0, 18, 64, 0.3);
+    border: 1px solid #3bb8a4;
+    background-color:  rgba(19, 130, 116, 0.3);
     color: #fff;
   }
 
@@ -2186,11 +2186,11 @@ div::-webkit-scrollbar {
     }
 
     .el-input__inner {
-      background: rgba(0, 18, 64, 0.3);
+      background:  rgba(19, 130, 116, 0.3);
       box-shadow: $shadowTitle;
       height: 1.5rem;
       color: $inBlue;
-      border: 1px solid #143E83;
+      border: 1px solid #3bb8a4;
     }
 
     .el-input__inner:hover {
@@ -3456,7 +3456,7 @@ div::-webkit-scrollbar {
   .el-input__inner {
     background: $searchBG;
     border: 1px solid #2a3a60;
-    color: #1fb0b0;
+    color: #a5d7dd;
   }
 
   .el-button {

src/assets/styles/hz_body.css

@@ -8,67 +8,309 @@ i,b,u{
 /*//头部通用*/
 .header{
   width: 100%;
-  height: 154px;
+  height: 110px;
   position: absolute;
   top:0px;
   left: 0px;
   z-index: 99;
-  background: url("../../assets/images/newWater/hz_topbg.png") no-repeat center;
-  background-size: 100% 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  background: url("../../assets/images/newWater/hz_header.png") no-repeat center;
+  background-size: contain;
 }
 .header .header_tit{
   display: block;
-  width: 100%;
+  width: 1000px;
   height: 109px;
-  line-height: 80px;
+  line-height: 65px;
   text-align: center;
-  background: url("../../assets/images/newWater/hz_header.png") no-repeat center;
-  background-size: 100% 100%;
+
+
 }
 .header .header_tit i{
   font-family: 'ysbth';
-  font-size: 44px;
+  font-size: 40px;
   /*text-shadow: 3px 5.196px 0px rgba(17, 20, 22, 0.22);*/
   letter-spacing: 4px;
-  background: linear-gradient(180deg, #fff 0%, #b8c8de 100%);
+  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;
 }
-.head_right{
+.header .head_btn{
+  width: 316px;
+}
+.header .head_tx{
+  display: block;
   position: absolute;
-  right:10px;
-  top:5px;
-  display: flex;
+  right:20px;
+}
+
+.header .head_btn a{
+  display: inline-block;
+  background: url("../../assets/images/newWater/hz_btnbg.png") no-repeat center;
+  width: 138px;
+  margin: 0px 10px;
+  height: 29px;
+  line-height: 29px;
+  text-align: center;
+}
+.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;
+}
+.header .head_btn a.on{
+  background: url("../../assets/images/newWater/hz_btnbg_on.png") no-repeat center;
+  box-shadow: none;
+}
+.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/newWater/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;
-  height: 40px;
 }
-.head_right .head_time{
- color: #aecaf5;
-  text-align: right;
-  font-family: pmzd;
-  padding-right: 10px;
-  border-right:1px solid #465b70;
+.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;
 }
-.head_right .head_time p{
- font-size: 18px;
+.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;
 }
-.head_right .head_time b{
- font-size: 12px;
+.sp_list span{
+  display: inline-block;
+  text-align: left;
+  font-size: 14px;
+  color: #acdfe5;
+  height: 38px;
+  line-height: 38px;
 }
-.head_right .head_tq{
-  color: #aecaf5;
-  font-family: '黑体';
-  padding:0px 10px;
-  border-right:1px solid #465b70;
+.sp_list span.dt1{
+  width: 60px;
+  background: url("../../assets/images/newWater/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;
-  margin-right: 10px;
+  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;
 }
-.head_right .head_tq span{
-  font-size: 12px;
+.hei_scroll{
+  overflow-y: scroll;
 }
-.head_right .head_tq b{
-  font-size: 12px;
+.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/newWater/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/newWater/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/newWater/hz_down.png") no-repeat left;
+  width: 46px;
+  height: 40px;
+  position: absolute;
+  bottom:-40px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+#sbxqChart{
+  width: 250px;
+  height: 200px;
 }

src/views/homePage.vue

@@ -1,12 +1,87 @@
-<!--可视化公共模板 林业-->
+<!--设备中心-->
 <template>
   <div class="visual-con hz_body">
+    <div class="header">
+      <div class="head_btn">
+        <a><i>驾驶舱</i></a>
+        <a class="on"><i>设备中心</i></a>
+      </div>
+      <div class="header_tit"><i>{{title}}</i></div>
+      <div class="head_btn">
+        <a><i>事件中心</i></a>
+        <a><i>用户中心</i></a>
+      </div>
+      <div class="head_tx">
+        <span><img src="../../../visu_lifeline/src/assets/images/newWater/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">G068545</span><span class="dt3"><img src="../../../visu_lifeline/src/assets/images/newWater/hz_list_d.png"/></span></dd>
+        <dd><span class="dt1">0102</span><span class="dt2">G068545</span><span class="dt3"><img src="../../../visu_lifeline/src/assets/images/newWater/hz_list_d.png"/></span></dd>
+        <dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3"><img src="../../../visu_lifeline/src/assets/images/newWater/hz_list_d.png"/></span></dd>
+        <dd><span class="dt1">0104</span><span class="dt2">G068545</span><span class="dt3"><img src="../../../visu_lifeline/src/assets/images/newWater/hz_list_d.png"/></span></dd>
+        <dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3"><img src="../../../visu_lifeline/src/assets/images/newWater/hz_list_d.png"/></span></dd>
+        <dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3"><img src="../../../visu_lifeline/src/assets/images/newWater/hz_list_d.png"/></span></dd>
+        <dd><span class="dt1">0102</span><span class="dt2">G068545</span><span class="dt3"><img src="../../../visu_lifeline/src/assets/images/newWater/hz_list_d.png"/></span></dd>
+        <dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3"><img src="../../../visu_lifeline/src/assets/images/newWater/hz_list_d.png"/></span></dd>
+        <dd><span class="dt1">0104</span><span class="dt2">G068545</span><span class="dt3"><img src="../../../visu_lifeline/src/assets/images/newWater/hz_list_d.png"/></span></dd>
+        <dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3"><img src="../../../visu_lifeline/src/assets/images/newWater/hz_list_d.png"/></span></dd>
+        <dd><span class="dt1">0102</span><span class="dt2">G068545</span><span class="dt3"><img src="../../../visu_lifeline/src/assets/images/newWater/hz_list_d.png"/></span></dd>
+        <dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3"><img src="../../../visu_lifeline/src/assets/images/newWater/hz_list_d.png"/></span></dd>
+        <dd><span class="dt1">0104</span><span class="dt2">G068545</span><span class="dt3"><img src="../../../visu_lifeline/src/assets/images/newWater/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="../../../visu_lifeline/src/assets/images/newWater/hz_qy.png" class="qydw1"/>
+      <img src="../../../visu_lifeline/src/assets/images/newWater/hz_qy.png" class="qydw2"/>
+      <img src="../../../visu_lifeline/src/assets/images/newWater/hz_qy.png" class="qydw3"/>
+      <div class="tk_div">
+        <div class="tk1 tk_bor">
+          <h1>GGB19329<i>使用中</i></h1>
+          <p>设备名称：GGB19329</p>
+          <p>设备类型：燃气哨兵</p>
+          <p>设备建设时间：2005年1月15日</p>
+          <p>设备监测指标：震动、温度、可燃气体浓度</p>
+          <p>所在街道：紫气大路</p>
+          <p>安装位置：XXX大路于XXX大街交汇南100米</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>
@@ -21,14 +96,16 @@ import '../assets/styles/hz_body.css';
 import {
   selectConfigKey
 } from "@/api/system/config";
-let echarts = require('echarts')
+// import * as echarts from 'echarts'
+let echarts = require("echarts");
 export default {
+  name:'MyChart',
   components: {
     supermap,
   },
   metaInfo () {
     return {
-      title:'全域视联态势感知平台',
+      title:'四平市智慧哨兵监管平台',
       meta:[{
         charset: "utf-8"
       },
@@ -45,12 +122,33 @@ export default {
     // 初始化地图数据
     this.getSuperMapUrl();
     setTimeout(() => {
-      this.title = '全域视联态势感知平台'
-    }, 1000)
+      this.title = '四平市智慧哨兵监管平台'
+    }, 1000);
+    this.initChart();
   },
   data() {
     return {
-      input:''
+      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: {
@@ -74,6 +172,171 @@ export default {
         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>