项目上传完善

public/index.html

@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=8e266e1ac2ad2383c7773ff504ac248f"></script>
+    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=246349bf278f6225fa80156828d0f061"></script>
     <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
     <title>
         <%= htmlWebpackPlugin.options.title %>

src/assets/css/index.css

@@ -143,6 +143,7 @@ header {
     padding-top: .725rem;
     background-size: cover;
     background-repeat: no-repeat;
+    background-color: rgba(23, 21, 57, 0.5);
 }
 
 .panel.statisTop {
@@ -550,11 +551,63 @@ p {
     background-image: url(../images/deviceSum.png);
 } */
 
-.statisSec .statisBottom ul {
+.statisSec .statisBottom .htAnalogData-box {
+    display: flex;
+    height: 100%
+}
+
+.statisSec .statisBottom .htAnalogData-box>div:first-child {
+    flex: 2;
+    height: 100%
+}
+
+.statisSec .statisBottom .htAnalogData-box>div:last-child {
+    flex: 3;
     height: 100%;
+    padding-left: .25rem
+}
+
+.statisSec .statisBottom .htAnalogData-box .htAnalogData-right {
+    font-size: 0.2125rem
+}
+
+.statisSec .statisBottom .htAnalogData-right .num {
+    width: 1.5rem;
+    display: inline-block;
+    padding-left: .1rem;
+    font-size: .325rem
+}
+
+.statisSec .statisBottom .htAnalogData-right p {
+    line-height: .5375rem;
+    padding-left: .5rem;
+    position: relative;
+    background-size: 100% 100%;
+    background-position: center center;
+    margin-bottom: .42rem;
+    background-repeat: no-repeat;
+    background-image: url(../images/bg-blue2.png);
+}
+
+.statisSec .statisBottom .htAnalogData-right p:last-child {
+    margin-bottom: 0
+}
+
+.statisSec .statisBottom .htAnalogData-right p:nth-child(2) {
+    background-image: url(../images/bg-red2.png);
+}
+
+.statisSec .statisBottom .htAnalogData-right p:nth-child(3) {
+    background-image: url(../images/bg-green2.png);
 }
 
-.statisSec .statisBottom ul li {
+
+/* .statisSec .statisBottom ul {
+    height: 100%;
+} */
+
+
+/* .statisSec .statisBottom ul li {
     position: relative;
     background-size: 100% 100%;
     background-position: center center;
@@ -572,9 +625,9 @@ p {
 
 .statisSec .statisBottom ul li:nth-child(2) {
     margin: 0 .125rem;
-}
+} */
 
-.statisSec .statisBottom .num {
+.statisSec .statisBottom .statisSec .statisBottom .num {
     font-size: .3rem
 }
 

src/views/home/components/statisBottomChart.vue

@@ -0,0 +1,363 @@
+<template>
+  <div ref="triangleChart" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+
+export default {
+  props: ["frtAnalogData"],
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      console.log(1111111111);
+      console.log(this.frtAnalogData);
+      console.log(1111111111);
+      this.initChart();
+    });
+  },
+
+  beforeUnmount() {
+    window.removeEventListener("resize", this.chart);
+  },
+
+  methods: {
+    //次数分布折线图
+    initChart() {
+      var chart = echarts.init(this.$refs.triangleChart);
+
+      var option;
+
+      // var data1 = 0.0;
+      // var data2 = 0.02;
+      // var data3 = 3;
+
+      var data1 = this.frtAnalogData.dayCount<0.001?1:this.frtAnalogData.dayCount;
+      var data2 = this.frtAnalogData.monthCount<0.001?1:this.frtAnalogData.monthCount;
+      var data3 = this.frtAnalogData.yearCount<0.010?1:this.frtAnalogData.yearCount;
+
+      option = {
+        grid: {
+          top: "5%",
+          bottom: "12%",
+        },
+        tooltip: { show:false},
+
+        xAxis: {
+          data: ["目标数"],
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+        },
+        yAxis: {
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+        },
+        series: [
+          // 日用上圆
+          {
+            name: "",
+            type: "pictorialBar",
+            symbolSize: [20, 10], //aa顶部盖子大小
+            symbolOffset: [-24, -4], //aa盖子位置
+            z: 12,
+            data: [
+              {
+                name: "日用",
+                value: data1,
+                symbolPosition: "end", //aa盖子在上边
+                itemStyle: {
+                  normal: {
+                    // color:red,
+                    color: {
+                      x: 0,
+                      y: 0,
+                      x2: 0,
+                      y2: 1,
+                      type: "linear",
+                      global: false,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#006CF1",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0C4AC5",
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+            ],
+          },
+          // 月用上圆
+          {
+            name: "",
+            type: "pictorialBar",
+            symbolSize: [20, 10], //aa顶部盖子大小
+            symbolOffset: [0, -4], //aa盖子位置
+            z: 12,
+            data: [
+              {
+                name: "日用",
+                value: data2,
+                symbolPosition: "end", //aa盖子在上边
+                itemStyle: {
+                  normal: {
+                    // color:red,
+                    color: {
+                      x: 0,
+                      y: 0,
+                      x2: 0,
+                      y2: 1,
+                      type: "linear",
+                      global: false,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#f0757a",
+                        },
+                        {
+                          offset: 1,
+                          color: "#f24e55",
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+            ],
+          },
+          // 年用上圆
+          {
+            name: "",
+            type: "pictorialBar",
+            symbolSize: [20, 10],
+            symbolOffset: [24, -4],
+            z: 12,
+            data: [
+              {
+                name: "年用",
+                value: data3,
+                symbolPosition: "end",
+                itemStyle: {
+                  normal: {
+                    color: {
+                      x: 0,
+                      y: 0,
+                      x2: 0,
+                      y2: 1,
+                      type: "linear",
+                      global: false,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#2ae4ec",
+                        },
+                        {
+                          offset: 1,
+                          color: "#05bcc4",
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+            ],
+          },
+
+          // 内圆
+          {
+            name: "",
+            type: "pictorialBar",
+            z: 1,
+            data: [
+              {
+                name: "",
+                value: data1,
+                symbolSize: [120, 24],
+                symbolOffset: [0, 12],
+                trueVal: "98",
+                itemStyle: {
+                  normal: {
+                    color: "transparent",
+                    borderColor: "#0E40B7",
+                    borderWidth: 1,
+                  },
+                },
+              },
+            ],
+          },
+          // 外圆
+          {
+            name: "",
+            type: "pictorialBar",
+            z: 1,
+            data: [
+              {
+                name: "",
+                value: data1,
+                symbolSize: [100, 14],
+                symbolOffset: [0, 7],
+                trueVal: "98",
+                itemStyle: {
+                  normal: {
+                    color: "rgba(6,18,115,.5)",
+                    borderColor: "#1649C5",
+                    borderWidth: 1,
+                  },
+                },
+              },
+            ],
+          },
+          // 日用主体
+          {
+            type: "bar",
+            z: 9,
+            barWidth: 20,
+            data: [
+              {
+                name: "日用",
+                value: data1,
+                trueVal: "98",
+                itemStyle: {
+                  normal: {
+                    color: {
+                      x: 0,
+                      y: 0,
+                      x2: 0,
+                      y2: 1,
+                      type: "linear",
+                      global: false,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "rgba(18,108,236,1)",
+                        },
+                        {
+                          offset: 0.8,
+                          color: "rgba(6,18,115,1)",
+                        },
+                        {
+                          offset: 1,
+                          color: "rgba(2,6,76,0.33)",
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+            ],
+          },
+
+          // 月用主体
+          {
+            type: "bar",
+            z: 9,
+            barWidth: 20,
+            data: [
+              {
+                name: "年用",
+                value: data2,
+                z: 9,
+                itemStyle: {
+                  normal: {
+                    color: {
+                      x: 0,
+                      y: 0,
+                      x2: 0,
+                      y2: 1,
+                      type: "linear",
+                      global: false,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#f0757a",
+                        },
+                        {
+                          offset: 0.8,
+                          color: "#F66167",
+                        },
+                        {
+                          offset: 1,
+                          color: "rgba(222,32,39,.1)",
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+            ],
+          },
+
+          // 年用主体
+          {
+            type: "bar",
+            z: 9,
+            barWidth: 20,
+            data: [
+              {
+                name: "年用",
+                value: data3,
+                z: 9,
+                itemStyle: {
+                  normal: {
+                    color: {
+                      x: 0,
+                      y: 0,
+                      x2: 0,
+                      y2: 1,
+                      type: "linear",
+                      global: false,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#68dbe0",
+                        },
+                        {
+                          offset: 0.8,
+                          color: "#31E9FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "rgba(10,150,156,.1)",
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      };
+
+      chart.setOption(option);
+      window.addEventListener("resize", () => {
+        chart.resize();
+      });
+      this.chart = chart;
+    },
+  },
+};
+</script>

src/views/home/components/triangleChart.vue

@@ -142,7 +142,7 @@ console.log('data')
             },
             {
               value: 100 - item.value,
-              name: "invisible",
+              name: "invisible",  
               itemStyle: {
                 normal: {
                   color: colors[index][1],

src/views/home/index.vue

@@ -2,17 +2,48 @@
   <section class="mainbox">
     <!-- topBox start -->
     <div class="topBox">
-      <div class="column statisSec" style="position:relative;z-index:1">
+      <div class="column statisSec" style="position: relative; z-index: 1">
         <statis-top
           :falarmCount="alarmCount"
           :fpersonalCount="personalCount"
           :fsiteCount="siteCount"
           :fepLoad="epLoad"
         ></statis-top>
-        <statis-bottom :fhtAnalogData="htAnalogData"></statis-bottom>
+        <!-- <statis-bottom :fhtAnalogData="htAnalogData"></statis-bottom> -->
+
+        <div class="panel statisBottom">
+          <h2>站点用电量</h2>
+          <div class="htAnalogData-box">
+            <div>
+              <statis-bottom-chart
+                :frtAnalogData="htAnalogData"
+                v-if="this.htAnalogData.dayCount"
+              ></statis-bottom-chart>
+            </div>
+            <div class="htAnalogData-right">
+              <p>
+                日用电量
+                <span class="num text-dBlue">{{ htAnalogData.dayCount }}</span
+                >kW
+              </p>
+              <p>
+                月用电量
+                <span class="num text-red">{{ htAnalogData.monthCount }}</span
+                >kW
+              </p>
+              <p>
+                年用电量
+                <span class="num text-blue">{{ htAnalogData.yearCount }}</span
+                >kW
+              </p>
+            </div>
+          </div>
+
+          <div class="panel-footer"></div>
+        </div>
       </div>
-      <div class="column mapBox" style="position:relative;">
-        <map-static-top :fsiteCount="siteCount"></map-static-top> 
+      <div class="column mapBox" style="position: relative">
+        <map-static-top :fsiteCount="siteCount"></map-static-top>
         <!-- <div id="pickerBox">
           <input
             id="pickerInput"
@@ -26,7 +57,7 @@
           ></i>
           <div id="poiInfo"></div>
         </div> -->
-        <div class="panel-footer"></div> 
+        <div class="panel-footer"></div>
         <!-- <div
           class="map panel"
           id="mapF"
@@ -36,15 +67,20 @@
         <div
           class="map"
           id="mapF"
-          style="height: 100%; z-index: 0; position:fixed;top:0;left:0;width:100%"
+          style="
+            height: 100%;
+            z-index: 0;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+          "
         ></div>
-
-
       </div>
       <div class="column">
         <div class="panel deviceSum">
           <h2>设备运行状态</h2>
-          <div class="filterSec" >
+          <div class="filterSec">
             <el-date-picker
               v-model="dDefaultTime"
               type="datetimerange"
@@ -115,15 +151,13 @@
       </div>
     </div>
     <!-- bottomBox end -->
-
-    
-
   </section>
 </template>
 
 <script>
 import statisTop from "./components/statisTop";
-import statisBottom from "./components/statisBottom";
+// import statisBottom from "./components/statisBottom";
+import statisBottomChart from "./components/statisBottomChart";
 import pieChart from "./components/pieChart";
 import barChart from "./components/barChart";
 import lineChart from "./components/lineChart";
@@ -145,7 +179,8 @@ export default {
   name: "index",
   components: {
     statisTop,
-    statisBottom,
+    // statisBottom,
+    statisBottomChart,
     pieChart,
     barChart,
     lineChart,
@@ -223,8 +258,6 @@ export default {
     this.htAnalogData_api();
     // this.eptrendIco_api();
     this.eptrendIcoMonth_api();
-
-    
   },
   methods: {
     // searchSite(){
@@ -306,6 +339,8 @@ export default {
     htAnalogData_api() {
       api.htAnalogData_api().then((requset) => {
         this.htAnalogData = requset.data;
+        console.log("父组件中this.htAnalogData");
+        console.log(this.htAnalogData);
       });
     },
 
@@ -333,7 +368,7 @@ export default {
 
     async initMap() {
       this.map = await new AMap.Map("mapF", {
-        mapStyle: "amap://styles/blue", //设置地图的显示样式
+        mapStyle: "amap://styles/659dc6c4753dc6e87c65c8a874c02133", //设置地图的显示样式
         resizeEnable: true,
         zoom: 13,
         zooms: [3, 16],
@@ -392,6 +427,8 @@ export default {
     addMarker(lnglats) {
       // 创建标点和点击事件
       let markers = lnglats.map((val, ind) => {
+        // console.log("val");
+        // console.log(val);
         let marker = new AMap.Marker({
           position: new AMap.LngLat(val.longitude, val.latitude),
           icon: markIconPath,
@@ -514,7 +551,7 @@ export default {
       //加载行政区划插件
       if (!this.district) {
         //实例化DistrictSearch
-        var that=this
+        var that = this;
         AMap.plugin("AMap.DistrictSearch", function () {
           that.district = new AMap.DistrictSearch({
             subdistrict: 0, //获取边界不需要返回下级行政区
@@ -532,8 +569,8 @@ export default {
                 //生成行政区划polygon
                 var polygon = new AMap.Polygon({
                   strokeWeight: 1,
-                  path: bounds[i],  
-                  fillOpacity:.2,
+                  path: bounds[i],
+                  fillOpacity: 0.2,
                   fillColor: "pink",
                   strokeColor: "pink",
                 });
@@ -592,6 +629,6 @@ export default {
 }
 // 自定义图标调整大小
 .amap-icon img {
-  width: 25px;
+  width: 35px;
 }
 </style>