路内路外补全

src/api/article_liao.js

@@ -65,6 +65,10 @@ export default {
   dashBerthRoadStat5(params){
     return axios.post('/dash/berth/road/stat5', params)
   },
+  //路内 路段饱和度分析
+  dashBerthRoadStat6(params) {
+    return axios.post('/dash/berth/road/stat6', params)
+  },
   //路外 饱和度分析
   dashBertRroadOutStat1(params){
     return axios.post('/dash/berth/road/out/stat1', params)
@@ -85,6 +89,10 @@ export default {
   dashBertRroadOutStat5(params){
     return axios.post('/dash/berth/road/out/stat5', params)
   },
+  //路外 路段饱和度分析
+  dashBertRroadOutStat6(params){
+    return axios.post('/dash/berth/road/out/stat6', params)
+  },
   //非法车辆类型占比
   dashVehicleViolationsStat1(params){
     return axios.post('/dash/vehicle/violations/stat1', params)

src/pages/index/components/berth_road.vue

@@ -47,7 +47,7 @@
           :autoStop="false"
           :colorArr="['#ffd201', '#00eacb', '#01b4ff', '#5d78ff']"
           legendIcon="react"
-          :bottom="30"
+          :bottom="40"
           :xlabelFormat="xLabelFormat"
           :top="60"
           yAxisName="(个)"
@@ -65,7 +65,7 @@
         <linechart
           :autoStop="false"
           :top="30"
-          :bottom="30"
+          :bottom="40"
           :left="40"
           :legendTop="0"
           yAxisName="(%)"
@@ -130,12 +130,23 @@
           id="sxcyfzqk2"
         />
       </div>
-      <div style="width: 50%; height: 300px;margin-top: 5%;">
-        <div align="center" style="font-family: Arial, Helvetica, sans-serif">
-          <h5 style="color: rgb(47, 178, 77);">路段泊位饱和度合理性分析</h5>
-          <p style="margin-top: 5px;color: rgb(49, 97, 0);">根据泊位饱和度分析，周末泊位饱和度较高，</p>
-          <p style="color: rgb(49, 97, 0);">建议周末乘坐公共车辆或步行出门，响应绿色环保</p>
-        </div>
+      <div style="width: 50%; height: 300px;padding-left: 25px">
+        <div align="center" style="color: white">路段饱和度分析</div>
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          yAxisName="(%)"
+          :dataset="linedata6"
+          :tooltipFormat="tooltipFormat"
+          :encode="[
+            {x: 'month', y: 'hs', seriesName: '占用'},
+            {x: 'month', y: 'cs', seriesName: '空闲'}
+            ]"
+          id="ldbhdfx"
+        />
       </div>
     </div>
   </div>
@@ -182,6 +193,7 @@ export default {
       linedata1: [],
       linedata2: [],
       bardata: [],
+      linedata6: []
     }
   },
   mounted() {
@@ -234,6 +246,7 @@ export default {
             this.dashBerthRoadStat3(params)
             this.dashBerthRoadStat4(params)
             this.dashBerthRoadStat5(params)
+            this.dashBerthRoadStat6(params)
           } else {
             this.$message({
               message: '结束时间不能早于开始时间!',
@@ -248,6 +261,7 @@ export default {
         this.dashBerthRoadStat3(params)
         this.dashBerthRoadStat4(params)
         this.dashBerthRoadStat5(params)
+        this.dashBerthRoadStat6(params)
       }
     },
     lineTooltipFormat1(params) {
@@ -302,6 +316,11 @@ export default {
         this.bardata = res.data
       })
     },
+    dashBerthRoadStat6(params){
+      api.dashBerthRoadStat6(params).then(res =>{
+        this.linedata6 = res.data
+      })
+    },
     dashBerthRoadStat2(params){
       api.dashBerthRoadStat2(params).then(res =>{
         this.linedata1 = res.data

src/pages/index/components/berth_road_out.vue

@@ -109,7 +109,7 @@
       </div>
     </div>
     <div style="display: flex; justify-content: space-between;margin-top: 5%">
-      <div style="width: 50%; height: 300px;padding-left: 25px">
+      <div style="width: 50%; height: 220px;padding-left: 25px">
         <div align="center" style="color: white">车辆进出场趋势</div>
         <linechart
           :autoStop="false"
@@ -127,12 +127,23 @@
           id="sxcyfzqk2"
         />
       </div>
-      <div style="width: 50%; height: 300px;margin-top: 5%;">
-        <div align="center" style="font-family: Arial, Helvetica, sans-serif">
-          <h5 style="color: rgb(47, 178, 77);">路段泊位饱和度合理性分析</h5>
-          <h5 style="margin-top: 5px;color: rgb(49, 97, 0);">检测到周末泊位较饱和，建议适当增加泊位</h5>
-          <h5  style="margin-top: 5px;color: rgb(49, 97, 0);">检测到周末泊位周转率低，建议适当增加长时段停车费用</h5>
-        </div>
+      <div style="width: 50%; height: 400px;padding-left: 25px">
+        <div align="center" style="color: white">路段饱和度分析</div>
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="180"
+          :left="40"
+          :legendTop="0"
+          yAxisName="(%)"
+          :dataset="linedata6"
+          :xlabelFormat="xLabelFormat1"
+          :tooltipFormat="tooltipFormat"
+          :encode="[
+            {x: 'mouth', y: 'hs', seriesName: '占用'},
+            {x: 'mouth', y: 'cs', seriesName: '空闲'}]"
+          id="sxcyfzqk3"
+        />
       </div>
     </div>
   </div>
@@ -178,6 +189,7 @@ export default {
       linedata1: [],
       linedata2: [],
       bardata: [],
+      linedata6: [],
 
     }
   },
@@ -199,6 +211,10 @@ export default {
     }
   },
   methods: {
+    xLabelFormat1(name) {
+      var str = name.split("");
+      return str.join("\n");
+    },
     validateEndTime(rule, value, callback) {
       if (this.formInline1.begin && this.formInline1.end) {
         const startTimestamp = new Date(this.formInline1.begin).getTime();
@@ -231,6 +247,7 @@ export default {
             this.dashBertRroadOutStat3(params)
             this.dashBertRroadOutStat4(params)
             this.dashBertRroadOutStat5(params)
+            this.dashBertRroadOutStat6(params)
           } else {
             this.$message({
               message: '结束时间不能早于开始时间!',
@@ -245,6 +262,7 @@ export default {
         this.dashBertRroadOutStat3(params)
         this.dashBertRroadOutStat4(params)
         this.dashBertRroadOutStat5(params)
+        this.dashBertRroadOutStat6(params)
       }
     },
     lineTooltipFormat1(params) {
@@ -315,6 +333,12 @@ export default {
         this.linedata2 = res.data
       })
     },
+    dashBertRroadOutStat6(params){
+      api.dashBertRroadOutStat6(params).then(res =>{
+        this.linedata6 = res.data.filter(item => item.mouth)
+        console.log(this.linedata6, '33333')
+      })
+    },
   }
 }
 </script>

src/pages/index/components/other_analyse.vue

@@ -163,30 +163,6 @@
     <br>
     <br>
     <br>
-    <br>
-    <div class="charts">
-      <div style="width: 50%;height: 220px;">
-        <h5 style="color: white">车辆进场占比</h5>
-        <br>
-      <piechart
-          class="model-pie-body"
-          id="chart1"
-          :roseType="false"
-          :radiusArr="['30%', '70%']"
-          :colorArr="modelPieColor"
-          :labelFormat="['{name|{b}}', '{sub|{@value} {d}%}', '{hr|}']"
-          :dataset="zdcljcfx"
-          :encode="{ itemName: 'name', value: 'value' }"
-        />
-    </div>
-
-<!--      <div style="width: 50%;height: 500px;">-->
-<!--        <h5 style="color: white">重点车辆追踪</h5>-->
-<!--        <br>-->
-<!--        <div id="ChinaLineMap2"></div>-->
-<!--      </div>-->
-    </div>
-
   </div>
 </template>
 <script>