接口调整

src/pages/index/components/berth_road.vue

@@ -14,26 +14,26 @@
           <el-option v-for="item in carOptions" :key="item.parkId" :label="item.carParkName" :value="item.parkId"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="开始时间" prop="begin">
-        <el-date-picker
-          v-model="formInline1.begin"
-          type="datetime"
-          placeholder="选择开始时间"
-          @change="validateTimeRange"
-          :picker-options="endPickerOptions"
-          value-format="yyyy-MM-dd HH:mm:ss"
-        ></el-date-picker>
-      </el-form-item>
-      <el-form-item label="结束时间" prop="end">
-        <el-date-picker
-          v-model="formInline1.end"
-          type="datetime"
-          placeholder="选择结束时间"
-          @change="validateTimeRange"
-          :picker-options="endPickerOptions"
-          value-format="yyyy-MM-dd HH:mm:ss"
-        ></el-date-picker>
-      </el-form-item>
+<!--      <el-form-item label="开始时间" prop="begin">-->
+<!--        <el-date-picker-->
+<!--          v-model="formInline1.begin"-->
+<!--          type="datetime"-->
+<!--          placeholder="选择开始时间"-->
+<!--          @change="validateTimeRange"-->
+<!--          :picker-options="endPickerOptions"-->
+<!--          value-format="yyyy-MM-dd HH:mm:ss"-->
+<!--        ></el-date-picker>-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="结束时间" prop="end">-->
+<!--        <el-date-picker-->
+<!--          v-model="formInline1.end"-->
+<!--          type="datetime"-->
+<!--          placeholder="选择结束时间"-->
+<!--          @change="validateTimeRange"-->
+<!--          :picker-options="endPickerOptions"-->
+<!--          value-format="yyyy-MM-dd HH:mm:ss"-->
+<!--        ></el-date-picker>-->
+<!--      </el-form-item>-->
       <el-form-item>
         <el-button type="primary" @click="queryAll">查询</el-button>
       </el-form-item>

src/pages/index/components/berth_road_out.vue

@@ -14,24 +14,24 @@
           <el-option v-for="item in carOptions" :key="item.parkId" :label="item.carParkName" :value="item.parkId"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="开始时间" prop="begin">
-        <el-date-picker
-          v-model="formInline1.begin"
-          type="datetime"
-          placeholder="选择开始时间"
-          :picker-options="endPickerOptions"
-          value-format="yyyy-MM-dd HH:mm:ss"
-        ></el-date-picker>
-      </el-form-item>
-      <el-form-item label="结束时间" prop="end">
-        <el-date-picker
-          v-model="formInline1.end"
-          type="datetime"
-          placeholder="选择结束时间"
-          :picker-options="endPickerOptions"
-          value-format="yyyy-MM-dd HH:mm:ss"
-        ></el-date-picker>
-      </el-form-item>
+<!--      <el-form-item label="开始时间" prop="begin">-->
+<!--        <el-date-picker-->
+<!--          v-model="formInline1.begin"-->
+<!--          type="datetime"-->
+<!--          placeholder="选择开始时间"-->
+<!--          :picker-options="endPickerOptions"-->
+<!--          value-format="yyyy-MM-dd HH:mm:ss"-->
+<!--        ></el-date-picker>-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="结束时间" prop="end">-->
+<!--        <el-date-picker-->
+<!--          v-model="formInline1.end"-->
+<!--          type="datetime"-->
+<!--          placeholder="选择结束时间"-->
+<!--          :picker-options="endPickerOptions"-->
+<!--          value-format="yyyy-MM-dd HH:mm:ss"-->
+<!--        ></el-date-picker>-->
+<!--      </el-form-item>-->
       <el-form-item>
         <el-button type="primary" @click="queryAll">查询</el-button>
       </el-form-item>
@@ -77,15 +77,15 @@
       </div>
     </div>
     <div style="display: flex; justify-content: space-between;margin-top: 5%">
-      <div style="width: 50%; height: 300px;">
-        <div align="center" style="color: white">特殊车辆进场占比</div>
+      <div style="width: 50%; height: 300px; position: relative;">
+        <div align="center" style="color: white; position: absolute; left: 0">特殊车辆进场占比</div>
         <piechart
           class="model-pie-body"
           id="chart1"
           :roseType="false"
-          :radiusArr="['30%', '70%']"
+          :radiusArr="['30%', '50%']"
           :colorArr="modelPieColor"
-          :labelFormat="['{name|{b}}', '{sub|{d}%}', '{hr|}']"
+          :labelFormat="['{name|{b} {d}%}', '{hr|}']"
           :dataset="modelData.list"
           :encode="{ itemName: 'name', value: 'value' }"
         />
@@ -102,8 +102,7 @@
           :dataset="linedata"
           :tooltipFormat="lineTooltipFormat"
           :encode="[
-              { x: 'month', y: 'lastYearAmount', seriesName: '泊位收入',bool:'true' },
-              { x: 'month', y: 'thisYearAmount', seriesName: '总体收入',bool:'true' },
+              { x: 'mouth', y: 'lastAmount', seriesName: '泊位收入',bool:'true' },
             ]"
           id="sxcyfzqk"
         />
@@ -258,13 +257,9 @@ export default {
     lineTooltipFormat(params) {
       const data = params[0].data;
       return `<div class="line-tooltip">
-        <div style="color: ${params[1].color}">${params[1].seriesName}: ${
-        params[0].data.thisYearAmount || "--"
-      }(元)</div>
         <div style="color: ${params[0].color}">${params[0].seriesName}: ${
-        params[0].data.lastYearAmount || "--"
-      }(元)</div>
-      </div>`;
+        params[0].data.lastAmount || "--"
+      }(元)</div>`;
     },
     lineTooltipFormat2(params) {
       const data = params[0].data;

src/pages/index/components/parking_operate.vue

@@ -1,31 +1,31 @@
 <template>
   <div class="body-wrapper">
     <el-form class="form-wrapper" :inline="true" :model="formInline1">
-      <el-form-item label="行政区">
-        <el-select clearable  v-model="formInline1.regionCode" placeholder="请选择" popper-class="cur-select">
-          <el-option v-for="item in districtOptions"  :key="item.label" :label="item.label" :value="item.value"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="街道">
-        <el-input  v-model="formInline1.streetName" placeholder="请输入"></el-input>
-      </el-form-item>
+<!--      <el-form-item label="行政区">-->
+<!--        <el-select clearable  v-model="formInline1.regionCode" placeholder="请选择" popper-class="cur-select">-->
+<!--          <el-option v-for="item in districtOptions"  :key="item.label" :label="item.label" :value="item.value"></el-option>-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="街道">-->
+<!--        <el-input  v-model="formInline1.streetName" placeholder="请输入"></el-input>-->
+<!--      </el-form-item>-->
       <el-form-item label="停车场">
         <el-select clearable filterable v-model="formInline1.parkId" placeholder="请选择" popper-class="cur-select">
           <el-option v-for="item in carOptions" :key="item.parkId" :label="item.carParkName" :value="item.parkId"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="查询日期">
-        <el-date-picker
-          clearable
-          v-model="formInline1.time"
-          type="daterange"
-          range-separator="至"
-          start-placeholder="开始日期"
-          value-format="yyyy-MM-dd"
-          :picker-options="{disabledDate: (time) => time.getTime() > Date.now()}"
-          end-placeholder="结束日期">
-        </el-date-picker>
-      </el-form-item>
+<!--      <el-form-item label="查询日期">-->
+<!--        <el-date-picker-->
+<!--          clearable-->
+<!--          v-model="formInline1.time"-->
+<!--          type="daterange"-->
+<!--          range-separator="至"-->
+<!--          start-placeholder="开始日期"-->
+<!--          value-format="yyyy-MM-dd"-->
+<!--          :picker-options="{disabledDate: (time) => time.getTime() > Date.now()}"-->
+<!--          end-placeholder="结束日期">-->
+<!--        </el-date-picker>-->
+<!--      </el-form-item>-->
       <el-form-item>
         <el-button type="primary" @click="queryAll">查询</el-button>
       </el-form-item>
@@ -34,22 +34,18 @@
     <div style="display: flex; justify-content: space-between;">
       <div style="width: 50%; height: 300px">
         <div align="center" style="color: white">停车饱和度</div>
-        <barchart
-          class="side-chart"
+        <linechart
           :autoStop="false"
-          :colorArr="['#ffd201', '#00eacb', '#01b4ff', '#5d78ff']"
-          legendIcon="react"
+          :top="30"
           :bottom="30"
-          :xlabelFormat="xLabelFormat"
-          :top="60"
+          :left="40"
+          :legendTop="0"
           yAxisName="(个)"
-          :tooltip="tooltipFormat"
           :dataset="bardata"
+          :tooltipFormat="lineTooltipFormat6"
           :encode="[
-            {x: 'month', y: 'hs', seriesName: '占用'},
-            {x: 'month', y: 'cs', seriesName: '空闲'}]"
-          :labelSize="15"
-          id="fxdqhszzt"
+              {x: 'mouth', y: 'lastYearAmount', seriesName: '占用' ,bool:'true'}]"
+          id="tcbhd"
         />
       </div>
       <div style="width: 50%; height: 300px">
@@ -71,70 +67,72 @@
       </div>
     </div>
     <div style="display: flex; justify-content: space-between;margin-top: 5%">
-      <div style="width: 50%; height: 300px;">
-        <div align="center" style="color: white">停车场营收分析</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="linedata"
-          :tooltipFormat="lineTooltipFormat"
+          yAxisName="(%)"
+          :dataset="linedata2"
+          :tooltipFormat="lineTooltipFormat2"
           :encode="[
-              { x: 'month', y: 'lastAmount', seriesName: '泊位收入',bool:'true' }
+              { x: 'month', y: 'lastYearAmount', seriesName: '进流率',bool:'true' },
+              { x: 'month', y: 'thisYearAmount', seriesName: '出流率',bool:'true' },
             ]"
-          id="sxcyfzqk"
+          id="sxcyfzqk2"
         />
       </div>
-      <div style="width: 50%; height: 300px">
-        <div align="center" style="color: white">车辆类型进场占比</div>
+      <div style="width: 50%; height: 300px; position: relative;">
+        <div style="position: absolute; left: 0; color: white">车辆类型进场占比</div>
         <piechart
           class="model-pie-body"
           id="chart1"
           :roseType="false"
-          :radiusArr="['30%', '70%']"
+          :radiusArr="['30%', '50%']"
           :colorArr="modelPieColor"
-          :labelFormat="['{name|{b}}', '{sub|{d}%}', '{hr|}']"
+          :labelFormat="['{name|{b} {d}%}', '{hr|}']"
           :dataset="modelData.list"
           :encode="{ itemName: 'name', value: 'value' }"
         />
       </div>
     </div>
     <div style="display: flex; justify-content: space-between;margin-top: 5%">
-      <div style="width: 50%; height: 300px;padding-left: 25px">
-        <div align="center" style="color: white">车辆进出场趋势</div>
+      <div style="width: 50%; height: 450px;">
+        <div align="center" style="color: white">停车场营收分析</div>
         <linechart
           :autoStop="false"
           :top="30"
-          :bottom="30"
+          :bottom="200"
           :left="40"
           :legendTop="0"
-          yAxisName="(%)"
-          :dataset="linedata2"
-          :tooltipFormat="lineTooltipFormat2"
+          yAxisName="(元)"
+          :dataset="linedata"
+          :xlabelFormat="xlabelFormat"
+          :tooltipFormat="lineTooltipFormat"
           :encode="[
-              { x: 'month', y: 'lastYearAmount', seriesName: '进流率',bool:'true' },
-              { x: 'month', y: 'thisYearAmount', seriesName: '出流率',bool:'true' },
+              { x: 'month', y: 'lastAmount', seriesName: '泊位收入',bool:'true' }
             ]"
-          id="sxcyfzqk2"
+          id="sxcyfzqk"
         />
       </div>
-      <div style="width: 50%; height: 300px;">
+      <div style="width: 50%; height: 450px;">
         <div align="center" style="color: white">停车场营收对比分析</div>
         <linechart
           :autoStop="false"
           :top="30"
-          :bottom="30"
+          :bottom="200"
           :left="40"
           :legendTop="0"
           yAxisName="(元)"
           :dataset="linedata3"
+          :xlabelFormat="xlabelFormat"
           :tooltipFormat="lineTooltipFormat3"
           :encode="[
-              { x: 'month', y: 'lastYearAmount', seriesName: '建材市场南侧停车场',bool:'true' },
-              { x: 'month', y: 'thisYearAmount', seriesName: '市民之家东侧停车场',bool:'true' },
+              { x: 'month', y: 'lastYearAmount', seriesName: '今日',bool:'true' },
+              { x: 'month', y: 'thisYearAmount', seriesName: '昨日',bool:'true' },
             ]"
           id="sxcyfzqk3"
         />
@@ -187,6 +185,10 @@ export default {
 
   },
   methods: {
+    xlabelFormat(name) {
+      var str = name.split("");
+      return str.join("\n");
+    },
     getParkDic() {
       api.parkDic().then(res => {
         this.carOptions = res.data || [];
@@ -256,6 +258,20 @@ export default {
         params[0].data.lastAmount || "--"
       }(元)</div>`;
     },
+    lineTooltipFormat6(params) {
+      const data = params[0].data
+      let zb = '--'
+      console.log(params[0].data, '999999')
+      if (Number(params[0].data.thisYearAmount) > 0) {
+       zb =  (Number(params[0].data.lastYearAmount)/Number(params[0].data.thisYearAmount) * 100 ).toFixed(2)
+      }
+      return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
+        params[0].data.lastYearAmount
+      }个<div style="color: ${params[0].color}">饱和度: ${
+        zb
+      }%</div>`;
+    },
     lineTooltipFormat2(params) {
       const data = params[0].data;
       return `<div class="line-tooltip">
@@ -271,10 +287,10 @@ export default {
       const data = params[0].data;
       return `<div class="line-tooltip">
         <div style="color: ${params[0].color}">${params[0].seriesName}: ${
-        params[0].data.lastYearAmount || "--"
+        params[0].data.lastYearAmount || "0"
       }(元)</div>
         <div style="color: ${params[1].color}">${params[1].seriesName}: ${
-        params[0].data.thisYearAmount || "--"
+        params[0].data.thisYearAmount || "0"
       }(元)</div>
       </div>`;
     },

src/pages/index/layouts/indexLayout.vue

@@ -32,7 +32,7 @@
 export default {
   data() {
     return {
-      showMenu: false,
+      showMenu: process.env.NODE_ENV === 'development',
       isCollapse: false,//默认为不折叠菜单
       foldphoto: "el-icon-s-unfold",//菜单展开图标
       menu: [