优化页面

src/components/CarRecord.vue

@@ -26,15 +26,14 @@
               style="width: 150px"
               size="small"
               v-model="value_type"
-              clearable
               placeholder="请选择驶入方向"
               @change="handleChange"
             >
               <el-option
-                v-for="item in options_type"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                v-for="(item, index) in options_type"
+                :key="index"
+                :label="item"
+                :value="item"
               >
               </el-option>
             </el-select>
@@ -63,10 +62,10 @@
               @change="handleChange"
             >
               <el-option
-                v-for="item in options_place"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                v-for="(item, index) in options_place"
+                :key="index"
+                :label="item"
+                :value="item"
               >
               </el-option>
             </el-select>
@@ -84,17 +83,12 @@
             height="467"
             v-moretable="moretable"
           >
-            <el-table-column prop="Id" label="识别ID" align="center" width="93">
+            <el-table-column prop="id" label="识别ID" align="center" width="93">
             </el-table-column>
-            <el-table-column
-              prop="type"
-              label="类型"
-              align="center"
-              width="100"
-            >
+            <el-table-column prop="fx" label="类型" align="center" width="100">
             </el-table-column>
             <el-table-column
-              prop="name"
+              prop="user_name"
               label="姓名"
               align="center"
               width="100"
@@ -108,15 +102,17 @@
             >
             </el-table-column>
             <el-table-column
-              prop="place"
               label="位置"
               align="center"
               width="186"
               show-overflow-tooltip
             >
+              <template slot-scope="{ row }">
+                {{ row.channel_id }}号通道
+              </template>
             </el-table-column>
             <el-table-column
-              prop="car"
+              prop="car_number"
               label="车牌"
               align="center"
               width="117"
@@ -137,7 +133,7 @@
           <div class="line-img">
             <img src="@/assets/jiantou.png" />
           </div>
-          <div class="line-info">24小时人流量</div>
+          <div class="line-info">6小时车流量</div>
         </div>
         <!-- 折线图 -->
         <div class="right-line-body" id="line"></div>
@@ -167,164 +163,151 @@ export default {
   data() {
     return {
       // 类型筛选框绑定值
-      value_type: "",
+      value_type: "驶入",
       // 时间筛选框绑定值
       value_time: "",
       // 来源地筛选框绑定值
       value_place: "",
       // 类型筛选框数组
-      options_type: [
-        {
-          value: 0,
-          label: "全部",
-        },
-        {
-          value: 1,
-          label: "驶入",
-        },
-        {
-          value: 2,
-          label: "驶出",
-        },
-      ],
+      options_type: ["全部", "驶入", "驶出"],
       //来源地筛选框数组
-      options_place: [
-        {
-          value: 0,
-          label: "全部",
-        },
-        {
-          value: 1,
-          label: "赣A",
-        },
-        {
-          value: 2,
-          label: "赣B",
-        },
-      ],
+      options_place: [],
       // 车辆记录列表数据
-      tableData: [
-        {
-          id: 1,
-          Id: 42935,
-          type: "驶入方向",
-          name: "张三",
-          time: "2022-12-14 16:25:56",
-          place: "大门位置",
-          car: "赣A61798",
-        },
-        {
-          id: 2,
-          Id: 42935,
-          type: "驶入方向",
-          name: "张三",
-          time: "2022-12-14 16:25:56",
-          place: "大门位置",
-          car: "赣A61798",
-        },
-        {
-          id: 3,
-          Id: 42935,
-          type: "驶入方向",
-          name: "张三",
-          time: "2022-12-14 16:25:56",
-          place: "大门位置",
-          car: "赣A61798",
-        },
-        {
-          id: 4,
-          Id: 42935,
-          type: "驶入方向",
-          name: "张三",
-          time: "2022-12-14 16:25:56",
-          place: "大门位置",
-          car: "赣A61798",
-        },
-        {
-          id: 5,
-          Id: 42935,
-          type: "驶入方向",
-          name: "张三",
-          time: "2022-12-14 16:25:56",
-          place: "大门位置",
-          car: "赣A61798",
-        },
-        {
-          id: 6,
-          Id: 42935,
-          type: "驶入方向",
-          name: "张三",
-          time: "2022-12-14 16:25:56",
-          place: "大门位置",
-          car: "赣A61798",
-        },
-        {
-          id: 7,
-          Id: 42935,
-          type: "驶入方向",
-          name: "张三",
-          time: "2022-12-14 16:25:56",
-          place: "大门位置",
-          car: "赣A61798",
-        },
-        {
-          id: 8,
-          Id: 42935,
-          type: "驶入方向",
-          name: "张三",
-          time: "2022-12-14 16:25:56",
-          place: "大门位置",
-          car: "赣A61798",
-        },
-        {
-          id: 9,
-          Id: 42935,
-          type: "驶入方向",
-          name: "张三",
-          time: "2022-12-14 16:25:56",
-          place: "大门位置",
-          car: "赣A61798",
-        },
-        {
-          id: 10,
-          Id: 42935,
-          type: "驶入方向",
-          name: "张三",
-          time: "2022-12-14 16:25:56",
-          place: "大门位置",
-          car: "赣A61798",
-        },
-      ],
+      tableData: [],
+      // 车辆记录列表总条数
+      total: "",
       // 车辆记录列表当前页
       page: 1,
       // 车辆记录表格加载中效果
       loading: false,
+      // 折线图数据
+      timeList: [], // 时间数组
+      freeList: [], // 免费车数组
+      monthlyList: [], // 月租车数组
+      visitorList: [], // 访客车数组
+      temporaryList: [], // 临时车数组
+      // 柱状图数据
+      topPlace: [], // 车辆来源地排行地点
+      topValue: [], // 车辆来源地排行数值
     };
   },
   created() {
     this.getData();
-  },
-  mounted() {
-    this.getLineChart();
-    this.getColumnChart();
+    this.getCarFromData();
+    this.getCarFromTopData();
+    this.carMonitorData();
   },
   watch: {
     // 监听数据变化重新渲染图表
+    topPlace() {
+      this.getColumnChart();
+    },
+    timeList() {
+      this.getLineChart();
+    },
   },
   methods: {
+    // 获取车辆记录表格数据
+    async getData() {
+      this.loading = true;
+      let res = await this.$axios({
+        url: "/carstop/carMonitor/ioqueryRecord.action",
+        method: "post",
+        params: {
+          time: this.value_time,
+          from: this.value_place,
+          io: this.value_type,
+          page: this.page,
+          rows: 20,
+        },
+      });
+      // console.log(res.data);
+      if (res.data.code && res.data.code == 200) {
+        this.tableData = [...this.tableData, ...res.data.rows];
+        this.total = res.data.total;
+      } else {
+        this.$message.error(res.data.message || "暂无数据");
+      }
+      this.loading = false;
+    },
+    // 获取车辆来源地数据
+    async getCarFromData() {
+      let res = await this.$axios({
+        url: "/carstop/carMonitor/iocar_from.action",
+        method: "post",
+      });
+      // console.log(res.data);
+      if (res.data.code == 200) {
+        let temList = [];
+        res.data.data.forEach((element) => {
+          temList.push(element.car_no);
+        });
+        this.options_place = temList;
+      } else {
+        this.$message.error(res.data.message);
+      }
+    },
+    // 获取车辆来源地排名数据
+    async getCarFromTopData() {
+      let res = await this.$axios({
+        url: "/carstop/carMonitor/iocarTj.action",
+        method: "post",
+      });
+      // console.log(res.data);
+      if (res.data.code == 200) {
+        let temList = res.data.data;
+        // 将需要排序的 key, 按照 "从大到小" 进行排列
+        let sortKeys = Object.keys(temList).sort((a, b) => {
+          return temList[b] - temList[a];
+        });
+        // 循环排列好的 key, 重新组成一个新的数组
+        let arr = [];
+        for (let sortIndex in sortKeys) {
+          arr.push(temList[sortKeys[sortIndex]]);
+        }
+        this.topPlace = sortKeys.splice(0, 5);
+        this.topValue = arr.splice(0, 5);
+      } else {
+        this.$message.error(res.data.message);
+      }
+    },
+    // 获取6小时车流量数据
+    async carMonitorData() {
+      let res = await this.$axios({
+        url: "/carstop/carMonitor/ioioTj.action",
+        method: "post",
+      });
+      // console.log(res.data);
+      if (res.data.code == 200) {
+        this.timeList = [];
+        this.freeList = [];
+        this.monthlyList = [];
+        this.visitorList = [];
+        this.temporaryList = [];
+        res.data.data.forEach((element) => {
+          this.timeList.push(element.duration);
+          this.freeList.push(element.typeTj[0].num);
+          this.monthlyList.push(element.typeTj[1].num);
+          this.visitorList.push(element.typeTj[2].num);
+          this.temporaryList.push(element.typeTj[3].num);
+        });
+      } else {
+        this.$message.error(res.data.message);
+      }
+    },
+    // 车辆记录表格滑动到底部加载更多回调
+    moretable() {
+      if (this.tableData.length < this.total) {
+        this.page += 1;
+        this.getData();
+      }
+    },
     // 筛选回调
     handleChange() {
       this.tableData = [];
       this.page = 1;
       this.getData();
     },
-    getData() {
-      console.log(123);
-    },
-    // 车辆记录表格滑动到底部加载更多回调
-    moretable() {
-      console.log(456);
-    },
     // 创建折线图
     getLineChart() {
       let chartLineDom = document.getElementById("line");
@@ -335,7 +318,7 @@ export default {
           trigger: "axis",
         },
         legend: {
-          data: ["教师", "物业", "其他"],
+          data: ["免费车", "月租车", "访客车", "临时车"],
           textStyle: {
             color: "#fff",
           },
@@ -349,7 +332,7 @@ export default {
         xAxis: {
           type: "category",
           boundaryGap: false,
-          data: [0, 4, 8, 12, 16, 20, 24],
+          data: this.timeList,
           axisLine: {
             lineStyle: {
               color: "#0febff",
@@ -383,9 +366,9 @@ export default {
         },
         series: [
           {
-            name: "教师",
+            name: "免费车",
             type: "line",
-            data: [120, 132, 101, 134, 90, 230, 210],
+            data: this.freeList,
             //设定为实心点
             symbol: "circle",
             //设定实心点的大小
@@ -394,20 +377,25 @@ export default {
             // label: { show: true },
           },
           {
-            name: "物业",
+            name: "月租车",
             type: "line",
-            data: [220, 182, 191, 234, 290, 330, 310],
+            data: this.monthlyList,
             symbol: "circle",
             symbolSize: 10,
-            // label: { show: true },
           },
           {
-            name: "其他",
+            name: "访客车",
             type: "line",
-            data: [150, 232, 201, 154, 190, 330, 410],
+            data: this.visitorList,
+            symbol: "circle",
+            symbolSize: 10,
+          },
+          {
+            name: "临时车",
+            type: "line",
+            data: this.temporaryList,
             symbol: "circle",
             symbolSize: 10,
-            // label: { show: true },
           },
         ],
       };
@@ -435,7 +423,7 @@ export default {
         xAxis: [
           {
             type: "category",
-            data: ["南昌", "赣州", "宜春", "上饶", "九江"],
+            data: this.topPlace,
             axisTick: {
               alignWithLabel: true,
             },
@@ -447,27 +435,26 @@ export default {
             axisLabel: {
               color: "#fff",
             },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                width: 1,
-                color: "#0febff",
-              },
-            },
+            // splitLine: {
+            //   show: true,
+            //   lineStyle: {
+            //     width: 1,
+            //     color: "#0febff",
+            //   },
+            // },
           },
         ],
         yAxis: {
           type: "value",
           axisLabel: {
             formatter: "{value}",
-
             color: "#fff",
           },
           splitLine: {
             show: true,
             lineStyle: {
               width: 1,
-              color: "#0febff",
+              color: "transparent",
             },
           },
         },
@@ -476,7 +463,7 @@ export default {
             name: "数量",
             type: "bar",
             barWidth: "60%",
-            data: [101, 52, 35, 44, 50],
+            data: this.topValue,
             itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 {
@@ -634,6 +621,7 @@ export default {
     .right-column {
       width: 350px;
       height: 50%;
+      margin-top: -6px;
       .right-column-title {
         display: flex;
         align-items: center;

vue.config.js

@@ -1,15 +1,15 @@
 module.exports = {
     assetsDir: 'static',
     parallel: false,
-    publicPath: './',
+    publicPath: '/carstop/dist3/',
     devServer: {
         open: true,
         proxy: {
-            '/car-record-api': {
-                target: 'http://127.0.0.1:8280',
+            '/carstop': {
+                target: 'https://chtech.ncjti.edu.cn/carstop',
                 changOrigin: true,
                 pathRewrite: {
-                    '^/car-record-api': ''
+                    '^/carstop': ''
                 }
             }
         }