区域停车主题、设备运营主题、停车饱和预警、停车缺口分析、停车难易指数、全局停车诱导、"区域停车发展分析"、"路内泊位设置推荐"、停车盲点挖招、服务发布功能、公告功能、消息中心功能

src/components/lineChart.vue

@@ -135,18 +135,16 @@ export default {
         markLine: this.markLine,
         hoverAnimation: this.symbolSize === 4,
         encode: encode,
-        lineStyle: { width: 2 },
+        lineStyle: { width: 2 , color:encode.col},
         itemStyle: {
-          color: this.colorIdx ? this.colors[this.colorIdx] : this.colors[idx],
+          color: encode.col ? encode.col:this.colorIdx ? this.colors[this.colorIdx] : this.colors[idx],
         },
         areaStyle: {
           opacity: this.showArea ? 1 : 0,
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: this.colorIdx
-                ? this.colors[this.colorIdx]
-                : this.colors[idx],
+              color: encode.col ? encode.col:this.colorIdx ? this.colors[this.colorIdx] : this.colors[idx],
             },
             {
               offset: 1,

src/components/vtableNew.vue

@@ -18,7 +18,7 @@
       <tbody v-if="!isAutoScroll">
         <tr v-for="(item, idx) in datas" :key="idx">
           <td style="width:20px;textAlign: center;" v-if="showIdx">{{getIdxPad(idx+1)}}</td>
-          <td :style="`width:${column.width}`" :class="getTdClass(column, item[column.rowIdx])" v-for="(column, cId) in columns" :key="cId">
+          <td :style="`width:${column.width};`" :class="getTdClass(column, item[column.rowIdx])" v-for="(column, cId) in columns" :key="cId">
             <div>
               <div class="value-block">
                 {{!isNaN(item[column.rowIdx]) ? isAbs ? Math.abs(item[column.rowIdx]) : item[column.rowIdx] : item[column.rowIdx] }}

src/pages/index/components/access_data_analysis.vue

@@ -1,18 +1,23 @@
 <template>
   <div class="body-wrapper">
-    <div class="search-card" style="display: flex; justify-content: space-between;">
-      <el-select v-model="value" placeholder="请选择所在区" style="margin-left: 15px;padding: 10px">
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
-        </el-option>
-      </el-select>
-      <el-input class="input-wrapper" v-model="searchWords" placeholder="请输入停车场名称" style="margin-left: 15px;padding: 9px">
-        <el-button slot="append" class="searchbtn" @click="handleSearch" style="background-color: #2a2a2a"> 确认</el-button>
-      </el-input>
-    </div>
+      <el-form class="form-wrapper" :inline="true" :model="formInline">
+        <el-form-item label="所在区">
+          <el-select v-model="formInline.region" placeholder="请选择所在区">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="停车场名称">
+          <el-input v-model="formInline.interfaceName" placeholder="请输入停车场名称"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+        </el-form-item>
+      </el-form>
     <div style="display: flex; justify-content: space-between;">
       <div style="width: 50%; height: 300px">
         <barchart
@@ -61,6 +66,10 @@ export default {
   },
   data() {
     return {
+      formInline: {
+        interfaceName: '',
+        region: ''
+      },
         options: [{
           value: '源汇区',
           label: '源汇区'
@@ -77,6 +86,7 @@ export default {
           value: '舞阳县',
           label: '舞阳县'
         }],
+      value: '',
       modelPieColor: ["#4382f6", "#9078f8", "#79a7db", "#FF9800", "#9C27B0"],
       modelPieColor1: ["#4382f6", "#9078f8", "#6aa1e1", "#FF9800", "#9C27B0"],
       modelData: {
@@ -131,4 +141,42 @@ export default {
   width: 100%;
   height: 99%;
 }
+
+.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;
+}
 </style>

src/pages/index/components/announcement_function.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="body-wrapper">
+    <div>
+      <h2 style="color: white;margin-bottom: 20px;display: inline-block;width: 90%">公告信息</h2>
+      <el-button>发布公告</el-button>
+    </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>
+    <div class="table-pagination">
+      <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
+                     :current-page.sync="pageNum" :page-size.sync="pageSize">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import api from "@/api/audit.js";
+
+export default {
+  components: {},
+  data() {
+    return {
+      columns: [
+        {
+          label: '发布标题',
+          key: 'publicTitle'
+        },
+        {
+          label: '发布时间',
+          key: 'publicTime'
+        },
+        {
+          label: '发布人',
+          key: 'publicPerson'
+        }
+      ],
+      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":'李玉'},],
+      total: 3,
+      pageSize: 10,
+      pageNum: 1,
+      radio: '2',
+      dialogVisible: false,
+      selRow: {},
+      searchWords: undefined
+    }
+  },
+  mounted() {
+    this.getTableData()
+  },
+  watch: {
+  },
+  methods: {
+    handlePageChange() {
+      this.getTableData()
+    },
+    handleAudit(row) {
+      this.selRow = row
+      this.dialogVisible = true
+    },
+    handleCancelApply(row) {
+      console.log('enter handle cancel apply')
+    },
+    handleConfirm() {
+      const {id} = this.selRow
+      console.log('radio', this.radio)
+      api.applyResource({id, applyType: this.radio}).then(res => {
+        if(res.success) {
+          this.dialogVisible = false
+          this.$message({
+            message: '审核成功!',
+            type: 'success'
+          })
+          this.getTableData()
+        }
+      })
+    },
+    getTableData() {
+      const {pageNum, pageSize, searchWords} = this
+      api.applyList({pageNum, pageSize, resourceName: searchWords}).then(res => {
+        this.tableData = []
+        res.data.records.map((item, index) => {
+          const newItem = {...item}
+          newItem.applyTypeText = this.getApplyTypeText(item.applyType)
+          this.tableData.push(newItem)
+        })
+        this.total = res.data.total
+      })
+    },
+    getApplyTypeText(val) {
+      if (!val){
+        return '未申请'
+      }
+      const textMap = {
+        1: '待审批',
+        2: '审批通过',
+        3: '审批驳回'
+      }
+      return textMap[val]
+    },
+    handleSearch() {
+      this.pageNum = 1
+      this.getTableData()
+    }
+  }
+}
+</script>
+<style  lang="scss" scoped>
+.body-wrapper {
+  padding: 20px;
+  background: #0c0c0c;
+  /deep/ .el-button {
+    background-color: #0158d9;
+    color: honeydew;
+    border: none;
+    width: 100px;
+    height: 40px;
+  }
+  .table-pagination{
+    text-align: right;
+  }
+}
+.audit-dialog{
+  .mg-bt{
+    margin-bottom: 24px;
+  }
+  .label{
+    text-align: right;
+  }
+}
+</style>

src/pages/index/components/berth_recommend.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="body-wrapper">
+    <div class="body-wrapper" style="height: 300px;">
+      <div style="color: white;font-size: 23px;margin-bottom: 20px">各区域停车缺口</div>
+      <linechart
+        :autoStop="false"
+        :top="30"
+        :bottom="30"
+        :left="40"
+        :legendTop="0"
+        :dataset="linedata"
+        :tooltipFormat="lineTooltipFormat"
+        :encode="[
+              { x: 'month', y: 'lastYearAmount', seriesName: '预警值',col:'red' },
+              { x: 'month', y: 'thisYearAmount', seriesName: '缺口',bool:'true' },
+            ]"
+        id="sxcyfzqk"
+      />
+      <div class="body-wrapper" style=" height: 450px">
+        <div style="color: white;font-size: 23px;margin-bottom: 20px">各区域路内泊位</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>
+        <div class="table-pagination">
+          <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
+                         :current-page.sync="pageNum" :page-size.sync="pageSize">
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import linechart from "@/components/lineChart";
+
+export default {
+  components: {
+    linechart,
+  },
+  data() {
+    return {
+      linedata: [{month: '老街街道',lastYearAmount: 30, thisYearAmount: 20}, {month: '马路街街道', lastYearAmount:30, thisYearAmount:50}
+        , {month: '顺河街街道', lastYearAmount:30, thisYearAmount:30}, {month: '干河陈街道', lastYearAmount:30, thisYearAmount:30}
+        , {month: '大刘镇', lastYearAmount:30, thisYearAmount:0}, {month: '阴阳赵镇', lastYearAmount:30, thisYearAmount:0}],
+      columns: [
+        {
+          label: '街道名称',
+          key: 'jd'
+        },
+        {
+          label: '缺口程度（%）',
+          key: 'qk'
+        },
+        {
+          label: '推荐策略',
+          key: 'tj'
+        }
+      ],
+      tableData: [{"jd": '老街街道',"qk": 30,"tj":"建议设置路内泊车"}
+        ,{"jd":'马路街街道',"qk": 20,"tj":"--"}
+        ,{"jd":'顺河街街道',"qk": 50,"tj":"建议设置路内泊车"}
+        ,{"jd":'干河陈街道',"qk": 30,"tj":"--"}
+        ,{"jd":'大刘镇',"qk": 20,"tj":"建议设置路内泊车"}
+        ,{"jd":'阴阳赵镇',"qk": 50,"tj":"--"}],
+      total: 3,
+      pageSize: 10,
+      pageNum: 1,
+      radio: '2',
+      dialogVisible: false,
+      selRow: {},
+      searchWords: undefined,
+    }
+  },
+  mounted() {
+    this.getTableData()
+  },
+  watch: {
+  },
+  methods: {
+    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: red">${params[0].seriesName}: ${
+        params[0].data.lastYearAmount || "--"
+      }(%)</div>
+      </div>`;
+    },
+    handlePageChange() {
+      this.getTableData()
+    },
+    handleCancelApply(row) {
+      console.log('enter handle cancel apply')
+    },
+    handleConfirm() {
+      const {id} = this.selRow
+      console.log('radio', this.radio)
+      api.applyResource({id, applyType: this.radio}).then(res => {
+        if(res.success) {
+          this.dialogVisible = false
+          this.$message({
+            message: '审核成功!',
+            type: 'success'
+          })
+          this.getTableData()
+        }
+      })
+    },
+    getTableData() {
+      const {pageNum, pageSize, searchWords} = this
+      api.applyList({pageNum, pageSize, resourceName: searchWords}).then(res => {
+        this.tableData = []
+        res.data.records.map((item, index) => {
+          const newItem = {...item}
+          newItem.applyTypeText = this.getApplyTypeText(item.applyType)
+          this.tableData.push(newItem)
+        })
+        this.total = res.data.total
+      })
+    },
+  }
+}
+</script>
+<style  lang="scss" scoped>
+
+.body-wrapper {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #0c0c0c;
+  .table-pagination{
+    text-align: right;
+  }
+}
+</style>

src/pages/index/components/berths_information.vue

@@ -106,6 +106,7 @@ export default {
         value: '人民东路',
         label: '人民东路'
       }],
+      value: '',
       modelPieColor: ["#4382f6","#9078f8"],
       modelData: {
         list: [{name: '占用位', value: 100}, {name: '空闲位', value: 100}]

src/pages/index/components/blind_spot_digging.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="body-wrapper">
+    <div class="body-wrapper" style="height: 300px;">
+      <div style="color: white;font-size: 23px;margin-bottom: 20px">各区域停车盲点</div>
+      <linechart
+        :autoStop="false"
+        :top="30"
+        :bottom="30"
+        :left="40"
+        :legendTop="0"
+        :dataset="linedata"
+        :tooltipFormat="lineTooltipFormat"
+        :encode="[
+              { x: 'month', y: 'lastYearAmount', seriesName: '预警值',col:'red' },
+              { x: 'month', y: 'thisYearAmount', seriesName: '盲点',bool:'true' },
+            ]"
+        id="sxcyfzqk"
+      />
+      <div class="body-wrapper" style=" height: 450px">
+        <div style="color: white;font-size: 23px;margin-bottom: 20px">各区域优化建议</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>
+        <div class="table-pagination">
+          <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
+                         :current-page.sync="pageNum" :page-size.sync="pageSize">
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import linechart from "@/components/lineChart";
+
+export default {
+  components: {
+    linechart,
+  },
+  data() {
+    return {
+      linedata: [{month: '老街街道',lastYearAmount: 30, thisYearAmount: 20}, {month: '马路街街道', lastYearAmount:30, thisYearAmount:50}
+        , {month: '顺河街街道', lastYearAmount:30, thisYearAmount:30}, {month: '干河陈街道', lastYearAmount:30, thisYearAmount:30}
+        , {month: '大刘镇', lastYearAmount:30, thisYearAmount:0}, {month: '阴阳赵镇', lastYearAmount:30, thisYearAmount:0}],
+      columns: [
+        {
+          label: '街道名称',
+          key: 'jd'
+        },
+        {
+          label: '缺口程度（%）',
+          key: 'qk'
+        },
+        {
+          label: '推荐策略',
+          key: 'tj'
+        }
+      ],
+      tableData: [{"jd": '老街街道',"qk": 30,"tj":"建议提升停车盲点的停车资源利用率"}
+        ,{"jd":'马路街街道',"qk": 20,"tj":"--"}
+        ,{"jd":'顺河街街道',"qk": 10,"tj":"建议提升停车盲点的停车资源利用率"}
+        ,{"jd":'干河陈街道',"qk": 0,"tj":"--"}
+        ,{"jd":'大刘镇',"qk": 0,"tj":"建议提升停车盲点的停车资源利用率"}
+        ,{"jd":'阴阳赵镇',"qk": 10,"tj":"--"}],
+      total: 3,
+      pageSize: 10,
+      pageNum: 1,
+      radio: '2',
+      dialogVisible: false,
+      selRow: {},
+      searchWords: undefined,
+    }
+  },
+  mounted() {
+    this.getTableData()
+  },
+  watch: {
+  },
+  methods: {
+    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: red">${params[0].seriesName}: ${
+        params[0].data.lastYearAmount || "--"
+      }(%)</div>
+      </div>`;
+    },
+    handlePageChange() {
+      this.getTableData()
+    },
+    handleCancelApply(row) {
+      console.log('enter handle cancel apply')
+    },
+    handleConfirm() {
+      const {id} = this.selRow
+      console.log('radio', this.radio)
+      api.applyResource({id, applyType: this.radio}).then(res => {
+        if(res.success) {
+          this.dialogVisible = false
+          this.$message({
+            message: '审核成功!',
+            type: 'success'
+          })
+          this.getTableData()
+        }
+      })
+    },
+    getTableData() {
+      const {pageNum, pageSize, searchWords} = this
+      api.applyList({pageNum, pageSize, resourceName: searchWords}).then(res => {
+        this.tableData = []
+        res.data.records.map((item, index) => {
+          const newItem = {...item}
+          newItem.applyTypeText = this.getApplyTypeText(item.applyType)
+          this.tableData.push(newItem)
+        })
+        this.total = res.data.total
+      })
+    },
+  }
+}
+</script>
+<style  lang="scss" scoped>
+
+.body-wrapper {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #0c0c0c;
+  .table-pagination{
+    text-align: right;
+  }
+}
+</style>

src/pages/index/components/gap_analysis.vue

@@ -0,0 +1,262 @@
+<template>
+  <div>
+    <div style="color: #d5d3d3" class="middle-map">
+      <div align="center" style="color: white;font-size: 23px;margin-bottom: 20px">停车缺口分析</div>
+      <el-select v-model="value" filterable remote reserve-keyword placeholder="请选择时段">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+      <div style="height: 450px">
+        <div class="bottom" id="map"></div>
+      </div>
+    </div>
+      <div class="body-wrapper" style="height: 300px">
+        <div align="center" style="color: white;font-size: 23px;margin-bottom: 20px">停车缺口变化趋势</div>
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          :dataset="linedata"
+          :tooltipFormat="lineTooltipFormat"
+          :encode="[
+              { x: 'month', y: 'thisYearAmount', seriesName: '缺口程度',bool:'true' },
+            ]"
+          id="sxcyfzqk"
+        />
+      </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import * as geoJson from '../../../util/411100.json'
+import linechart from "@/components/lineChart";
+
+export default {
+  components: {
+    linechart,
+  },
+  data() {
+    return {
+      linedata: [{month: '8:00', thisYearAmount: 21}, {month: '10:00', thisYearAmount:22}
+        , {month: '12:00', thisYearAmount:23}, {month: '14:00', thisYearAmount:25}
+        , {month: '16:00', thisYearAmount:28}, {month: '18:00', thisYearAmount:31}
+        , {month: '20:00', thisYearAmount:34}, {month: '22:00', thisYearAmount:36}
+        , {month: '0:00', thisYearAmount:38}, {month: '2:00', thisYearAmount:39}
+        , {month: '4:00', thisYearAmount:40}, {month: '6:00', thisYearAmount:41}],
+      options: [{
+        value: '日间时段',
+        label: '日间时段'
+      }, {
+        value: '夜间时段',
+        label: '夜间时段'
+      }],
+      value: '',
+      dqIndex: -1,
+      timer: null,
+      option: {
+        visualMap: {
+          show: true,
+          type: "continuous",
+          left: "0%",
+          bottom: "0%",
+          calculable: true,
+          textStyle: {
+            color: "white",
+          },
+          text: ["(%)"],
+          min: 0,
+          max: 100,
+          inRange: {
+            color: ["#4FC9FB","#36ADFC","#1788D1","#0E6BAE","#1871A2","#0D4D7D"],
+          },
+        },
+        geo: {
+          map: "luohe",
+          // aspectScale: 1,
+          roam: false,
+          itemStyle: {
+            normal: {
+              borderColor: "#2ab8ff",
+              borderWidth: 2.5,
+              areaColor: "#12235c",
+            },
+            emphasis: {
+              areaColor: "#2AB8FF",
+              shadowColor: "rgba(42,184,255, 0.7)",
+              shadowOffsetY: 5,
+              shadowOffsetX: 5,
+              shadowBlur: 5,
+            },
+          },
+        },
+        tooltip: {
+          confine: true,
+          formatter: this.mapTooltip,
+          position: "inside",
+          backgroundColor: "transparent",
+        },
+        series: [
+          {
+            type: "map",
+            // roam: true,
+            label: {
+              normal: {
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+            },
+            itemStyle: {
+              normal: {
+                borderColor: "#76bef5",
+                borderWidth: 1.5,
+                areaColor: "#4282de",
+              },
+              emphasis: {
+                areaColor: "#002aff",
+                borderWidth: 0,
+                color: "green",
+              },
+            },
+            roam: false,
+            map: "luohe", //使用
+            data: [],
+          },
+        ],
+      },
+      curData: {},
+      dataSource: null,
+      totalAll: '0',
+    };
+  },
+  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.thisYearAmount || "--"
+      }</div>
+      </div>`;
+    },
+    setIntervalMap(chart) {
+      this.timer = setInterval(() => {
+        chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: this.dqIndex + 1,
+        });
+        this.dqIndex++;
+        if (this.dqIndex > 4) {
+          this.dqIndex = -1;
+        }
+      }, 3000);
+    },
+    mapTooltip(data) {
+      return `<div class="map-tooltip">
+        <div class="map-tooltip-name">${data.name}:<span class="map-tooltip-value">${data.value}%</span></div>
+      </div>`;
+    },
+  },
+  mounted() {
+    let arr = []
+    let dataSoure = {
+      '411102': {quyuName: '源汇区', zb: 40},
+      '411103': {quyuName: '郾城区', zb: 60},
+      '411104': {quyuName: '召陵区', zb: 40},
+      '411121': {quyuName: '舞阳县', zb: 50},
+      '411122': {quyuName: '临颍县', zb: 30}}
+    for (const key in dataSoure) {
+      if (key !== '411100') {
+        arr.push({
+          name: dataSoure[key].quyuName,
+          value: Number(dataSoure[key].zb),
+        });
+      }
+    }
+    let mapMax = Math.max(...arr.map(item => item.value))
+    let mapMin = Math.min(...arr.map(item => item.value))
+    console.log(mapMin, '111')
+    console.log(mapMax, '222')
+    let chart = echarts.init(document.getElementById("map"));
+    echarts.registerMap("luohe", geoJson);
+    this.option.series[0].data = arr;
+    this.option.visualMap.min = mapMin;
+    this.option.visualMap.max = mapMax;
+    chart.setOption(this.option);
+    this.dqIndex = -1;
+    this.setIntervalMap(chart);
+    //鼠标移入静止播放
+    chart.on("mouseover", (e) => {
+      clearInterval(this.timer);
+      chart.dispatchAction({
+        type: "showTip",
+        seriesIndex: 0,
+        dataIndex: e.dataIndex,
+      });
+    });
+    chart.on("mouseout", (e) => {
+      clearInterval(this.timer);
+      //鼠标移出后先把上次的高亮取消
+      chart.dispatchAction({
+        type: "downplay",
+        seriesIndex: 0,
+        dataIndex: e.dataIndex,
+      });
+      this.setIntervalMap(chart);
+    });
+  },
+};
+</script>
+
+<style>
+.el-input__inner{
+  color:#eee;
+  border-color: #212121;
+  background-color: rgba(1, 28, 82, 0.8);
+}
+</style>
+<style  lang="scss" scoped>
+.body-wrapper {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #0c0c0c;
+}
+</style>
+<style lang="less" scoped>
+.middle-map {
+  width: 100%;
+  height: 100%;
+  .bottom {
+    height: 90%;
+    width: 100%;
+  }
+  /deep/.map-tooltip {
+    font-size: 18px;
+    padding: 10px 20px;
+    background: url("../../../../static/img/u231.png");
+    background-size: 100% 100%;
+    .map-tooltip-name {
+      color: #00e4ff;
+    }
+    .map-tooltip-value {
+      color: white;
+      margin-left: 20px;
+    }
+  }
+}
+
+</style>

src/pages/index/components/message.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="body-wrapper">
+    <div>
+      <h2 style="color: white;margin-bottom: 20px;">消息中心</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-column label="操作" width="150">
+      <div slot-scope="scope">
+        <el-button
+          size="mini">详情</el-button>
+      </div>
+    </el-table-column>
+    </el-table>
+    <div class="table-pagination">
+      <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
+                     :current-page.sync="pageNum" :page-size.sync="pageSize">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import api from "@/api/audit.js";
+
+export default {
+  components: {},
+  data() {
+    return {
+      columns: [
+        {
+          label: '标题',
+          key: 'title'
+        },
+        {
+          label: '消息类型',
+          key: 'messageType'
+        },
+        {
+          label: '发布时间',
+          key: 'publicTime'
+        },
+      ],
+      tableData: [{"title":'系统升级',"messageType":'公告',"publicTime":'2023-12-29 10:00:00'},
+        {"title":'预警提示',"messageType":'系统通知',"publicTime":'2023-12-25 10:00:00'},
+        {"title":'故障提醒',"messageType":'系统通知',"publicTime":'2023-12-29 10:00:00'},],
+      total: 3,
+      pageSize: 10,
+      pageNum: 1,
+      radio: '2',
+      dialogVisible: false,
+      selRow: {},
+      searchWords: undefined
+    }
+  },
+  mounted() {
+    this.getTableData()
+  },
+  watch: {
+  },
+  methods: {
+    handlePageChange() {
+      this.getTableData()
+    },
+    handleAudit(row) {
+      this.selRow = row
+      this.dialogVisible = true
+    },
+    handleCancelApply(row) {
+      console.log('enter handle cancel apply')
+    },
+    handleConfirm() {
+      const {id} = this.selRow
+      console.log('radio', this.radio)
+      api.applyResource({id, applyType: this.radio}).then(res => {
+        if(res.success) {
+          this.dialogVisible = false
+          this.$message({
+            message: '审核成功!',
+            type: 'success'
+          })
+          this.getTableData()
+        }
+      })
+    },
+    getTableData() {
+      const {pageNum, pageSize, searchWords} = this
+      api.applyList({pageNum, pageSize, resourceName: searchWords}).then(res => {
+        this.tableData = []
+        res.data.records.map((item, index) => {
+          const newItem = {...item}
+          newItem.applyTypeText = this.getApplyTypeText(item.applyType)
+          this.tableData.push(newItem)
+        })
+        this.total = res.data.total
+      })
+    },
+    getApplyTypeText(val) {
+      if (!val){
+        return '未申请'
+      }
+      const textMap = {
+        1: '待审批',
+        2: '审批通过',
+        3: '审批驳回'
+      }
+      return textMap[val]
+    },
+    handleSearch() {
+      this.pageNum = 1
+      this.getTableData()
+    }
+  }
+}
+</script>
+<style  lang="scss" scoped>
+.body-wrapper {
+  padding: 20px;
+  background: #0c0c0c;
+  /deep/ .el-button {
+    background-color: #0158d9;
+    color: honeydew;
+    border: none;
+    width: 50px;
+    height: 25px;
+  }
+  .table-pagination{
+    text-align: right;
+  }
+}
+.audit-dialog{
+  .mg-bt{
+    margin-bottom: 24px;
+  }
+  .label{
+    text-align: right;
+  }
+}
+</style>

src/pages/index/components/park_development_analysis.vue

@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <div style="color: #d5d3d3" class="middle-map">
+      <div align="center" style="color: white;font-size: 23px;margin-bottom: 20px">区域综合评估</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>
+      <div class="table-pagination">
+        <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
+                       :current-page.sync="pageNum" :page-size.sync="pageSize">
+        </el-pagination>
+      </div>
+    </div>
+    <div class="body-wrapper" style="height: 300px">
+      <div align="center" style="color: white;font-size: 23px;margin-bottom: 20px">停车发展评估</div>
+      <el-table :data="tableData1" style="background: #2a2a2a;border-color: #333;">
+        <el-table-column v-for="(item, index) in columns1" :key="index" :label="item.label" :prop="item.key">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      columns: [
+        {
+          label: '区县',
+          key: 'district'
+        },
+        {
+          label: '周边区域开发',
+          key: 'surroundingArea'
+        },
+        {
+          label: '停车资源供给',
+          key: 'parkingResource'
+        },
+        {
+          label: '公共交通设施发展',
+          key: 'publicTransport'
+        },
+        {
+          label: '道路资源供给',
+          key: 'roadResource'
+        },
+      ],
+      tableData: [{"district":'临颍县',"surroundingArea":'轻微开发',"parkingResource":'充足',"publicTransport":' 欠缺',"roadResource":'充足'}
+      ,{"district":'源汇区',"surroundingArea":'轻微开发',"parkingResource":'充足',"publicTransport":' 欠缺',"roadResource":'充足'}
+      ,{"district":'郾城区',"surroundingArea":'轻微开发',"parkingResource":'充足',"publicTransport":' 欠缺',"roadResource":'充足'}
+      ,{"district":'召陵区',"surroundingArea":'轻微开发',"parkingResource":'充足',"publicTransport":' 欠缺',"roadResource":'充足'}
+      ,{"district":'舞阳县',"surroundingArea":'轻微开发',"parkingResource":'充足',"publicTransport":' 欠缺',"roadResource":'充足'},],
+      total: 3,
+      pageSize: 10,
+      pageNum: 1,
+      radio: '2',
+      dialogVisible: false,
+      selRow: {},
+      searchWords: undefined,
+      columns1: [
+        {
+          label: '姓名',
+          key: 'name'
+        },
+        {
+          label: '停车发展评估',
+          key: 'assessment'
+        }
+      ],
+      tableData1: [{"name":'舞阳区',"assessment":'不建议进行停车发展'}
+        ,{"name":'源汇区',"assessment":'不建议进行停车发展'}
+        ,{"name":'郾城区',"assessment":'建议进行停车发展'}
+        ,{"name":'召陵区',"assessment":'建议进行停车发展'}
+        ,],
+    };
+  },
+  methods: {
+    handlePageChange() {
+      this.getTableData()
+    },
+    handleCancelApply(row) {
+      console.log('enter handle cancel apply')
+    },
+    handleConfirm() {
+      const {id} = this.selRow
+      console.log('radio', this.radio)
+      api.applyResource({id, applyType: this.radio}).then(res => {
+        if(res.success) {
+          this.dialogVisible = false
+          this.$message({
+            message: '审核成功!',
+            type: 'success'
+          })
+          this.getTableData()
+        }
+      })
+    },
+    getTableData() {
+      const {pageNum, pageSize, searchWords} = this
+      api.applyList({pageNum, pageSize, resourceName: searchWords}).then(res => {
+        this.tableData = []
+        res.data.records.map((item, index) => {
+          const newItem = {...item}
+          newItem.applyTypeText = this.getApplyTypeText(item.applyType)
+          this.tableData.push(newItem)
+        })
+        this.total = res.data.total
+      })
+    },
+  },
+  mounted() {
+    this.getTableData()
+  },
+};
+</script>
+<style  lang="scss" scoped>
+
+.middle-map {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #0c0c0c;
+  .table-pagination{
+    text-align: right;
+  }
+}
+</style>
+

src/pages/index/components/park_easy.vue

@@ -0,0 +1,262 @@
+<template>
+  <div>
+    <div style="color: #d5d3d3" class="middle-map">
+      <div align="center" style="color: white;font-size: 23px;margin-bottom: 20px">停车难易指数</div>
+      <el-select v-model="value" filterable remote reserve-keyword placeholder="请选择时段">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+      <div style="height: 450px">
+        <div class="bottom" id="map"></div>
+      </div>
+    </div>
+    <div class="body-wrapper" style="height: 300px">
+      <div align="center" style="color: white;font-size: 23px;margin-bottom: 20px">停车难易指数变化趋势</div>
+      <linechart
+        :autoStop="false"
+        :top="30"
+        :bottom="30"
+        :left="40"
+        :legendTop="0"
+        :dataset="linedata"
+        :tooltipFormat="lineTooltipFormat"
+        :encode="[
+              { x: 'month', y: 'thisYearAmount', seriesName: '缺口程度',bool:'true' },
+            ]"
+        id="sxcyfzqk"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import * as geoJson from '../../../util/411100.json'
+import linechart from "@/components/lineChart";
+
+export default {
+  components: {
+    linechart,
+  },
+  data() {
+    return {
+      linedata: [{month: '8:00', thisYearAmount: 21}, {month: '10:00', thisYearAmount:22}
+        , {month: '12:00', thisYearAmount:23}, {month: '14:00', thisYearAmount:25}
+        , {month: '16:00', thisYearAmount:28}, {month: '18:00', thisYearAmount:31}
+        , {month: '20:00', thisYearAmount:34}, {month: '22:00', thisYearAmount:36}
+        , {month: '0:00', thisYearAmount:38}, {month: '2:00', thisYearAmount:39}
+        , {month: '4:00', thisYearAmount:40}, {month: '6:00', thisYearAmount:41}],
+      options: [{
+        value: '日间时段',
+        label: '日间时段'
+      }, {
+        value: '夜间时段',
+        label: '夜间时段'
+      }],
+      value: '',
+      dqIndex: -1,
+      timer: null,
+      option: {
+        visualMap: {
+          show: true,
+          type: "continuous",
+          left: "0%",
+          bottom: "0%",
+          calculable: true,
+          textStyle: {
+            color: "white",
+          },
+          text: ["(%)"],
+          min: 0,
+          max: 100,
+          inRange: {
+            color: ["#4FC9FB","#36ADFC","#1788D1","#0E6BAE","#1871A2","#0D4D7D"],
+          },
+        },
+        geo: {
+          map: "luohe",
+          // aspectScale: 1,
+          roam: false,
+          itemStyle: {
+            normal: {
+              borderColor: "#2ab8ff",
+              borderWidth: 2.5,
+              areaColor: "#12235c",
+            },
+            emphasis: {
+              areaColor: "#2AB8FF",
+              shadowColor: "rgba(42,184,255, 0.7)",
+              shadowOffsetY: 5,
+              shadowOffsetX: 5,
+              shadowBlur: 5,
+            },
+          },
+        },
+        tooltip: {
+          confine: true,
+          formatter: this.mapTooltip,
+          position: "inside",
+          backgroundColor: "transparent",
+        },
+        series: [
+          {
+            type: "map",
+            // roam: true,
+            label: {
+              normal: {
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+            },
+            itemStyle: {
+              normal: {
+                borderColor: "#76bef5",
+                borderWidth: 1.5,
+                areaColor: "#4282de",
+              },
+              emphasis: {
+                areaColor: "#002aff",
+                borderWidth: 0,
+                color: "green",
+              },
+            },
+            roam: false,
+            map: "luohe", //使用
+            data: [],
+          },
+        ],
+      },
+      curData: {},
+      dataSource: null,
+      totalAll: '0',
+    };
+  },
+  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.thisYearAmount || "--"
+      }</div>
+      </div>`;
+    },
+    setIntervalMap(chart) {
+      this.timer = setInterval(() => {
+        chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: this.dqIndex + 1,
+        });
+        this.dqIndex++;
+        if (this.dqIndex > 4) {
+          this.dqIndex = -1;
+        }
+      }, 3000);
+    },
+    mapTooltip(data) {
+      return `<div class="map-tooltip">
+        <div class="map-tooltip-name">${data.name}:<span class="map-tooltip-value">${data.value}%</span></div>
+      </div>`;
+    },
+  },
+  mounted() {
+    let arr = []
+    let dataSoure = {
+      '411102': {quyuName: '源汇区', zb: 40},
+      '411103': {quyuName: '郾城区', zb: 60},
+      '411104': {quyuName: '召陵区', zb: 40},
+      '411121': {quyuName: '舞阳县', zb: 50},
+      '411122': {quyuName: '临颍县', zb: 30}}
+    for (const key in dataSoure) {
+      if (key !== '411100') {
+        arr.push({
+          name: dataSoure[key].quyuName,
+          value: Number(dataSoure[key].zb),
+        });
+      }
+    }
+    let mapMax = Math.max(...arr.map(item => item.value))
+    let mapMin = Math.min(...arr.map(item => item.value))
+    console.log(mapMin, '111')
+    console.log(mapMax, '222')
+    let chart = echarts.init(document.getElementById("map"));
+    echarts.registerMap("luohe", geoJson);
+    this.option.series[0].data = arr;
+    this.option.visualMap.min = mapMin;
+    this.option.visualMap.max = mapMax;
+    chart.setOption(this.option);
+    this.dqIndex = -1;
+    this.setIntervalMap(chart);
+    //鼠标移入静止播放
+    chart.on("mouseover", (e) => {
+      clearInterval(this.timer);
+      chart.dispatchAction({
+        type: "showTip",
+        seriesIndex: 0,
+        dataIndex: e.dataIndex,
+      });
+    });
+    chart.on("mouseout", (e) => {
+      clearInterval(this.timer);
+      //鼠标移出后先把上次的高亮取消
+      chart.dispatchAction({
+        type: "downplay",
+        seriesIndex: 0,
+        dataIndex: e.dataIndex,
+      });
+      this.setIntervalMap(chart);
+    });
+  },
+};
+</script>
+
+<style>
+.el-input__inner{
+  color:#eee;
+  border-color: #212121;
+  background-color: rgba(1, 28, 82, 0.8);
+}
+</style>
+<style  lang="scss" scoped>
+.body-wrapper {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #0c0c0c;
+}
+</style>
+<style lang="less" scoped>
+.middle-map {
+  width: 100%;
+  height: 100%;
+  .bottom {
+    height: 90%;
+    width: 100%;
+  }
+  /deep/.map-tooltip {
+    font-size: 18px;
+    padding: 10px 20px;
+    background: url("../../../../static/img/u231.png");
+    background-size: 100% 100%;
+    .map-tooltip-name {
+      color: #00e4ff;
+    }
+    .map-tooltip-value {
+      color: white;
+      margin-left: 20px;
+    }
+  }
+}
+
+</style>

src/pages/index/components/park_guidance.vue

@@ -0,0 +1,234 @@
+<template>
+  <div>
+    <div style="color: #d5d3d3" class="middle-map">
+      <div align="center" style="color: white;font-size: 23px;margin-bottom: 20px">实施停车饱和度</div>
+      <div style="height: 450px">
+        <div class="bottom" id="map"></div>
+      </div>
+    </div>
+    <div class="body-wrapper" style="height: 300px">
+      <div align="center" style="color: white;font-size: 23px;margin-bottom: 20px">停车建议</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>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import * as geoJson from '../../../util/411100.json'
+import linechart from "@/components/lineChart";
+
+export default {
+  components: {
+    linechart,
+  },
+  data() {
+    return {
+      columns: [
+        {
+          label: '区域',
+          key: 'area'
+        },
+        {
+          label: '建议',
+          key: 'advice'
+        }
+      ],
+      tableData: [{"area":'舞阳区',"advice":'建议车辆引流到源汇区'}],
+      dqIndex: -1,
+      timer: null,
+      option: {
+        visualMap: {
+          show: true,
+          type: "continuous",
+          left: "0%",
+          bottom: "0%",
+          calculable: true,
+          textStyle: {
+            color: "white",
+          },
+          text: ["(%)"],
+          min: 0,
+          max: 100,
+          inRange: {
+            color: ["#4FC9FB","#36ADFC","#1788D1","#0E6BAE","#1871A2","#0D4D7D"],
+          },
+        },
+        geo: {
+          map: "luohe",
+          // aspectScale: 1,
+          roam: false,
+          itemStyle: {
+            normal: {
+              borderColor: "#2ab8ff",
+              borderWidth: 2.5,
+              areaColor: "#12235c",
+            },
+            emphasis: {
+              areaColor: "#2AB8FF",
+              shadowColor: "rgba(42,184,255, 0.7)",
+              shadowOffsetY: 5,
+              shadowOffsetX: 5,
+              shadowBlur: 5,
+            },
+          },
+        },
+        tooltip: {
+          confine: true,
+          formatter: this.mapTooltip,
+          position: "inside",
+          backgroundColor: "transparent",
+        },
+        series: [
+          {
+            type: "map",
+            // roam: true,
+            label: {
+              normal: {
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+            },
+            itemStyle: {
+              normal: {
+                borderColor: "#76bef5",
+                borderWidth: 1.5,
+                areaColor: "#4282de",
+              },
+              emphasis: {
+                areaColor: "#002aff",
+                borderWidth: 0,
+                color: "green",
+              },
+            },
+            roam: false,
+            map: "luohe", //使用
+            data: [],
+          },
+        ],
+      },
+      curData: {},
+      dataSource: null,
+      totalAll: '0',
+    };
+  },
+  methods: {
+    setIntervalMap(chart) {
+      this.timer = setInterval(() => {
+        chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: this.dqIndex + 1,
+        });
+        this.dqIndex++;
+        if (this.dqIndex > 4) {
+          this.dqIndex = -1;
+        }
+      }, 3000);
+    },
+    mapTooltip(data) {
+      return `<div class="map-tooltip">
+        <div class="map-tooltip-name">${data.name}:<span class="map-tooltip-value">${data.value}%</span></div>
+      </div>`;
+    },
+  },
+  mounted() {
+    let arr = []
+    let dataSoure = {
+      '411102': {quyuName: '源汇区', zb: 40},
+      '411103': {quyuName: '郾城区', zb: 60},
+      '411104': {quyuName: '召陵区', zb: 40},
+      '411121': {quyuName: '舞阳县', zb: 50},
+      '411122': {quyuName: '临颍县', zb: 30}}
+    for (const key in dataSoure) {
+      if (key !== '411100') {
+        arr.push({
+          name: dataSoure[key].quyuName,
+          value: Number(dataSoure[key].zb),
+        });
+      }
+    }
+    let mapMax = Math.max(...arr.map(item => item.value))
+    let mapMin = Math.min(...arr.map(item => item.value))
+    console.log(mapMin, '111')
+    console.log(mapMax, '222')
+    let chart = echarts.init(document.getElementById("map"));
+    echarts.registerMap("luohe", geoJson);
+    this.option.series[0].data = arr;
+    this.option.visualMap.min = mapMin;
+    this.option.visualMap.max = mapMax;
+    chart.setOption(this.option);
+    this.dqIndex = -1;
+    this.setIntervalMap(chart);
+    //鼠标移入静止播放
+    chart.on("mouseover", (e) => {
+      clearInterval(this.timer);
+      chart.dispatchAction({
+        type: "showTip",
+        seriesIndex: 0,
+        dataIndex: e.dataIndex,
+      });
+    });
+    chart.on("mouseout", (e) => {
+      clearInterval(this.timer);
+      //鼠标移出后先把上次的高亮取消
+      chart.dispatchAction({
+        type: "downplay",
+        seriesIndex: 0,
+        dataIndex: e.dataIndex,
+      });
+      this.setIntervalMap(chart);
+    });
+  },
+};
+</script>
+
+<style>
+.el-input__inner{
+  color:#eee;
+  border-color: #212121;
+  background-color: rgba(1, 28, 82, 0.8);
+}
+</style>
+<style  lang="scss" scoped>
+.body-wrapper {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #0c0c0c;
+}
+</style>
+<style lang="less" scoped>
+.middle-map {
+  width: 100%;
+  height: 100%;
+  .bottom {
+    height: 90%;
+    width: 100%;
+  }
+  /deep/.map-tooltip {
+    font-size: 18px;
+    padding: 10px 20px;
+    background: url("../../../../static/img/u231.png");
+    background-size: 100% 100%;
+    .map-tooltip-name {
+      color: #00e4ff;
+    }
+    .map-tooltip-value {
+      color: white;
+      margin-left: 20px;
+    }
+  }
+}
+
+</style>

src/pages/index/components/parking_area.vue

@@ -39,9 +39,9 @@
       </div>
     </div>
     <div style="display: flex; justify-content: space-between;margin-top: 5%">
-      <div style="width: 50%; height: 300px;">
+      <div style="width: 100%; height: 500px;">
         <div align="center" style="color: white">停车热度时空分布</div>
-
+        <div class="bottom" id="map"></div>
       </div>
     </div>
   </div>
@@ -49,6 +49,8 @@
 <script>
 import linechart from "@/components/lineChart";
 import barchart from "@/components/barChart";
+import * as echarts from 'echarts';
+import * as geoJson from '../../../util/411100.json';
 
 
 export default {
@@ -58,6 +60,49 @@ export default {
   },
   data() {
     return {
+      option: {
+        backgroundColor: '#0c0c0c',
+        visualMap: {
+          bottom: 100,
+          left: 100,
+          min: 0,
+          max: 100,
+          color: ['#ff4601', '#fffc00', '#87cffa'],
+          calculable: true,
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          },
+          seriesIndex: 0
+        },
+        geo: {
+          map: 'luohe',
+          show: true,
+          roam: false,
+          label: {
+            emphasis: {
+              show: false
+            }
+          },
+          itemStyle: {
+            normal: {
+              areaColor: '#17439a',
+              borderColor: '#fff'
+            },
+            emphasis: {
+              areaColor: '#17439a',
+              borderColor: '#fff'
+            }
+          }
+        },
+        series: [{
+          name: 'AQI',
+          type: 'heatmap',
+          coordinateSystem: 'geo',
+          blurSize: 40,
+          data: []
+        }]
+      },
       linedata1: [{month: '00:00', lastAmount: 68}, {month: '01:30', lastAmount:71}
         , {month: '02:30', lastAmount:83}, {month: '03:30', lastAmount:87}, {month: '04:30', lastAmount:75}
         , {month: '05:30', lastAmount:69}, {month: '06:30', lastAmount:59}],
@@ -66,6 +111,27 @@ export default {
     }
   },
   mounted() {
+    let data = [
+      ["114.00647", "33.55627", 9034],
+      ["114.00694", "33.58723", 5803],
+      ["113.59848", "33.43243", 5508],
+      ["114.09399", "33.58601", 1200],
+      ["113.93661", "33.81123", 4000]
+    ]
+    let areaData = [];
+    data.map(item => { //扩大热力图效果
+      areaData.push(...new Array(3).fill(item))
+    })
+    let mapMax = Math.max(...data.map(item => item[2]))
+    let mapMin = Math.min(...data.map(item => item[2]))
+    let chart = echarts.init(document.getElementById("map"));
+    echarts.registerMap("luohe", geoJson);
+
+    // echarts.registerMap('china', china)
+    this.option.series[0].data = areaData;
+    this.option.visualMap.min = mapMin;
+    this.option.visualMap.max = mapMax;
+    chart.setOption(this.option);
   },
   watch: {
 
@@ -111,3 +177,9 @@ export default {
 
 
 </style>
+<style lang="less" scoped>
+  .bottom {
+    height: 100%;
+    width: 100%;
+  }
+</style>

src/pages/index/components/saturation_warning.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="body-wrapper">
+    <div style="color: white;font-size: 23px;margin-bottom: 20px">全市停车饱和度</div>
+    <el-form class="form-wrapper" :inline="true" :model="formInline">
+      <el-form-item label="区县:">
+        <el-select v-model="formInline.region0" placeholder="区县" class="cur-select">
+          <el-option label="源汇区" value="源汇区"></el-option>
+          <el-option label="郾城区" value="郾城区"></el-option>
+          <el-option label="召陵区" value="召陵区"></el-option>
+          <el-option label="舞阳县" value="舞阳县"></el-option>
+          <el-option label="临颍县" value="临颍县"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="街道:">
+        <el-select v-model="formInline.region1" placeholder="街道" class="cur-select">
+          <el-option label="老街街道" value="老街街道"></el-option>
+          <el-option label="马路街街道" value="马路街街道"></el-option>
+          <el-option label="顺河街街道" value="顺河街街道"></el-option>
+          <el-option label="干河陈街道" value="干河陈街道"></el-option>
+          <el-option label="大刘镇" value="大刘镇"></el-option>
+          <el-option label="阴阳赵镇" value="阴阳赵镇"></el-option>
+          <el-option label="空冢郭镇" value="空冢郭镇"></el-option>
+          <el-option label="问十乡" value="问十乡"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="路内停车场:">
+        <el-select v-model="formInline.region2" placeholder="路内停车场" class="cur-select">
+          <el-option label="南街村景区-停车场" value="南街村景区-停车场"></el-option>
+          <el-option label="漯河市中医院-地上停车场" value="漯河市中医院-地上停车场"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="路外停车场:">
+        <el-select v-model="formInline.region3" placeholder="路外停车场" class="cur-select">
+          <el-option label="市图书馆停车场" value="市图书馆停车场"></el-option>
+          <el-option label="中山公园停车场" value="中山公园停车场"></el-option>
+          <el-option label="市中心医院停车场" value="市中心医院停车场"></el-option>
+          <el-option label="妇幼保健院停车场" value="妇幼保健院停车场"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div class="body-wrapper" style="height: 300px;">
+      <linechart
+        :autoStop="false"
+        :top="30"
+        :bottom="30"
+        :left="40"
+        :legendTop="0"
+        yAxisName="(%)"
+        :dataset="linedata"
+        :tooltipFormat="lineTooltipFormat"
+        :encode="[
+              { x: 'month', y: 'lastYearAmount', seriesName: '预警值',col:'red' },
+              { x: 'month', y: 'thisYearAmount', seriesName: '饱和度',bool:'true' },
+            ]"
+        id="sxcyfzqk"
+      />
+      <div class="body-wrapper" style=" height: 450px">
+        <div style="color: white;font-size: 23px;margin-bottom: 20px">网格化停车饱和预警</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>
+        <div class="table-pagination">
+          <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
+                         :current-page.sync="pageNum" :page-size.sync="pageSize">
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import linechart from "@/components/lineChart";
+import vtable from "@/components/vtableNew";
+
+export default {
+  components: {
+    linechart,
+    vtable,
+  },
+  data() {
+    return {
+      formInline: {
+        region0: '',
+        region1: '',
+        region2: '',
+        region3: '',
+      },
+      linedata: [{month: '8:00',lastYearAmount: 80, thisYearAmount: 90}, {month: '10:00', lastYearAmount:80, thisYearAmount:70}
+        , {month: '12:00', lastYearAmount:80, thisYearAmount:60}, {month: '14:00', lastYearAmount:80, thisYearAmount:75}
+        , {month: '16:00', lastYearAmount:80, thisYearAmount:60}, {month: '18:00', lastYearAmount:80, thisYearAmount:90}
+        , {month: '20:00', lastYearAmount:80, thisYearAmount:70}, {month: '22:00', lastYearAmount:80, thisYearAmount:60}
+        , {month: '0:00', lastYearAmount:80, thisYearAmount:75}, {month: '2:00', lastYearAmount:80, thisYearAmount:60}
+        , {month: '4:00', lastYearAmount:80, thisYearAmount:73}, {month: '6:00', lastYearAmount:80, thisYearAmount:60}],
+      columns: [
+        {
+          label: '街道名称',
+          key: 'jd'
+        },
+        {
+          label: '剩余停车位',
+          key: 'sy'
+        }
+      ],
+      tableData: [{"jd": '老街街道',"sy": 30}
+        ,{"jd":'马路街街道',"sy": 70}
+        ,{"jd":'顺河街街道',"sy": 80}
+        ,{"jd":'干河陈街道',"sy": 30}
+        ,{"jd":'大刘镇',"sy": 62}
+        ,{"jd":'阴阳赵镇',"sy": 44}
+        ,{"jd":'空冢郭镇',"sy": 30}
+        ,{"jd":'问十乡',"sy": 97}],
+      total: 3,
+      pageSize: 10,
+      pageNum: 1,
+      radio: '2',
+      dialogVisible: false,
+      selRow: {},
+      searchWords: undefined
+    }
+  },
+  mounted() {
+    this.getTableData()
+  },
+  watch: {
+  },
+  methods: {
+    handlePageChange() {
+      this.getTableData()
+    },
+    handleCancelApply(row) {
+      console.log('enter handle cancel apply')
+    },
+    handleConfirm() {
+      const {id} = this.selRow
+      console.log('radio', this.radio)
+      api.applyResource({id, applyType: this.radio}).then(res => {
+        if(res.success) {
+          this.dialogVisible = false
+          this.$message({
+            message: '审核成功!',
+            type: 'success'
+          })
+          this.getTableData()
+        }
+      })
+    },
+    getTableData() {
+      const {pageNum, pageSize, searchWords} = this
+      api.applyList({pageNum, pageSize, resourceName: searchWords}).then(res => {
+        this.tableData = []
+        res.data.records.map((item, index) => {
+          const newItem = {...item}
+          newItem.applyTypeText = this.getApplyTypeText(item.applyType)
+          this.tableData.push(newItem)
+        })
+        this.total = res.data.total
+      })
+    },
+    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: red">${params[0].seriesName}: ${
+        params[0].data.lastYearAmount || "--"
+      }(%)</div>
+      </div>`;
+    },
+  }
+}
+</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 {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #0c0c0c;
+  .table-pagination{
+    text-align: right;
+  }
+}
+</style>

src/pages/index/components/service_operations.vue

@@ -0,0 +1,217 @@
+<template>
+  <div style="color: #d5d3d3" class="middle-map">
+    <el-select v-model="value" filterable remote reserve-keyword placeholder="请选择区域层级">
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+      </el-option>
+    </el-select>
+    <div class="bottom" id="map"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import * as geoJson from '../../../util/411100.json'
+
+export default {
+  data() {
+    return {
+      options: [{
+        value: '行政区',
+        label: '行政区'
+      }, {
+        value: '重点区域',
+        label: '重点区域'
+      }, {
+        value: '具体道路',
+        label: '具体道路'
+      }],
+      value: '',
+      dqIndex: -1,
+      timer: null,
+      option: {
+        visualMap: {
+          show: true,
+          type: "continuous",
+          left: "0%",
+          bottom: "0%",
+          calculable: true,
+          textStyle: {
+            color: "white",
+          },
+          text: ["(%)"],
+          min: 0,
+          max: 100,
+          inRange: {
+            color: ["#4FC9FB","#36ADFC","#1788D1","#0E6BAE","#1871A2","#0D4D7D"],
+          },
+        },
+        geo: {
+          map: "luohe",
+          // aspectScale: 1,
+          roam: false,
+          itemStyle: {
+            normal: {
+              borderColor: "#2ab8ff",
+              borderWidth: 2.5,
+              areaColor: "#12235c",
+            },
+            emphasis: {
+              areaColor: "#2AB8FF",
+              shadowColor: "rgba(42,184,255, 0.7)",
+              shadowOffsetY: 5,
+              shadowOffsetX: 5,
+              shadowBlur: 5,
+            },
+          },
+        },
+        tooltip: {
+          confine: true,
+          formatter: this.mapTooltip,
+          position: "inside",
+          backgroundColor: "transparent",
+        },
+        series: [
+          {
+            type: "map",
+            // roam: true,
+            label: {
+              normal: {
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+            },
+            itemStyle: {
+              normal: {
+                borderColor: "#76bef5",
+                borderWidth: 1.5,
+                areaColor: "#4282de",
+              },
+              emphasis: {
+                areaColor: "#002aff",
+                borderWidth: 0,
+                color: "green",
+              },
+            },
+            roam: false,
+            map: "luohe", //使用
+            data: [],
+          },
+        ],
+      },
+      curData: {},
+      dataSource: null,
+      totalAll: '0',
+    };
+  },
+  methods: {
+    setIntervalMap(chart) {
+      this.timer = setInterval(() => {
+        chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: this.dqIndex + 1,
+        });
+        this.dqIndex++;
+        if (this.dqIndex > 4) {
+          this.dqIndex = -1;
+        }
+      }, 3000);
+    },
+    mapTooltip(data) {
+      return `<div class="map-tooltip">
+        <div class="map-tooltip-name">${data.name}:<span class="map-tooltip-value">${data.value}%</span></div>
+      </div>`;
+    },
+  },
+  mounted() {
+    let arr = []
+    let dataSoure = {
+      '411102': {quyuName: '源汇区', zb: 40},
+      '411103': {quyuName: '郾城区', zb: 60},
+      '411104': {quyuName: '召陵区', zb: 40},
+      '411121': {quyuName: '舞阳县', zb: 50},
+      '411122': {quyuName: '临颍县', zb: 30}}
+    for (const key in dataSoure) {
+      if (key !== '411100') {
+        arr.push({
+          name: dataSoure[key].quyuName,
+          value: Number(dataSoure[key].zb),
+        });
+      }
+    }
+    let mapMax = Math.max(...arr.map(item => item.value))
+    let mapMin = Math.min(...arr.map(item => item.value))
+    console.log(mapMin, '111')
+    console.log(mapMax, '222')
+    let chart = echarts.init(document.getElementById("map"));
+    echarts.registerMap("luohe", geoJson);
+    this.option.series[0].data = arr;
+    this.option.visualMap.min = mapMin;
+    this.option.visualMap.max = mapMax;
+    chart.setOption(this.option);
+    this.dqIndex = -1;
+    this.setIntervalMap(chart);
+    //鼠标移入静止播放
+    chart.on("mouseover", (e) => {
+      clearInterval(this.timer);
+      chart.dispatchAction({
+        type: "showTip",
+        seriesIndex: 0,
+        dataIndex: e.dataIndex,
+      });
+    });
+    chart.on("mouseout", (e) => {
+      clearInterval(this.timer);
+      //鼠标移出后先把上次的高亮取消
+      chart.dispatchAction({
+        type: "downplay",
+        seriesIndex: 0,
+        dataIndex: e.dataIndex,
+      });
+      this.setIntervalMap(chart);
+    });
+  },
+};
+</script>
+
+<style>
+.el-input__inner{
+  color:#eee;
+  border-color: #212121;
+  background-color: rgba(1, 28, 82, 0.8);
+}
+</style>
+<style lang="less" scoped>
+.middle-map {
+  width: 100%;
+  height: 100%;
+  .bottom {
+    height: 90%;
+    width: 100%;
+  }
+  /deep/.map-tooltip {
+    font-size: 18px;
+    padding: 10px 20px;
+    background: url("../../../../static/img/u231.png");
+    background-size: 100% 100%;
+    .map-tooltip-name {
+      color: #00e4ff;
+    }
+    .map-tooltip-value {
+      color: white;
+      margin-left: 20px;
+    }
+  }
+}
+</style>

src/pages/index/components/service_publish.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="body-wrapper">
+    <div>
+      <h2 style="color: white;margin-bottom: 20px;display: inline-block;width: 90%">服务发布列表</h2>
+      <el-button>配置服务</el-button>
+    </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>
+    <div class="table-pagination">
+      <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
+                     :current-page.sync="pageNum" :page-size.sync="pageSize">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import api from "@/api/audit.js";
+
+export default {
+  components: {},
+  data() {
+    return {
+      columns: [
+        {
+          label: '接口名称',
+          key: 'interfaceName'
+        },
+        {
+          label: '接口地址',
+          key: 'interfaceAddress'
+        },
+        {
+          label: '提交状态',
+          key: 'submitState'
+        },
+        {
+          label: '发布状态',
+          key: 'publicState'
+        }
+      ],
+      tableData: [{"interfaceName":'消息通知',"interfaceAddress":'http://39.106.16.100/notification',"submitState":'已提交',"publicState":' 未发布'}
+        ,{"interfaceName":'预警提醒',"interfaceAddress":'http://39.106.16.100/warning',"submitState":'已提交',"publicState":' 未发布'},
+        ,{"interfaceName":'剩余车位推送',"interfaceAddress":'http://39.106.16.100/seatpush',"submitState":'已提交',"publicState":' 已发布'},],
+      total: 3,
+      pageSize: 10,
+      pageNum: 1,
+      radio: '2',
+      dialogVisible: false,
+      selRow: {},
+      searchWords: undefined
+    }
+  },
+  mounted() {
+    this.getTableData()
+  },
+  watch: {
+  },
+  methods: {
+    handlePageChange() {
+      this.getTableData()
+    },
+    handleAudit(row) {
+      this.selRow = row
+      this.dialogVisible = true
+    },
+    handleCancelApply(row) {
+      console.log('enter handle cancel apply')
+    },
+    handleConfirm() {
+      const {id} = this.selRow
+      console.log('radio', this.radio)
+      api.applyResource({id, applyType: this.radio}).then(res => {
+        if(res.success) {
+          this.dialogVisible = false
+          this.$message({
+            message: '审核成功!',
+            type: 'success'
+          })
+          this.getTableData()
+        }
+      })
+    },
+    getTableData() {
+      const {pageNum, pageSize, searchWords} = this
+      api.applyList({pageNum, pageSize, resourceName: searchWords}).then(res => {
+        this.tableData = []
+        res.data.records.map((item, index) => {
+          const newItem = {...item}
+          newItem.applyTypeText = this.getApplyTypeText(item.applyType)
+          this.tableData.push(newItem)
+        })
+        this.total = res.data.total
+      })
+    },
+    getApplyTypeText(val) {
+      if (!val){
+        return '未申请'
+      }
+      const textMap = {
+        1: '待审批',
+        2: '审批通过',
+        3: '审批驳回'
+      }
+      return textMap[val]
+    },
+    handleSearch() {
+      this.pageNum = 1
+      this.getTableData()
+    }
+  }
+}
+</script>
+<style  lang="scss" scoped>
+.body-wrapper {
+  padding: 20px;
+  background: #0c0c0c;
+  /deep/ .el-button {
+    background-color: #0158d9;
+    color: honeydew;
+    border: none;
+    width: 100px;
+    height: 40px;
+  }
+  .table-pagination{
+    text-align: right;
+  }
+}
+.audit-dialog{
+  .mg-bt{
+    margin-bottom: 24px;
+  }
+  .label{
+    text-align: right;
+  }
+}
+</style>

src/pages/index/layouts/indexLayout.vue

@@ -38,7 +38,7 @@ export default {
       menu: [
         {name: 'demo1', url: '/demo1'},
         {name: 'demo2', url: '/demo2'},
-        {name: 'bmap', url: '/bmap'},
+        {name: '车辆迁徒分析', url: '/bmap'},
         {name: 'hot_map', url: '/hot_map'},
         {name: 'heat_map', url: '/heat_map'},
         {name: '静态资源', url: '/static_resource'},
@@ -67,6 +67,16 @@ export default {
         {name: '区域停车主题', url: '/parking_area'},
         {name: '设备运营主题', url: '/service_operations'},
         {name: '操作日志', url: '/operation_log'},
+        {name: '停车饱和预警', url: '/saturation_warning'},
+        {name: '停车缺口分析', url: '/gap_analysis'},
+        {name: '停车难易指数', url: '/park_easy'},
+        {name: '全局停车诱导', url: '/park_guidance'},
+        {name: '区域停车发展分析', url: '/park_development_analysis'},
+        {name: '路内泊位设置推荐', url: '/berth_recommend'},
+        {name: '停车盲点挖招', url: '/blind_spot_digging'},
+        {name: '服务发布功能', url: '/service_publish'},
+        {name: '公告功能', url: '/announcement_function'},
+        {name: '消息中心功能', url: '/message'},
       ]
     }
   },

src/router/index.js

@@ -174,6 +174,56 @@ export default new Router({
           path: "/operation_log",
           component: () => import("../pages/index/components/operation_log.vue")
         },
+        {
+          name: "saturation_warning",
+          path: "/saturation_warning",
+          component: () => import("../pages/index/components/saturation_warning.vue")
+        },
+        {
+          name: "gap_analysis",
+          path: "/gap_analysis",
+          component: () => import("../pages/index/components/gap_analysis.vue")
+        },
+        {
+          name: "park_easy",
+          path: "/park_easy",
+          component: () => import("../pages/index/components/park_easy.vue")
+        },
+        {
+          name: "park_guidance",
+          path: "/park_guidance",
+          component: () => import("../pages/index/components/park_guidance.vue")
+        },
+        {
+          name: "park_development_analysis",
+          path: "/park_development_analysis",
+          component: () => import("../pages/index/components/park_development_analysis.vue")
+        },
+        {
+          name: "berth_recommend",
+          path: "/berth_recommend",
+          component: () => import("../pages/index/components/berth_recommend.vue")
+        },
+        {
+          name: "blind_spot_digging",
+          path: "/blind_spot_digging",
+          component: () => import("../pages/index/components/blind_spot_digging.vue")
+        },
+        {
+          name: "service_publish",
+          path: "/service_publish",
+          component: () => import("../pages/index/components/service_publish.vue")
+        },
+        {
+          name: "announcement_function",
+          path: "/announcement_function",
+          component: () => import("../pages/index/components/announcement_function.vue")
+        },
+        {
+          name: "message",
+          path: "/message",
+          component: () => import("../pages/index/components/message.vue")
+        },
       ]
     }
   ]