删除自己加的多余部分

#	src/pages/index/layouts/indexLayout.vue
#	src/router/index.js

src/assets/css/element_ui.css

@@ -7,6 +7,7 @@
   margin-bottom: 0px;
 }
 
+
 .el-select-dropdown__item.hover,
 .el-select-dropdown__item:hover {
   background-color: #0E7DFD;
@@ -66,12 +67,12 @@
   cursor: pointer;
   padding-right: 35px;
   width: 100%;
-  height: 25px;
+  height: 30px;
   font-size: 13px;
   padding: 0px 6px;
-  background-color: #041841;
-  color: #92CCFA;
-  border: 1px solid #19446E;
+  /*background-color: #041841;*/
+  /*color: #92CCFA;*/
+  /*border: 1px solid #19446E;*/
 }
 
 .el-select .el-input__inner:focus {
@@ -91,17 +92,22 @@
   font-weight: 700;
 }
 
+.el-input__suffix .el-input__suffix-inner {
+  display: flex;
+  align-items: center;
+}
+
 .el-select:hover .el-input__inner {
   border-color: #19446E;
 }
 
-.el-select-dropdown__item {
-  color: #92CCFA;
-}
+/*.el-select-dropdown__item {*/
+/*  color: #92CCFA;*/
+/*}*/
 
-.el-icon-arrow-up:before {
-  color: #92CCFA;
-}
+/*.el-icon-arrow-up:before {*/
+/*  color: #92CCFA;*/
+/*}*/
 
 .el-popper[x-placement^=bottom] .popper__arrow {
   display: none;

src/components/barChart.vue

@@ -196,7 +196,7 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
   .chart {
     width: 100%;
     height: 100%;

src/components/emap.vue

@@ -197,7 +197,7 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .chart-box {
   position: relative;
 }

src/components/lineChart.vue

@@ -208,7 +208,7 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .chart {
   width: 100%;
   height: 100%;

src/components/pieChart.vue

@@ -152,7 +152,7 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .chart {
   width: 100%;
   height: 100%;

src/components/radarChart.vue

@@ -85,7 +85,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="less" scoped>
 .chart {
   width: 100%;
   height: 100%;

src/components/vtableNew.vue

@@ -150,7 +150,7 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
   @keyframes tbodyauto {
     from {transform: translateY(0px);}
     to {transform: translateY(-100%);}

src/pages/index/components/heat_map.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="middle-map">
+    <div class="top">
+      <div class="title">停车场停车率热力图</div>
+    </div>
+    <div class="bottom" id="map"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import china from 'echarts/map/json/china.json'
+import * as geoJson from '../../../util/411100.json'
+
+export default {
+  data() {
+    return {
+      option: {
+        backgroundColor: '#333',
+        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: []
+        }]
+      },
+    };
+  },
+  methods: {
+  },
+  mounted() {
+    let data = [
+      ["114.00647", "33.55627", 11334],
+      ["114.00694", "33.58723", 7883],
+      ["113.59848", "33.43243", 5598],
+      ["114.09399", "33.58601", 1000],
+      ["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);
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.middle-map {
+  width: 100%;
+  height: 100%;
+  .top {
+    height: 10%;
+    // padding: 50px 50px 0 50px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC";
+    .total-detail {
+      display: flex;
+      margin-top: 10px;
+      align-items: center;
+      justify-content: center;
+      .total-value {
+        font-size: 41px;
+      }
+      .total-unit {
+        margin-left: 20px;
+        font-size: 20px;
+      }
+    }
+    .title {
+      font-weight: 650;
+      font-style: normal;
+      color: #ffffff;
+      font-size: 18px;
+    }
+    .dq {
+      font-weight: 650;
+      color: #ffcc00;
+      font-size: 24px;
+      text-align: center;
+    }
+    .num-container {
+      height: 180px;
+      margin-top: 20px;
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      padding: 0 20px;
+      .num-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        // width: 28%;
+        .label-box {
+          display: flex;
+          align-items: center;
+          // justify-content: space-between;
+          .label {
+            font-weight: 650;
+            color: #ffcc00;
+            font-size: 28px;
+          }
+          .rate {
+            margin-left: 30px;
+            font-weight: 650;
+            color: #ffcc00;
+            font-size: 18px;
+          }
+        }
+        .num-box {
+          display: flex;
+          justify-content: space-between;
+          justify-content: left;
+          font-family: "Arial-BoldMT", "Arial Bold", "Arial";
+          font-weight: 700;
+          .money {
+            color: #fff;
+            font-size: 22px;
+            .num {
+              color: #ffcc00;
+            }
+          }
+          .rate {
+            color: #008000;
+            font-size: 32px;
+          }
+        }
+      }
+    }
+  }
+  .bottom {
+    height: 90%;
+    width: 100%;
+  }
+}
+</style>

src/pages/index/components/hot_map.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="middle-map">
+    <div class="top">
+      <div class="title">停车热度时空分布</div>
+    </div>
+    <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 {
+      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 lang="less" scoped>
+.middle-map {
+  width: 100%;
+  height: 100%;
+  .top {
+    height: 10%;
+    // padding: 50px 50px 0 50px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC";
+    .total-detail {
+      display: flex;
+      margin-top: 10px;
+      align-items: center;
+      justify-content: center;
+      .total-value {
+        font-size: 41px;
+      }
+      .total-unit {
+        margin-left: 20px;
+        font-size: 20px;
+      }
+    }
+    .title {
+      font-weight: 650;
+      font-style: normal;
+      color: #ffffff;
+      font-size: 18px;
+    }
+    .dq {
+      font-weight: 650;
+      color: #ffcc00;
+      font-size: 24px;
+      text-align: center;
+    }
+    .num-container {
+      height: 180px;
+      margin-top: 20px;
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      padding: 0 20px;
+      .num-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        // width: 28%;
+        .label-box {
+          display: flex;
+          align-items: center;
+          // justify-content: space-between;
+          .label {
+            font-weight: 650;
+            color: #ffcc00;
+            font-size: 28px;
+          }
+          .rate {
+            margin-left: 30px;
+            font-weight: 650;
+            color: #ffcc00;
+            font-size: 18px;
+          }
+        }
+        .num-box {
+          display: flex;
+          justify-content: space-between;
+          justify-content: left;
+          font-family: "Arial-BoldMT", "Arial Bold", "Arial";
+          font-weight: 700;
+          .money {
+            color: #fff;
+            font-size: 22px;
+            .num {
+              color: #ffcc00;
+            }
+          }
+          .rate {
+            color: #008000;
+            font-size: 32px;
+          }
+        }
+      }
+    }
+  }
+  .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/operation_log.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="body-wrapper">
+    <el-form class="form-wrapper" :inline="true" :model="formInline">
+      <el-form-item label="审批人">
+        <el-input v-model="formInline.interfaceName" placeholder="审批人"></el-input>
+      </el-form-item>
+      <el-form-item label="活动区域">
+        <el-select v-model="formInline.region" placeholder="活动区域" class="cur-select">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <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="100">
+        <template slot-scope="scope">
+          <el-button v-if="scope.row && scope.row.applyType === '1'" @click="handleDetail(scope.row)" type="text" size="small">查看详情</el-button>
+        </template>
+      </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>
+    <el-dialog
+      title="详情"
+      :visible.sync="dialogVisible"
+      width="60%"
+      custom-class="audit-dialog">
+      <el-input type="textarea" disabled v-model="selRow.createTime"></el-input>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import api from "@/api/audit.js";
+
+export default {
+  components: {},
+  data() {
+    return {
+      columns: [
+        {
+          label: '日期',
+          key: 'resourceName'
+        },
+        {
+          label: '操作',
+          key: 'resourceType'
+        },
+        {
+          label: '用户',
+          key: 'userName'
+        },
+        {
+          label: '详情',
+          key: 'applyTypeText'
+        },
+        {
+          label: 'IP地址',
+          key: 'applyTypeText'
+        }
+      ],
+      tableData: [],
+      total: 0,
+      pageSize: 10,
+      pageNum: 1,
+      radio: '2',
+      dialogVisible: false,
+      selRow: {},
+      formInline: {
+        interfaceName: '',
+        region: ''
+      }
+    }
+  },
+  mounted() {
+    this.getTableData()
+  },
+  watch: {
+  },
+  methods: {
+    handlePageChange() {
+      this.getTableData()
+    },
+    handleDetail(row) {
+      this.selRow = row
+      this.dialogVisible = true
+    },
+    getTableData() {
+      const {pageNum, pageSize, searchWords} = this
+      api.applyList({pageNum, pageSize, interfaceName: this.formInline.interfaceName}).then(res => {
+        this.tableData = res.data.records
+        this.total = res.data.total
+      })
+    },
+    onSubmit() {
+      console.log('submit!');
+    }
+  }
+}
+</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/layouts/indexLayout.vue

@@ -38,6 +38,9 @@ export default {
       menu: [
         {name: 'demo1', url: '/demo1'},
         {name: 'demo2', url: '/demo2'},
+        {name: 'bmap', url: '/bmap'},
+        {name: 'hot_map', url: '/hot_map'},
+        {name: 'heat_map', url: '/heat_map'},
         {name: '静态资源', url: '/static_resource'},
         {name: '记录查询', url: '/record_query'},
         {name: '停车运行监管', url: '/park_monitor'},
@@ -63,7 +66,7 @@ export default {
         {name: '运营停车场主题', url: '/parking_operate'},
         {name: '区域停车主题', url: '/parking_area'},
         {name: '设备运营主题', url: '/service_operations'},
-        {name: 'mapp', url: '/amap'},
+        {name: '操作日志', url: '/operation_log'},
       ]
     }
   },

src/router/index.js

@@ -25,6 +25,16 @@ export default new Router({
           path: "/demo2",
           component: () => import("../pages/index/components/demo2.vue")
         },
+        {
+          name: "hot_map",
+          path: "/hot_map",
+          component: () => import("../pages/index/components/hot_map.vue")
+        },
+        {
+          name: "heat_map",
+          path: "/heat_map",
+          component: () => import("../pages/index/components/heat_map.vue")
+        },
         {
           name: "static_resource",
           path: "/static_resource",
@@ -160,9 +170,9 @@ export default new Router({
           component: () => import("../pages/index/components/service_operations.vue")
         },
         {
-          name: "amap",
-          path: "/amap",
-          component: () => import("../pages/index/components/amap.vue")
+          name: "operation_log",
+          path: "/operation_log",
+          component: () => import("../pages/index/components/operation_log.vue")
         },
       ]
     }