上传

上传

src/pages/index/components/berth_turnover.vue

@@ -0,0 +1,291 @@
+<template>
+  <div class="body-wrapper">
+    <el-tabs  v-model="activeName">
+      <el-tab-pane label="车流量趋势" name="车流量趋势">
+        <div style="height: 300px;width: 100%">
+        <barchart
+          class="side-chart"
+          :autoStop="false"
+          :colorArr="['#ffd201', '#00eacb']"
+          legendIcon="react"
+          v-if="activeName === '车流量趋势'"
+          :bottom="30"
+          :xlabelFormat="xLabelFormat"
+          :top="60"
+          yAxisName="(元)"
+          :tooltip="tooltipFormat"
+          :dataset="bardata"
+          :encode="[
+            {x: 'month', y: 'hs', seriesName: '入场车辆'},
+            {x: 'month', y: 'cs', seriesName: '出场车辆'}]"
+          :labelSize="15"
+          id="fxdqhszzt"
+        />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="泊位周转率变化趋势" name="泊位周转率变化趋势">
+        <div style="width: 100%;height: 300px">
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          yAxisName="辆"
+          v-if="activeName === '泊位周转率变化趋势'"
+          :dataset="linedata"
+          :tooltipFormat="lineTooltipFormat"
+          :encode="[
+              { x: 'month', y: 'rc', seriesName: '入场',bool:'true' },
+              { x: 'month', y: 'cc', seriesName: '出场',bool:'true' },
+            ]"
+          id="sxcyfzqk"
+        />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+import piechart from "@/components/pieChart";
+import linechart from "@/components/lineChart";
+import barchart from "@/components/barChart";
+
+export default {
+    components: {
+      piechart,
+      linechart,
+      barchart
+    },
+    data() {
+      return {
+        linedata: [{"month":"周一","rc":50,"cc":30}],
+        activeName: '车流量趋势',
+        bardata: [],
+        tableData1: [],
+        total1: 0,
+        pageSize1: 10,
+        pageNum1: 1,
+        formInline1: {
+          plateNo: ''
+        },
+        columns2: [
+          {
+            label: '车牌号',
+            key: 'plateNo'
+          },
+          {
+            label: '停车场',
+            key: 'carParkName'
+          },
+          {
+            label: '行为',
+            key: 'behavior'
+          },
+          {
+            label: '时间',
+            key: 'behaviorTime'
+          }
+        ],
+        tableData2: [],
+        total2: 0,
+        pageSize2: 10,
+        pageNum2: 1,
+        formInline2: {
+          plateNo: ''
+        },
+        columns3: [
+          {
+            label: '车牌号',
+            key: 'plateNo'
+          },
+          {
+            label: '停车场',
+            key: 'carParkName'
+          },
+          {
+            label: '泊位号',
+            key: 'parkingNo'
+          },
+          {
+            label: '入场时间',
+            key: 'inTime'
+          },
+          {
+            label: '出场时间',
+            key: 'outTime'
+          }
+        ],
+        tableData3: [],
+        total3: 0,
+        pageSize3: 10,
+        pageNum3: 1,
+        formInline3: {
+          plateNo: ''
+        }
+      }
+    },
+    mounted() {
+      this.getTableData1()
+      this.getTableData2()
+      this.getTableData3()
+    },
+    watch: {
+    },
+    methods: {
+      lineTooltipFormat(params) {
+        return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
+          params[0].data.lastYearAmount || "--"
+        }</div>
+        <div style="color: ${params[1].color}">${params[1].seriesName}: ${
+          params[1].data.thisYearAmount || "--"
+        }</div>
+      </div>`;
+      },
+      tooltipFormat(params) {
+        const type = params[0].seriesType;
+        const data = params[0].data;
+        return `<div class="line-tooltip">
+<div>${params[0].seriesName}: ${
+          params[0].data.hs || "--"}元</div>
+<div>${params[1].seriesName}: ${
+          params[0].data.cs || "--"}元</div>
+</div>`;
+      },
+      xLabelFormat(name) {
+        const nameArr = []
+        for(let i=0; i<name.length; i+=7) {
+          nameArr.push(name.substring(i, i+7))
+        }
+        return nameArr.join('\n');
+      },
+      onSubmit1() {
+        this.pageNum1 = 1
+        this.getTableData1()
+      },
+      onSubmit2() {
+        this.pageNum2 = 1
+        this.getTableData2()
+      },
+
+      onSubmit3() {
+        this.pageNum3 = 1
+        this.getTableData3()
+      },
+      handlePageChange1() {
+        this.getTableData1()
+      },
+      getTableData1() {
+        const {pageNum1, pageSize1} = this
+        api.carListByPage({current: pageNum1, size: pageSize1, ...this.formInline1}).then(res => {
+          this.tableData1 = (res.data.records || []).map(item => ({...item, carType: item.plateNo.length === 7 ? '燃油汽车' : '新能源车', }))
+          this.total1 = res.data.total
+        })
+      },
+      handlePageChange2() {
+        this.getTableData2()
+      },
+      getTableData2() {
+        const {pageNum2, pageSize2} = this
+        api.gjListByPage({current: pageNum2, size: pageSize2, ...this.formInline2}).then(res => {
+          this.tableData2 = res.data.records || []
+          this.total2 = res.data.total
+        })
+      },
+      handlePageChange3() {
+        this.getTableData3()
+      },
+      getTableData3() {
+        const {pageNum3, pageSize3} = this
+        api.tcjlListByPage({current: pageNum3, size: pageSize3, ...this.formInline3}).then(res => {
+          this.tableData3 = res.data.records || []
+          this.total3 = res.data.total
+        })
+      }
+    }
+}
+</script>
+<style  lang="scss" scoped>
+
+.form-wrapper {
+  margin-bottom: 20px;
+}
+/deep/ .el-input__inner {
+  background: #2d3744;
+  border: none;
+  border-radius: 0;
+}
+/deep/ .el-select {
+  height: 40px;
+  .el-input__inner {
+    height: 40px;
+  }
+  .el-input__prefix, .el-input__suffix {
+    height: 40px;
+  }
+
+  /* 下面设置右侧按钮居中 */
+  .el-input__suffix {
+    top: 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    align-content: flex-start;
+  }
+  /* 输入框加上上下边是 32px + 2px =34px */
+  .el-input__icon {
+    line-height: 0px;
+  }
+}
+/deep/ .form-wrapper .el-button {
+  background: linear-gradient(90deg,#0158d9,#3c97e4);
+  width: 100px;
+  height: 40px;
+}
+.body-wrapper {
+  padding: 20px;
+  background: #0c0c0c;
+  .button-block{
+    text-align: right;
+    margin-bottom: 20px;
+  }
+  .table-pagination{
+    text-align: right;
+  }
+  .search-card{
+    margin-bottom: 20px;
+    text-align: center;
+    .input-wrapper{
+      width: 36%;
+    }
+  }
+}
+.body-wrapper {
+  padding: 20px;
+  .button-block{
+    text-align: right;
+    margin-bottom: 20px;
+  }
+  .table-pagination{
+    text-align: right;
+  }
+  .search-card{
+    margin-bottom: 20px;
+    text-align: center;
+    .input-wrapper{
+        width: 36%;
+    }
+  }
+}
+.audit-dialog{
+    .mg-bt{
+        margin-bottom: 24px;
+    }
+    .label{
+        text-align: right;
+    }
+}
+</style>

src/pages/index/components/parking_analysis.vue

@@ -0,0 +1,258 @@
+@ -0,0 +1,257 @@
+<template>
+  <div class="body-wrapper">
+    <div>
+      <h2 style="color: #3498db;margin-bottom: 20px;display: inline-block;width: 90%">停车总分析</h2>
+    </div>
+    <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
+      <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
+      </el-table-column>
+    </el-table>
+    <br>
+    <br>
+    <div align="center" style="color: #3498db;font-size: 23px;margin-bottom: 20px">停车难易指数变化趋势</div>
+    <div style="height: 300px">
+      <linechart
+        :autoStop="false"
+        :top="30"
+        :bottom="30"
+        :left="40"
+        :legendTop="0"
+        :dataset="linedata"
+        :tooltipFormat="lineTooltipFormat"
+        :encode="[
+              { x: 'mouth', y: 'in', seriesName: '入场',bool:'true' },
+              { x: 'mouth', y: 'out', seriesName: '出场',bool:'true' },
+            ]"
+        id="sxcyfzqk"
+      />
+    </div>
+    <br>
+    <br>
+    <div align="center" style="color: #3498db;font-size: 23px;margin-bottom: 20px">停车利用率</div>
+    <div style="height: 300px">
+      <linechart
+        :autoStop="false"
+        :top="30"
+        :bottom="30"
+        :left="40"
+        :legendTop="0"
+        :dataset="linedata2"
+        :tooltipFormat="lineTooltipFormat"
+        :encode="[
+              { x: 'mouth', y: 'in', seriesName: '占用中',bool:'true' },
+              { x: 'mouth', y: 'out', seriesName: '车位总数',bool:'true' },
+            ]"
+        id="tclyl"
+      />
+    </div>
+    <br>
+    <el-table :data="tableData2" style="background: #2a2a2a;border-color: #333;">
+      <el-table-column v-for="(item, index) in columns2" :key="index" :label="item.label" :prop="item.key">
+      </el-table-column>
+    </el-table>
+    <br>
+    <br>
+    <el-table :data="tableData3" style="background: #2a2a2a;border-color: #333;">
+      <el-table-column v-for="(item, index) in columns3" :key="index" :label="item.label" :prop="item.key">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+import api from "@/api/audit.js";
+import linechart from "@/components/lineChart";
+
+export default {
+  components: {
+    linechart
+  },
+  data() {
+    return {
+      linedata: [],
+      linedata2: [],
+      columns: [
+        {
+          label: '车场总数',
+          key: 'noticeTitle'
+        },
+        {
+          label: '本月新增车场',
+          key: 'createTime'
+        },
+        {
+          label: '车位总数',
+          key: 'noticeTitle'
+        },
+        {
+          label: '本月新增车位',
+          key: 'createTime'
+        }
+      ],
+      columns2: [
+        {
+          label: '停车场名称',
+          key: 'noticeTitle'
+        },
+        {
+          label: '占用率',
+          key: 'createTime'
+        },
+        {
+          label: '百分比',
+          key: 'noticeTitle2'
+        }
+      ],
+      columns3: [
+        {
+          label: '用户姓名',
+          key: 'noticeTitle'
+        },
+        {
+          label: '车牌号',
+          key: 'createTime'
+        },
+        {
+          label: '行为',
+          key: 'noticeTitle2'
+        },
+        {
+          label: '日期',
+          key: 'noticeTitle2'
+        },
+      ],
+      formInline1: {
+        plateNo: ''
+      },
+      tableData: [{"publicTitle":'预警提示',"publicTime":'2023-12-29 10:00:00',"publicPerson":'李玉'},
+        {"publicTitle":'停车时限',"publicTime":'2023-12-31 11:00:00',"publicPerson":'张玮'},
+        {"publicTitle":'设备故障',"publicTime":'2023-12-30 10:00:00',"publicPerson":'李玉'},],
+      tableData2:[{"noticeTitle":'预警提示',"createTime":'2023-12-29 10:00:00',"noticeTitle2":'李玉'}],
+      tableData3:[],
+      total: 3,
+      pageSize: 10,
+      pageNum: 1,
+      dialogVisible: false,
+      formLabelAlign: {},
+      title: ''
+    }
+  },
+  mounted() {
+    this.getTableData()
+  },
+  watch: {
+  },
+  methods: {
+    lineTooltipFormat(params) {
+      const data = params[0].data;
+      return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
+        params[0].data.lastAmount || "--"
+      }</div>
+      </div>`;
+    },
+    handlePageChange() {
+      this.getTableData()
+    },
+    handleDetail(row) {
+      this.title = '查看详情'
+      this.formLabelAlign = row
+      this.dialogVisible = true
+    },
+    handleAdd () {
+      this.title = '发布公告'
+      this.formLabelAlign.publicTitle = ''
+      // this.formLabelAlign.publicTime = ''
+      this.formLabelAlign.publicPerson = ''
+      this.dialogVisible = true
+    },
+    handleConfirm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.title === '发布公告') {
+            api.announcementSave(this.formLabelAlign).then(res => {
+              if(res.code === 200) {
+                this.dialogVisible = false
+                this.$message({
+                  message: '发布成功!',
+                  type: 'success'
+                })
+                this.getTableData()
+              }
+            })
+          } else {
+            this.dialogVisible = false;
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    getTableData() {
+      const {pageNum, pageSize, searchWords} = this
+      api.announcementListByPage({current: pageNum, size: pageSize}).then(res => {
+        this.tableData = res.data.records || []
+        this.total = res.data.total
+      })
+    },
+  }
+}
+</script>
+<style  lang="scss" scoped>
+.form-wrapper {
+  margin-bottom: 20px;
+}
+/deep/ .el-input__inner {
+  background: #2d3744;
+  border: none;
+  border-radius: 0;
+}
+/deep/ .el-select {
+  height: 40px;
+  .el-input__inner {
+    height: 40px;
+  }
+  .el-input__prefix, .el-input__suffix {
+    height: 40px;
+  }
+
+  /* 下面设置右侧按钮居中 */
+  .el-input__suffix {
+    top: 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    align-content: flex-start;
+  }
+  /* 输入框加上上下边是 32px + 2px =34px */
+  .el-input__icon {
+    line-height: 0px;
+  }
+}
+.body-wrapper {
+  padding: 20px;
+  background: #0c0c0c;
+  .table-pagination{
+    text-align: right;
+  }
+}
+.audit-dialog{
+  .mg-bt{
+    margin-bottom: 24px;
+  }
+  .label{
+    text-align: right;
+  }
+  .form-div{
+    /deep/ .el-input__inner{
+      height: 35px;
+      width: 90%;
+      border: 1px solid #a6a5a5;
+      color: #fff;
+      background: #2d3744;
+    }
+  }
+}
+</style>

src/pages/index/components/parking_lot.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="body-wrapper">
+
+    <div style="width: 100%;">
+      <div style="width: 100%;height: 400px;">
+        <h4 style="color: white">停车场泊位分析</h4>
+        <br>
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          yAxisName="(%)"
+          :dataset="linedata"
+          :tooltipFormat="lineTooltipFormat"
+          :encode="[
+              { x: 'mouth', y: 'lastYearAmount', seriesName: '利用率',bool:'true' },
+            ]"
+          id="axstj"
+        />
+      </div>
+
+    </div>
+
+  </div>
+</template>
+<script>
+import api from "@/api/article_liao";
+import linechart from "@/components/lineChart";
+import options from '@/util/options'
+
+export default {
+  components: {
+    linechart
+  },
+  data() {
+    return {
+      districtOptions: options.districtOptions,
+      keyAreaOptions: options.keyAreaOptions,
+      linedata: [],
+      total: 0,
+      pageSize: 10,
+      pageNum: 1,
+      radio: '2',
+      dialogVisible: false,
+      selRow: {},
+      formInline: {
+        regionCode: '',
+        keyAreas: '',
+        streetName: ''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  watch: {
+  },
+  methods: {
+
+  }
+}
+</script>
+<style  lang="scss" scoped>
+.form-wrapper {
+  margin-bottom: 20px;
+}
+/deep/ .el-input__inner {
+  background: #2d3744;
+  border: none;
+  border-radius: 0;
+}
+/deep/ .el-select {
+  height: 40px;
+  .el-input__inner {
+    height: 40px;
+  }
+  .el-input__prefix, .el-input__suffix {
+    height: 40px;
+  }
+
+  /* 下面设置右侧按钮居中 */
+  .el-input__suffix {
+    top: 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    align-content: flex-start;
+  }
+  /* 输入框加上上下边是 32px + 2px =34px */
+  .el-input__icon {
+    line-height: 0px;
+  }
+}
+/deep/ .form-wrapper .el-button {
+  background: linear-gradient(90deg,#0158d9,#3c97e4);
+  width: 100px;
+  height: 40px;
+}
+.body-wrapper {
+  padding: 20px;
+  background: #0c0c0c;
+  .button-block{
+    text-align: right;
+    margin-bottom: 20px;
+  }
+  .table-pagination{
+    text-align: right;
+  }
+}
+.audit-dialog{
+  .mg-bt{
+    margin-bottom: 24px;
+  }
+  .label{
+    text-align: right;
+  }
+}
+/deep/ .el-textarea.is-disabled .el-textarea__inner {
+  background: #2a2a2a;
+  color: #fff;
+}
+</style>

src/pages/index/components/parking_time_analysis.vue

@@ -0,0 +1,243 @@
+@ -0,0 +1,257 @@
+<template>
+  <div class="body-wrapper">
+    <div>
+      <h2 style="color: #3498db;margin-bottom: 20px;display: inline-block;width: 90%">停车时长分析</h2>
+    </div>
+    <div style="height: 300px;width:100%">
+      <piechart
+        class="model-pie-body"
+        id="chart1"
+        :radiusArr="['30%', '70%']"
+        :roseType = "false"
+        :colorArr="modelPieColor"
+        :labelFormat="['{name|{b}}', '{sub|{@value}辆 {d}%}', '{hr|}']"
+        :dataset="modelData"
+        :encode="{ itemName: 'name', value: 'value' }"
+      />
+    </div>
+    <br>
+    <br>
+
+
+    <br>
+    <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
+      <el-table-column
+        label="日均周转次数排行"
+        type="index"
+        width="300"
+        :index="indexMethod">
+      </el-table-column>
+      <el-table-column v-for="(item, index) in columns2" :key="index" :label="item.label" :prop="item.key">
+      </el-table-column>
+    </el-table>
+    <br>
+    <br>
+    <el-table :data="tableData2" style="background: #2a2a2a;border-color: #333;">
+      <el-table-column
+        label="平均停车时长排行"
+        width="300"
+        type="index"
+        :index="indexMethod">
+      </el-table-column>
+      <el-table-column v-for="(item, index) in columns3" :key="index" :label="item.label" :prop="item.key">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+import api from "@/api/audit.js";
+import linechart from "@/components/lineChart";
+import piechart from "@/components/pieChart";
+
+export default {
+  components: {
+    linechart,
+    piechart
+  },
+  data() {
+    return {
+      linedata: [],
+      linedata2: [],
+      columns: [
+        {
+          label: '停车场名称',
+          key: 'noticeTitle'
+        },
+        {
+          label: '日均周转次数',
+          key: 'createTime'
+        },
+        {
+          label: '车位总数',
+          key: 'noticeTitle'
+        }
+      ],
+      columns2: [
+        {
+          label: '车牌号',
+          key: 'noticeTitle'
+        },
+        {
+          label: '停车时长（小时）',
+          key: 'createTime'
+        }
+      ],
+      columns3: [
+        {
+          label: '用户姓名',
+          key: 'noticeTitle'
+        },
+        {
+          label: '车牌号',
+          key: 'createTime'
+        },
+        {
+          label: '行为',
+          key: 'noticeTitle2'
+        },
+        {
+          label: '日期',
+          key: 'noticeTitle2'
+        },
+      ],
+      formInline1: {
+        plateNo: ''
+      },
+      tableData: [{"publicTitle":'预警提示',"publicTime":'2023-12-29 10:00:00',"publicPerson":'李玉'},
+        {"publicTitle":'停车时限',"publicTime":'2023-12-31 11:00:00',"publicPerson":'张玮'},
+        {"publicTitle":'设备故障',"publicTime":'2023-12-30 10:00:00',"publicPerson":'李玉'},],
+      tableData2:[{"noticeTitle":'预警提示',"createTime":'2023-12-29 10:00:00',"noticeTitle2":'李玉'}],
+      tableData3:[],
+      modelData:[],
+      modelPieColor: ["#4382f6","#9078f8","#DAA520","#2E8B57"],
+      total: 3,
+      pageSize: 10,
+      pageNum: 1,
+      dialogVisible: false,
+      formLabelAlign: {},
+      title: ''
+    }
+  },
+  mounted() {
+    this.getTableData()
+  },
+  watch: {
+  },
+  methods: {
+    lineTooltipFormat(params) {
+      const data = params[0].data;
+      return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
+        params[0].data.lastAmount || "--"
+      }</div>
+      </div>`;
+    },
+    indexMethod(index) {
+      return this.pageSize * (this.pageNum - 1) + index + 1
+    },
+    handlePageChange() {
+      this.getTableData()
+    },
+    handleDetail(row) {
+      this.title = '查看详情'
+      this.formLabelAlign = row
+      this.dialogVisible = true
+    },
+    handleAdd () {
+      this.title = '发布公告'
+      this.formLabelAlign.publicTitle = ''
+      // this.formLabelAlign.publicTime = ''
+      this.formLabelAlign.publicPerson = ''
+      this.dialogVisible = true
+    },
+    handleConfirm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.title === '发布公告') {
+            api.announcementSave(this.formLabelAlign).then(res => {
+              if(res.code === 200) {
+                this.dialogVisible = false
+                this.$message({
+                  message: '发布成功!',
+                  type: 'success'
+                })
+                this.getTableData()
+              }
+            })
+          } else {
+            this.dialogVisible = false;
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    getTableData() {
+      const {pageNum, pageSize, searchWords} = this
+      api.announcementListByPage({current: pageNum, size: pageSize}).then(res => {
+        this.tableData = res.data.records || []
+        this.total = res.data.total
+      })
+    },
+  }
+}
+</script>
+<style  lang="scss" scoped>
+.form-wrapper {
+  margin-bottom: 20px;
+}
+/deep/ .el-input__inner {
+  background: #2d3744;
+  border: none;
+  border-radius: 0;
+}
+/deep/ .el-select {
+  height: 40px;
+  .el-input__inner {
+    height: 40px;
+  }
+  .el-input__prefix, .el-input__suffix {
+    height: 40px;
+  }
+
+  /* 下面设置右侧按钮居中 */
+  .el-input__suffix {
+    top: 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    align-content: flex-start;
+  }
+  /* 输入框加上上下边是 32px + 2px =34px */
+  .el-input__icon {
+    line-height: 0px;
+  }
+}
+.body-wrapper {
+  padding: 20px;
+  background: #0c0c0c;
+  .table-pagination{
+    text-align: right;
+  }
+}
+.audit-dialog{
+  .mg-bt{
+    margin-bottom: 24px;
+  }
+  .label{
+    text-align: right;
+  }
+  .form-div{
+    /deep/ .el-input__inner{
+      height: 35px;
+      width: 90%;
+      border: 1px solid #a6a5a5;
+      color: #fff;
+      background: #2d3744;
+    }
+  }
+}
+</style>

src/pages/index/components/temp_parking-statistics.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="body-wrapper">
+    <div>
+      <h2 style="color: #3498db;margin-bottom: 20px;display: inline-block;width: 90%">临时停车统计</h2>
+    </div>
+    <div style="height: 300px;width:100%">
+      <piechart
+        class="model-pie-body"
+        id="chart1"
+        :radiusArr="['30%', '70%']"
+        :roseType = "false"
+        :colorArr="modelPieColor"
+        :labelFormat="['{name|{b}}', '{sub|{@value}辆 {d}%}', '{hr|}']"
+        :dataset="modelData"
+        :encode="{ itemName: 'name', value: 'value' }"
+      />
+    </div>
+    <br>
+    <br>
+
+
+    <br>
+    <div style="height: 400px;width: 100%">
+      <linechart
+        :autoStop="false"
+        :top="30"
+        :bottom="30"
+        :left="40"
+        :legendTop="0"
+        yAxisName="(过去30日临时停车趋势)"
+        :dataset="linedata"
+        :tooltipFormat="lineTooltipFormat"
+        :encode="[
+              { x: 'month', y: 'cq', seriesName: '长期',bool:'true' },
+              { x: 'month', y: 'ls', seriesName: '临时',bool:'true' },
+            ]"
+        id="sxcyfzqk"
+      />
+    </div>
+
+  </div>
+</template>
+<script>
+import api from "@/api/audit.js";
+import linechart from "@/components/lineChart";
+import piechart from "@/components/pieChart";
+
+export default {
+  components: {
+    linechart,
+    piechart
+  },
+  data() {
+    return {
+      linedata: [],
+      linedata2: [],
+      formInline1: {
+        plateNo: ''
+      },
+      tableData: [{"publicTitle":'预警提示',"publicTime":'2023-12-29 10:00:00',"publicPerson":'李玉'},
+        {"publicTitle":'停车时限',"publicTime":'2023-12-31 11:00:00',"publicPerson":'张玮'},
+        {"publicTitle":'设备故障',"publicTime":'2023-12-30 10:00:00',"publicPerson":'李玉'},],
+      tableData2:[{"noticeTitle":'预警提示',"createTime":'2023-12-29 10:00:00',"noticeTitle2":'李玉'}],
+      tableData3:[],
+      modelData:[],
+      modelPieColor: ["#4382f6","#9078f8"],
+      total: 3,
+      pageSize: 10,
+      pageNum: 1,
+      dialogVisible: false,
+      formLabelAlign: {},
+      title: ''
+    }
+  },
+  mounted() {
+    this.getTableData()
+  },
+  watch: {
+  },
+  methods: {
+    lineTooltipFormat(params) {
+      const data = params[0].data;
+      return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
+        params[0].data.lastAmount || "--"
+      }</div>
+      </div>`;
+    },
+    indexMethod(index) {
+      return this.pageSize * (this.pageNum - 1) + index + 1
+    },
+    handlePageChange() {
+      this.getTableData()
+    },
+    handleDetail(row) {
+      this.title = '查看详情'
+      this.formLabelAlign = row
+      this.dialogVisible = true
+    },
+    handleAdd () {
+      this.title = '发布公告'
+      this.formLabelAlign.publicTitle = ''
+      // this.formLabelAlign.publicTime = ''
+      this.formLabelAlign.publicPerson = ''
+      this.dialogVisible = true
+    },
+    handleConfirm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.title === '发布公告') {
+            api.announcementSave(this.formLabelAlign).then(res => {
+              if(res.code === 200) {
+                this.dialogVisible = false
+                this.$message({
+                  message: '发布成功!',
+                  type: 'success'
+                })
+                this.getTableData()
+              }
+            })
+          } else {
+            this.dialogVisible = false;
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    getTableData() {
+      const {pageNum, pageSize, searchWords} = this
+      api.announcementListByPage({current: pageNum, size: pageSize}).then(res => {
+        this.tableData = res.data.records || []
+        this.total = res.data.total
+      })
+    },
+  }
+}
+</script>
+<style  lang="scss" scoped>
+.form-wrapper {
+  margin-bottom: 20px;
+}
+/deep/ .el-input__inner {
+  background: #2d3744;
+  border: none;
+  border-radius: 0;
+}
+/deep/ .el-select {
+  height: 40px;
+  .el-input__inner {
+    height: 40px;
+  }
+  .el-input__prefix, .el-input__suffix {
+    height: 40px;
+  }
+
+  /* 下面设置右侧按钮居中 */
+  .el-input__suffix {
+    top: 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    align-content: flex-start;
+  }
+  /* 输入框加上上下边是 32px + 2px =34px */
+  .el-input__icon {
+    line-height: 0px;
+  }
+}
+.body-wrapper {
+  padding: 20px;
+  background: #0c0c0c;
+  .table-pagination{
+    text-align: right;
+  }
+}
+.audit-dialog{
+  .mg-bt{
+    margin-bottom: 24px;
+  }
+  .label{
+    text-align: right;
+  }
+  .form-div{
+    /deep/ .el-input__inner{
+      height: 35px;
+      width: 90%;
+      border: 1px solid #a6a5a5;
+      color: #fff;
+      background: #2d3744;
+    }
+  }
+}
+</style>

src/router/index.js

@@ -293,6 +293,31 @@ export default new Router({
           path: "/parking_analysis_report",
           component: () => import("../pages/index/components/parking_analysis_report.vue")
         },
+        {
+          name: "parking_analysis",
+          path: "/parking_analysis",
+          component: () => import("../pages/index/components/parking_analysis.vue")
+        },
+        {
+          name: "parking_time_analysis",
+          path: "/parking_time_analysis",
+          component: () => import("../pages/index/components/parking_time_analysis.vue")
+        },
+        {
+          name: "temp_parking-statistics",
+          path: "/temp_parking-statistics",
+          component: () => import("../pages/index/components/temp_parking-statistics.vue")
+        },
+        {
+          name: "berth_turnover",
+          path: "/berth_turnover",
+          component: () => import("../pages/index/components/berth_turnover.vue")
+        },
+        {
+          name: "parking_lot",
+          path: "/parking_lot",
+          component: () => import("../pages/index/components/parking_lot.vue")
+        },
       ]
     }
   ]