静态排版继续

src/assets/css/index.css

@@ -193,7 +193,8 @@ header {
 }
 
 .panel::before,
-.mapBox::before {
+.mapBox::before,
+.mapSec::before {
     position: absolute;
     top: 0;
     left: 0;
@@ -206,7 +207,8 @@ header {
 }
 
 .panel::after,
-.mapBox::after {
+.mapBox::after,
+.mapSec::after {
     position: absolute;
     top: 0;
     right: 0;
@@ -225,7 +227,7 @@ header {
     width: 100%;
 }
 
-.panel .panel-footer::before {
+.panel-footer::before {
     position: absolute;
     bottom: 0;
     left: 0;
@@ -237,7 +239,7 @@ header {
     z-index: 999
 }
 
-.panel .panel-footer::after {
+.panel-footer::after {
     position: absolute;
     bottom: 0;
     right: 0;
@@ -528,11 +530,11 @@ p {
 
 .filterSec select,
 .filterSec option {
-    border: 1px solid #2399ed;
+    border: 1px solid #036B77;
     min-width: 2.05rem;
     font-size: .15rem;
     height: .27rem;
-    color: #2399ed;
+    color: #036B77;
     line-height: 0.45rem;
     /* background: rgba(0, 0, 0, 0); */
     outline: none;
@@ -545,9 +547,7 @@ p {
 
 /* 站点概览 */
 
-.powerView {
-    border: 1px solid red;
-}
+.powerView {}
 
 .panel.powerView {
     height: 100%;
@@ -587,5 +587,97 @@ p {
     background-image: none;
 }
 
+.histTab {
+    position: absolute;
+    top: .62rem;
+    left: 45%;
+    z-index: 1000
+}
+
+.histTab li {
+    display: inline-block;
+    border: 1px solid #0df4fe;
+    padding: .05rem .12rem;
+    cursor: pointer;
+}
+
+
+/* 分时电量start */
+
+.eleShareTit {
+    font-size: .2rem;
+    margin: .5rem 0 .2rem;
+    text-align: center;
+}
+
+.powerBox {
+    height: 100%;
+}
+
+.powerBox .powerViewBottom {
+    height: 70%;
+    position: relative;
+}
+
+.powerBox .powerViewBottom .filterSec {
+    top: 0;
+    right: -.1rem;
+}
+
+.powerViewBottom .filterSec select {
+    min-width: 1rem
+}
+
+
+/* 分时电量end */
+
+.histTab li.active {
+    background: #036B77
+}
+
+
+/* 站点信息弹框 start */
+
+.mapSec {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* border: 1px solid red; */
+    background-image: url(../images/map-sec-bg.png);
+    background-size: 100% 100%;
+}
+
+.siteModelBox {
+    width: 4.2375rem;
+    /* height: 5rem; */
+    background-image: url(../images/modal-bg.png);
+    background-size: 100% 100%;
+    font-size: .2rem
+}
+
+.siteIcon {
+    /* border: 1px solid red; */
+    padding: 4px;
+    width: .3rem;
+    height: .3rem;
+    position: absolute;
+    top: .1rem;
+    right: .1rem;
+    cursor: pointer;
+    background-image: url(../images/site-icon.png);
+    background-size: 70% 70%;
+    background-position: center center;
+    background-repeat: no-repeat;
+    box-shadow: inset 0 0 0.1rem 0.0125rem rgb(0 244 253 / 60%);
+}
+
+.siteIcon:hover {
+    opacity: .7
+}
+
+
+/* 站点信息弹框 end */
+
 
 /* ming end */

src/views/home/components/pieChart.vue

@@ -135,6 +135,9 @@ export default {
             label: {
               normal: {
                 show: true,
+                 textStyle:{
+                  color:'#fff'
+                },
                 formatter: " {b}：{c} ",
               },
               emphasis: {

src/views/home/components/triangleChart.vue

@@ -0,0 +1,90 @@
+<template>
+
+  <div ref="distion" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+
+export default {
+  props: {
+  },
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+
+  beforeUnmount() {
+    window.removeEventListener("resize", this.chart);
+  },
+
+  methods: {
+    //次数分布折线图
+    initChart() {
+      var chart = echarts.init(this.$refs.distion);
+      var option;
+
+
+      option = {
+        calculable: true,
+                color: ['#FF5656','#FFAF38','#00F4FD'],
+                series: [
+                    {
+                        name: '漏斗图',
+                        type: 'funnel',
+                        left: '10%',
+                        right: '30%',
+                        width: '50%',
+                        top: '0%',
+                        bottom: '0%',
+                        minSize: '0%',
+                        maxSize: '70%',
+                        sort: 'ascending',
+                        gap: 10,
+                        label: {
+                            show: true,
+                            formatter: " {b|{b}}    {a|{c}}",
+                            rich: {
+                                a: {
+                                    color: '#fff',
+                                    fontSize: 16
+                                },
+                                b: {
+                                    color: 'rgba(101,166,196,1)',
+                                    fontSize: 12
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 60,
+                            lineStyle: {
+                                width: 1,
+                                type: 'solid'
+                            }
+                        },
+                        itemStyle: {  //去掉默认白色边框线
+                            borderWidth: 0,
+                            borderColor: '#fff'
+                        },
+                        data: [
+                            {value: 10, name: '重载运行'},
+                            {value: 20, name: '轻载运行'},
+                            {value: 30, name: '正常运行'},
+                        ]
+                    }
+                ]
+      };
+
+      chart.setOption(option);
+      window.addEventListener("resize", () => {
+        chart.resize();
+      });
+      this.chart = chart;
+    },
+  },
+};
+</script>

src/views/home/index.vue

@@ -30,8 +30,8 @@
             <div class="panel-footer"></div>
           </div>
           <div class="panel line1 operStatus">
-            <h2>锥形图</h2>
-            <div class="chart"></div>
+            <triangle-chart></triangle-chart>
+            <!-- <div class="chart"></div> -->
             <div class="panel-footer"></div>
           </div>
         </div>
@@ -78,14 +78,17 @@ import pieChart from "./components/pieChart";
 import barChart from "./components/barChart";
 import lineChart from "./components/lineChart";
 import mapStaticTop from "./components/mapStaticTop";
+import triangleChart from "./components/triangleChart";
 
 
 // 地图
 import AMap from "AMap";
 import AMapUI from "AMapUI";
+
+
 export default {
   name: "index",
-  components: { statisTop, statisBottom, pieChart, barChart, lineChart ,mapStaticTop},
+  components: { statisTop, statisBottom, pieChart, barChart, lineChart ,mapStaticTop,triangleChart},
   data() {
     return {
       map: null,
@@ -97,7 +100,7 @@ export default {
   },
   methods: {
     Overview() {
-      this.$router.push({ path: "/Overview" }); //, query: { title: title }
+      // this.$router.push({ path: "/Overview" }); //, query: { title: title }
     },
     async initMap() {
       this.map = await new AMap.Map("mapF", {
@@ -245,7 +248,7 @@ export default {
       });
 
       poiPicker.onCityReady(() => {
-        poiPicker.suggest("美食");
+        // poiPicker.suggest("美食");
       });
     },
     initMapUi() {

src/views/site/Overview.vue

@@ -6,22 +6,33 @@
         <div class="column">
           <div class="panel powerView">
             <h2>用电量概览</h2>
-
             <div class="powerBox">
-                <power-top></power-top>
-           
-                <power-bottom></power-bottom>
+              <power-top></power-top>
+              <div class="powerViewBottom">
+                <div class="filterSec">
+              <select name="" id="">
+                <option value="11">日</option>
+                <option value="22">月</option>
+              </select>
+            </div>
+                <div class="eleShareTit">分时电量</div>
+                 <ele-share-chart></ele-share-chart>
+              </div>
             </div>
-
             <div class="panel-footer"></div>
           </div>
         </div>
         <div class="column mapBox">
-          <div
-            class="map panel"
-            style="height: 100%; z-index: 999999999999; width: 100%"
-          >
-            <map-static-top></map-static-top>
+          <div class="mapSec" style="height: 100%; z-index: 9; width: 100%">
+            <model-static-top></model-static-top>
+            <i class="siteIcon" @click="modalShow"></i>
+
+            <modal-box
+              v-if="show"
+              @func="getMsgFormSon"
+              :fshow="show"
+            ></modal-box>
+
             <div class="panel-footer"></div>
           </div>
         </div>
@@ -75,7 +86,12 @@
               </select>
             </div>
             <h2>历史趋势</h2>
-            <hist-trend-chart></hist-trend-chart>
+            <ul class="histTab">
+              <li  @click="msg=0" :class="{'active':msg===0}">电流</li>
+              <li @click="msg=1" :class="{'active':msg===1}">电压</li>
+            </ul>
+            <hist-trend-chart v-if="msg===0" style="width:100%"></hist-trend-chart>
+            <hist-trend-chart2 v-if="msg===1" style="width:100%"></hist-trend-chart2>
             <div class="panel-footer"></div>
           </div>
         </div>
@@ -86,47 +102,53 @@
 </template>
 <script>
 import powerTop from "./components/Overview/powerTop";
-import powerBottom from "./components/Overview/powerBottom";
+import eleShareChart from "./components/Overview/eleShareChart";
 import barChart from "./components/Overview/barChart";
-// import lineChart from "./components/Overview/lineChart";
-import mapStaticTop from "./components/Overview/mapStaticTop";
-
+import modelStaticTop from "./components/Overview/modelStaticTop";
 import realTimeChart from "./components/Overview/realTimeChart";
 import histTrendChart from "./components/Overview/histTrendChart";
+import histTrendChart2 from "./components/Overview/histTrendChart2";
 import alarmingChart from "./components/Overview/alarmingChart";
 import pieChart from "./components/Overview/pieChart";
 import pieChart2 from "./components/Overview/pieChart2";
+import modalBox from "./components/Overview/modalBox";
+import EleShareChart from './components/Overview/eleShareChart.vue';
+
 
 export default {
   name: "index",
-  // components: { powerTop, powerBottom, pieChart, barChart, lineChart,mapStaticTop },
   components: {
-     powerTop, powerBottom,
+    powerTop,
+    eleShareChart,
     barChart,
-    mapStaticTop,
+    modelStaticTop,
     realTimeChart,
-    histTrendChart,
+    histTrendChart,histTrendChart2,
     alarmingChart,
     pieChart,
     pieChart2,
+    modalBox,
+    EleShareChart,
   },
   data() {
-    return {};
+    return {
+      show: false,
+       msg: 0
+    };
   },
   created() {},
   mounted() {},
-  methods: {},
+  methods: {
+    modalShow() {
+      this.show = !this.show;
+    },
+    getMsgFormSon(data) {
+      this.show = data;
+    },
+  },
 };
 </script>
 
 <style lang="scss">
-.powerBox {
-  height: 100%;
-  // border: 1px solid pink;
- 
-  .poerrViewBottom {
-    height: 70%;
-    // border: 1px solid red;
-  }
-}
+
 </style>

src/views/site/components/Overview/eleShareChart.vue

@@ -0,0 +1,165 @@
+<template>
+    <div ref="distion" style="width: 100%; height: calc(100% - 0.7rem)"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+
+export default {
+  props: {},
+  data() {
+    return {};
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+
+  beforeUnmount() {
+    window.removeEventListener("resize", this.chart);
+  },
+
+  methods: {
+    //次数分布折线图
+    initChart() {
+      var chart = echarts.init(this.$refs.distion);
+      var option;
+
+      option = {
+        color: [
+          "#4BF7F9",
+          "#35B9FD",
+          "#FE7038",
+          "#F7F94B",
+        ],
+        grid: {
+          left: -100,
+          top: 50,
+          bottom: 10,
+          right: 10,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{b} : {c} ({d}%)",
+        },
+      
+        polar: {},
+        angleAxis: {
+          interval: 0,
+          type: "category",
+          data: [],
+          z: 10,
+          axisLine: {
+            show: false,
+           
+          },
+        },
+        radiusAxis: {
+          min: 40,
+          max: 120,
+          interval: 20,
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: "#0B3E5E",
+              // width: 1,
+              type: "solid",
+            },
+          },
+          axisLabel: {
+            formatter: "{value} %",
+            show: false,
+            padding: [0, 0, 20, 0],
+            color: "red",
+            fontSize: 16,
+          },
+          splitLine: {
+            lineStyle: {
+              color: "red",
+              width: 0,
+              type: "solid",
+            },
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["70%", "71%"],
+            hoverAnimation: false,
+            labelLine: {
+              normal: {
+                show: false,
+                length: 30,
+                length2: 55,
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            name: "",
+            data: [
+              {
+                name: "",
+                value: 0,
+                itemStyle: {
+                  normal: {
+                    color: "#0B4A6B",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            radius: ["0%", "60%"],
+            roseType: "area",
+            zlevel: 10,
+            label: {
+              normal: {
+                show: true,
+                formatter: "{b} : {c} kWh",
+                textStyle: {
+                  fontSize: 12,
+                  color:'#fff'
+                },
+                position: "outside",
+              },
+              emphasis: {
+                show: true,
+              },
+            },
+          
+            data: [
+              {
+                value: 2125.992,
+                name: "平",
+              },
+              {
+                value: 918.662,
+                name: "峰",
+              },
+              {
+                value: 200.56,
+                name: "尖",
+              },
+            
+              {
+                value: 704.033,
+                name: "谷",
+              },
+            ],
+          },
+        ],
+      };
+      chart.setOption(option);
+      window.addEventListener("resize", () => {
+        chart.resize();
+      });
+      this.chart = chart;
+    },
+  },
+};
+</script>
+<style lang="scss">
+</style>

src/views/site/components/Overview/lineChart.vue → src/views/site/components/Overview/histTrendChart2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="distion" style="width: 100%; height: 100%"></div>
+  <div ref="distion2" style="width: 100%; height: 100%"></div>
 </template>
 <script>
 import * as echarts from "echarts";
@@ -11,6 +11,8 @@ export default {
   },
 
   mounted() {
+      
+
     this.$nextTick(() => {
       this.initChart();
     });
@@ -23,16 +25,11 @@ export default {
   methods: {
     //次数分布折线图
     initChart() {
-      var chart = echarts.init(this.$refs.distion);
+      var chart = echarts.init(this.$refs.distion2);
       var option;
 
-      var arr = new Array();
-      for (var i = 0; i < 32; i++) {
-        arr.push(i);
-      }
-
       option = {
-        color: ["#00F4FD", "#FD8F00"],
+        color: ["#FEB70D", "#50F335","#0DC8FE"],
         tooltip: {
           trigger: "axis",
         },
@@ -46,19 +43,31 @@ export default {
           },
 
           left: "30%",
-          top: 0,
+          bottom:'0'
         },
         grid: {
           left: "0%",
           right: "0%",
-          bottom: "0%",
+          bottom: "15%",
           top: "20%",
           containLabel: true,
         },
         xAxis: {
           type: "category",
           boundaryGap: true,
-          data: arr,
+         data: ["0:00",
+            "2:00",
+            "4:00",
+            "6:00",
+            "8:00",
+            "10:00",
+            "12:00",
+            "13:00",
+            "16:00",
+            "18:00",
+            "20:00",
+            "22:00",
+          ],
           axisTick: {
             show: false, //去除刻度线
           },
@@ -70,6 +79,13 @@ export default {
           },
         },
         yAxis: {
+             name: 'A',
+              nameTextStyle: {
+            color: "#fff",
+            fontSize: 10,
+           
+        },
+            max: 1,  //设置左侧最大值
           type: "value",
           axisTick: {
             show: false, //去除刻度线
@@ -90,27 +106,34 @@ export default {
         },
         series: [
           {
-            name: "故障数量",
+            name: "IA(A)",
             type: "line",
             smooth: false, // 曲线是否平滑显示
             // data: yearData[0].data[0],
             data: [
-              24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120, 230, 210,
-              230, 120, 230, 210, 120, 120, 230, 210, 230, 120, 230, 210, 120,
-              24, 40, 101, 134, 90, 230,
+               0.230, 0.120, 0.230,0.22,0.42,0.52,0.11,0.24, 0.40, 0.101, 0.134, 0.30, 0.230, 0.210
+            ],
+            symbolSize: 6, //拐点圆的大小
+            // symbol: 'circle',
+          },
+          {
+            name: "IB(A)",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            // data: yearData[0].data[1],
+            data: [
+            0.120, 0.230,0.22,0.42,0.52, 0.230, 0.210, 0.230,0.11, 0.210, 0.230, 0.120, 0.230
             ],
             symbolSize: 6, //拐点圆的大小
             // symbol: 'circle',
           },
           {
-            name: "故障抢修数量",
+            name: "IC(A)",
             type: "line",
             smooth: false, // 曲线是否平滑显示
             // data: yearData[0].data[1],
             data: [
-              30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130, 110,
-              240, 228, 240, 130, 240, 220, 130, 240, 228, 240, 130, 240, 220,
-              130, 30, 50, 110, 144, 110, 240, 228, 240,
+             0.230, 0.120, 0.230,0.230, 0.210, 0.230, 0.120, 0.230,0.22,0.42,0.52,0.11, 0.210
             ],
             symbolSize: 6, //拐点圆的大小
             // symbol: 'circle',

src/views/site/components/Overview/modalBox.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="siteModelBox">
+    <h2>
+      站点信息
+      <img
+        class="close"
+        src="../../../../assets/images/close.png"
+        alt=""
+        @click="sendMsg"
+      />
+    </h2>
+    <img
+      src="../../../../assets/images/site-img.png"
+      alt=""
+      style="width: 100%; height: 1.2rem"
+    />
+    <div class="siteDetailInfo">
+      <div class="infoLine">
+        <span>站点名称：</span>
+        <p>培训测试</p>
+      </div>
+      <div class="infoLine">
+        <span>站点地址：</span>
+        <p>上海市青浦区徐乐路208号</p>
+      </div>
+      <div class="infoLine">
+        <span>投运时间：</span>
+        <p>2021-06-30</p>
+      </div>
+      <div class="infoLine">
+        <span>监控类型：</span>
+        <p>电力、视频</p>
+      </div>
+      <div class="infoLine">
+        <span>联系人：</span>
+        <p>张三</p>
+      </div>
+      <div class="infoLine">
+        <span>联系电话：</span>
+        <p>13999999999</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["fshow"],
+  data() {
+    return {
+    //   localShow: this.fshow,
+    };
+  },
+  methods: {
+    sendMsg() {
+    //   this.localShow = false;
+    //   this.$emit("func", this.localShow);
+
+      this.fShow = false;
+      this.$emit("func", this.fShow);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.siteModelBox {
+  padding: 0 0.1875rem;
+  position: relative;
+  z-index:999;
+
+  h2 {
+    font-size: 0.2rem;
+    color: #0df4fe;
+    line-height: 0.6rem;
+    .close {
+      position: absolute;
+      right: 0.125rem;
+      top: 0.125rem;
+      cursor: pointer;
+    }
+    .close:hover {
+      opacity: 0.7;
+    }
+  }
+  .infoLine {
+    margin: 0.15rem 0;
+    //   line-height:1.5;
+    span {
+      float: left;
+      color: #0df4fe;
+      display: inline-block;
+      text-align: right;
+      width: 1.4rem;
+    }
+    p {
+      padding-left: 1.4rem;
+    }
+  }
+}
+</style>

src/views/site/components/Overview/mapStaticTop.vue → src/views/site/components/Overview/modelStaticTop.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mapStaticTop">
+  <div class="modelStaticTop">
     <ul>
       <li>
         <div>
@@ -20,25 +20,20 @@
   </div>
 </template>
 <style lang="scss">
-.mapStaticTop {
+.modelStaticTop {
   position: absolute;
   top: 2px;
   left: 2px;
   z-index: 1;
   ul {
-    // display: flex;
     text-align: center;
-
     li {
-      // flex: 1;
-
       padding: 0.125rem 0.25rem;
       display: flex;
       align-items: center;
       justify-content: center;
       background: #081f2f;
       box-shadow: inset 0 0 0.1rem 0.0125rem rgba(0, 244, 253,.6);
-
       p {
         font-size: 0.2rem;
       }

src/views/site/components/Overview/powerBottom.vue

@@ -1,17 +0,0 @@
-<template>
-  <div></div>
-</template>
-<script>
-export default {
-  name: "statisTop",
-  components: {},
-  methods: {
-    // Site_details(){
-    //   this.$router.push({ path: '/Site_details'});//, query: { title: title }
-    // }
-  },
-};
-</script>
-
-<style>
-</style>