地图fixed

src/assets/css/_mixins.scss

@@ -1,9 +0,0 @@
-@mixin border-shadow($direction) {
-  @if $direction == left {
-    box-shadow: -1px 0 8px #d3d4d6;
-  } @else if $direction == bottom {
-    box-shadow: 0 1px 8px #d3d4d6;
-  } @else if $direction == right {
-    box-shadow: 1px 0 8px #d3d4d6;
-  } 
-}

src/assets/css/_variable.scss

@@ -1,6 +0,0 @@
-$bgColor: #F3F3F3;
-$theadColor: #f5f7fa;
-$mapPageColor: #FAFAFA;
-
-$btn-main-color: #2a78cb;
-$btn-hover-color: #1558a0;

src/assets/css/common-map.scss

@@ -1,53 +0,0 @@
-.map-instance,
-#map {
-  width: 100%;
-  height: 100%;
-}
-
-.search-box {
-  float: right;
-  width: 400px;
-  margin-right: 20px;
-  .el-select .el-input {
-    width: 150px;
-  }
-  .el-input-group {
-    width: 200px;
-  }
-}
-
-.map-aside-body,
-.map-aside-content {
-  height: 100%;
-  .base-table {
-    height: 100%;
-    padding-bottom: 50px;
-    box-sizing: border-box;
-    .el-table {
-      height: 100%;
-    }
-  }
-}
-
-.park-detail {
-  #empChart {
-    width: 100%;
-    height: 160px;
-  }
-  .detail-content {
-    background: #d3dff5;
-    border: 1px solid #a7c4e0;
-    color: #000;
-    padding: 5px;
-    p {
-      font-size: 12px;
-      margin: 0;
-      line-height: 25px;
-      .emp-detail {
-        float: right;
-        padding-right: 20px;
-      }
-    }
-  }
-}
-

src/assets/css/common.scss

@@ -1,121 +0,0 @@
-@import './variable';
-@import './mixins';
-
-html,
-body {
-  background: $bgColor;
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
-  font-weight: 400;
-  -webkit-font-smoothing: antialiased;
-}
-
-ul, li {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.red-num {
-  color: red;
-}
-
-.emphasis {
-  font-weight: bold;
-}
-
-/* --------------地图页面数据概览样式 start-------------------- */
-.map-overall-container {
-  display: inline-block;
-  margin-left: 20px;
-  font-size: 14px;
-}
-
-@media screen and (max-width: 1250px) {
-  .map-overall-container {
-    position: absolute;
-    top: 50px;
-    background: rgba(0, 0, 0, 0.5);
-    color: #fff;
-    padding: 0 10px;
-    border-radius: 10px;
-    left: 64px;
-    margin-right: 60px;
-  }
-}
-/* --------------地图页面数据概览样式 end-------------------- */
-
-
-/* ------重置表单各项高度------start----- */
-.el-date-editor  {
-  .el-range-separator, 
-  .el-range__icon,
-  .el-range__close-icon {
-    line-height: 22px;
-  }
-}
-
-.el-form-item {
-  margin-bottom: 15px;
-}
-
-.el-form-item__content,
-.el-form-item__label {
-  line-height: 30px;
-}
-
-.el-input__inner {
-  height: 30px;
-}
-
-/* ------重置表单各项高度------end----- */
-
-.el-table {
-  td {
-    padding: 5px 0;
-  }
-  th {
-    padding: 8px 0;
-  }
-}
-
-.el-table tbody tr {
-  user-select: initial;
-}
-
-
-/**
- * transition slide 动画
- */
-
-.slide-enter-active,
-.slide-leave-active {
-  transition: all .3s linear;
-}
-
-.slide-enter,
-.slide-leave-to {
-  transform: translateX(400px);
-}
-
-.slideleft-enter-active,
-.slideleft-leave-active {
-  transition: all .5s linear;
-  left: 0;
-}
-
-.slideleft-enter,
-.slideleft-leave-to {
-  transform: translateX(-200px);
-  left: -200px;
-}
-
-.clearfix:before,.clearfix:after{
-  content: "";
-  display: table;
-}
-.clearfix:after{
-  clear: both;
-}

src/assets/css/cus-table.scss

@@ -1,32 +0,0 @@
-@import './variable';
-
-thead.has-gutter th {
-  background: $theadColor;
-}
-
-.base-table {
-  position: relative;
-  .cell {
-    cursor: default;
-  }
-  .aside-pagination {
-    position: absolute;
-    left: 0;
-    bottom: -22px;
-    .el-pagination__jump {
-      margin: 0 10px;
-      vertical-align: middle;
-    }
-    button {
-      vertical-align: middle;
-    }
-  }
-  .pages {
-    position: absolute;
-    right: 8px;
-    bottom: 9px;
-    font-size: 14px;
-    color: #5a5e66;
-    line-height: 28px;
-  }
-}

src/assets/css/cus-table.xt.scss

@@ -1,149 +0,0 @@
-.el-table {
-  border: none;
-
-  thead {
-    color: #000;
-
-    &.has-gutter th {
-      background: #EFEFEF;
-    }
-  }
-}
-
-.el-table--border::after, .el-table--group::after {
-  width: 0;
-}
-
-.el-table::before {
-  height: 0;
-}
-
-.el-table__body-wrapper {
-  border: 1px solid #c4c4c4;
-  border-right: none;
-  border-bottom: none;
-
-  tr:nth-last-of-type(1) td {
-    border-bottom: 1px solid #c4c4c4;
-  }
-
-  tr td:nth-last-of-type(1) {
-    border-right: 1px solid #c4c4c4;
-  }
-
-  // &:after {
-  //   content: '';
-  //   position: absolute;
-  //   background-color: transparent;
-  //   z-index: 1;
-  //   top: 0;
-  //   right: 1px;
-  //   width: 1px;
-  //   height: 100%;
-  // }
-}
-
-.el-table__empty-block {
-  border-bottom: 1px solid #c4c4c4;
-}
-
-.el-table--border td, .el-table--border th {
-  border-right: 1px solid #e4e4e4;
-}
-
-.el-table td, .el-table th.is-leaf {
-  border-bottom: 1px solid #e4e4e4;
-}
-
-.el-table--striped .el-table__body tr.el-table__row--striped td {
-  background: #F9F9F9;
-}
-
-.simple {
-  .el-table--border th {
-    border-right: none;
-  }
-}
-
-.simple .el-table th.is-leaf {
-  border-bottom: none;
-}
-
-.el-pagination .el-select .el-input .el-input__inner {
-  color: #578ed2;
-  font-weight: bold;
-  font-size: 14px;
-  height: 34px;
-}
-
-.el-pagination__total, .el-pagination__sizes {
-  color: #000;
-  font-size: 14px;
-}
-
-.el-pagination .el-select .el-input {
-  width: 70px;
-
-  .el-select__caret {
-    color: #000;
-    font-size: 20px;
-  }
-}
-
-.el-pagination.is-background.el-pagination--small .btn-next, .el-pagination.is-background.el-pagination--small .btn-prev {
-  float: right;
-  margin: 4px 3px;
-}
-.el-pagination--small button, .el-pagination--small span:not([class*=suffix]){
-  line-height: 34px;
-  height: 34px;
-}
-.el-input__icon{
-  line-height: 1;
-}
-.el-pager {
-  float: right;
-  margin-top: 4px;
-}
-
-.el-pagination.is-background .btn-next,
-.el-pagination.is-background .btn-prev,
-.el-pagination.is-background .el-pager li {
-  background-color: #fff;
-  border: 1px solid #dbdbdb;
-}
-
-.el-pagination.is-background .btn-next.disabled, .el-pagination.is-background .btn-prev.disabled {
-  color: #000;
-}
-
-.el-pagination.is-background .el-pager li.active {
-  border-color: #409eff;
-  background-color: #409eff;
-}
-
-.is-complicate {
-  .el-table--border th, .el-table__fixed-right-patch {
-    border-bottom-color: #e4e4e4;
-  }
-
-  .el-table--border .has-gutter td:nth-last-of-type(2), .el-table--border .has-gutter th:nth-last-of-type(2) {
-    border-right: 1px solid #e4e4e4;
-  }
-}
-
-
-@media screen and (min-width: 1289px) {
-  .el-table__body-wrapper {  
-    &:after {
-      content: '';
-      position: absolute;
-      background-color: #c4c4c4;
-      z-index: 1;
-      top: 0;
-      right: 1px;
-      width: 1px;
-      height: 100%;
-    }
-  }
-}

src/assets/css/element_ui.css

@@ -199,10 +199,6 @@
 .el-pagination button:disabled {
   background: transparent;
 }
-/*.el-pagination button:disabled {*/
-/*  background: transparent;*/
-/*  color: #fff;*/
-/*}*/
 
 .el-table td,
 .el-table th.is-leaf {

src/assets/css/global.css

@@ -58,10 +58,6 @@ img {
 html,
 body,
 #app {
-  /* width: 1920px;
-  height: 1080px;
-  margin: 0;
-  padding: 0; */
   height:100%;
   width:100%;
 }
@@ -72,7 +68,6 @@ body,
 
 
 #app {
-  /* background: url('../img/screen-bg.png')no-repeat left top/cover; */
 }
 
 ::-webkit-scrollbar {

src/assets/css/reset-button.scss

@@ -1,25 +0,0 @@
-@import "./variable";
-
-.el-button--primary {
-  background-color: $btn-main-color;
-  border-color: $btn-main-color;
-}
-
-.el-button--primary:focus, 
-.el-button--primary:hover {
-  background-color: $btn-hover-color;
-  border-color: $btn-hover-color;
-}
-
-.el-button--primary.is-plain {
-  color: $btn-main-color;
-  background: #fff;
-  border-color: $btn-main-color;
-}
-
-.el-button--primary.is-plain:focus, 
-.el-button--primary.is-plain:hover {
-  background: #fff;
-  border-color: $btn-hover-color;
-  color: $btn-hover-color;
-}

src/assets/css/snapshot.scss

@@ -1,34 +0,0 @@
-
-// 主色
-// $primary-color: #3d7eff;
-$primary-color: #ceb284;
-// 辅助色
-$auxiliary-color: #ffa800;
-$green-color: #00ba00;
-$red-color: #fb322e;
-$default-bg-color:#35434f;
-
-$font-default-color: #000;
-$font-auxiliary-color: #666;
-$font-gray-color: #999;
-$font-white-color: #fff;
-
-// base color
-$blue:#324157;
-$light-blue:#3A71A8;
-$red:#C03639;
-$pink: #E65D6E;
-$green: #30B08F;
-$tiffany: #4AB7BD;
-$yellow:#FEC171;
-$panGreen: #30B08F;
-
-// sidebar
-
-$menuBg:$default-bg-color;
-$menuHover:$default-bg-color;
-$menuText:$primary-color;
-$subMenuBg:#475764;
-$subMenuActiveBg:$primary-color;
-$subMenuHover:$primary-color;
-$subMenuText:#ffffff;

src/components/emap.vue

@@ -7,7 +7,7 @@
 
 <script>
 import * as echarts from 'echarts'
-import { getQingHaiJson } from "@/util/qinghaiJson";
+import { luoheJson } from "@/util/luoheJson";
 export default {
   props: {
     id: { type: String, required: true },
@@ -122,7 +122,7 @@ export default {
     },
   },
   mounted() {
-    const qingHaiJson = getQingHaiJson(this.hasTech);
+    const qingHaiJson = luoheJson;
     echarts.registerMap("qinghai", qingHaiJson);
     const areas = this.option.series[0].data;
     const colors1 = [

src/components/scrollProgress.vue

@@ -124,10 +124,6 @@ import * as echarts from 'echarts'
 
         .item-progress {
 
-          // /deep/ .el-progress-bar__outer {
-          //   background-color: rgba(25,25,112, 0.4);
-          // }
-
           /deep/ .el-progress-bar__inner {
             background-color: unset;
           }

src/components/valueBlock.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="num-block">
-    <img src="../../static/img/num-left.png" />
-    <div :class="item !== '-' ? 'single-num' : ''" :key="idx" v-for="(item, idx) of valueArr">
-      <div>{{item}}</div>
-    </div>
-    <img src="../../static/img/num-right.png" />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    valueArr: String
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .num-block {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    img {
-      height: 100%;
-    }
-    .single-num {
-      height: 88%;
-      width: 1.5em;
-      background: url('../../static/img/num.png') no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      top: 5px;
-      left: 5px;
-      div {
-        width: 100%;
-        text-align: center;
-        font-weight: bold;
-        position: relative;
-        right: 5px;
-        top: -5px;
-        font-family: 'numFont';
-        font-weight: bold;
-      }
-    }
-  }
-
-</style>

src/pages/index/components/demo1.vue

@@ -0,0 +1,556 @@
+<template>
+  <div class="body-wrapper">
+    <div style="display: flex; justify-content: space-between;">
+      <div style="width: 50%; height: 300px">
+      <piechart
+        class="model-pie-body"
+        id="chart1"
+        :radiusArr="['30%', '70%']"
+        :colorArr="modelPieColor"
+        :labelFormat="['{name|{b}}', '{sub|{@value}万元 {d}%}', '{hr|}']"
+        :dataset="modelData.list"
+        :encode="{ itemName: 'name', value: 'value' }"
+      />
+      </div>
+      <div style="width: 50%; height: 300px">
+        <vtable
+          :showIdx="true"
+          class="tax-table"
+          :columns="riskColumns"
+          :datas="riskData"
+          :isAutoScroll="true"
+        />
+      </div>
+    </div>
+    <div style="display: flex; justify-content: space-between;">
+      <div style="width: 50%; height: 300px">
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          yAxisName="(亿元)"
+          :dataset="linedata"
+          :tooltipFormat="lineTooltipFormat"
+          :encode="[
+              { x: 'month', y: 'lastYearAmount', seriesName: '去年' },
+              { x: 'month', y: 'thisYearAmount', seriesName: '当年' },
+            ]"
+          id="sxcyfzqk"
+        />
+      </div>
+      <div style="width: 50%; height: 300px">
+        <barchart
+          class="side-chart"
+          :autoStop="false"
+          :colorArr="['#ffd201', '#00eacb', '#01b4ff', '#5d78ff']"
+          legendIcon="react"
+          :bottom="30"
+          :xlabelFormat="xLabelFormat"
+          :top="60"
+          yAxisName="(户)"
+          :tooltip="tooltipFormat"
+          :dataset="bardata"
+          :encode="[
+            {x: 'month', y: 'hs', seriesName: '户数'},
+            {x: 'month', y: 'cs', seriesName: '次数'}]"
+          :labelSize="20"
+          id="fxdqhszzt"
+        />
+      </div>
+    </div>
+    <div style="width: 100%; height: 400px">
+<!--      <emap style="width: 100%; height: 100%;"/>-->
+      <emap
+        class="map"
+        :labelFormat="mapLabelFormat"
+        :mapData="mapData"
+        id="map"
+        :tooltip="mapTooltipFormat"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import piechart from "@/components/pieChart";
+import linechart from "@/components/lineChart";
+import barchart from "@/components/barChart";
+import vtable from "@/components/vtableNew";
+import emap from "@/components/emap";
+import api from "@/api/audit.js";
+
+
+export default {
+  components: {
+    piechart,
+    linechart,
+    barchart,
+    vtable,
+    emap
+  },
+  data() {
+    return {
+      modelPieColor: ["#4382f6","#9078f8"],
+      modelData: {
+        list: [{name: '占用位', value: 100}, {name: '空闲位', value: 100}]
+      },
+      linedata: [{month: '11', lastYearAmount: 20, thisYearAmount: 30}, {month: '12', lastYearAmount: 40, thisYearAmount: 50}],
+      bardata: [{month: '01', hs: 100, cs: 200},{month: '02', hs: 300, cs: 200},{month: '03', hs: 400, cs: 200},],
+      riskColumns: [
+        { name: "", rowIdx: "name", width: "40%" },
+        { name: "任务数（户）", rowIdx: "rws", origin: true },
+        { name: "已完成（户）", rowIdx: "ywc", origin: true },
+        { name: "风险命中率", rowIdx: "mzl" },
+        { name: "入库税款（万元）", rowIdx: "rksk" },
+      ],
+      riskData: [{
+        name: '1号',
+        rws: 222,
+        ywc: 333,
+        mzl: 444,
+        rksk: 555
+      },{
+        name: '2号',
+        rws: 222,
+        ywc: 333,
+        mzl: 444,
+        rksk: 555
+      },{
+        name: '3号',
+        rws: 222,
+        ywc: 333,
+        mzl: 444,
+        rksk: 555
+      },{
+        name: '4号',
+        rws: 222,
+        ywc: 333,
+        mzl: 444,
+        rksk: 555
+      },{
+        name: '5号',
+        rws: 222,
+        ywc: 333,
+        mzl: 444,
+        rksk: 555
+      },{
+        name: '6号',
+        rws: 222,
+        ywc: 333,
+        mzl: 444,
+        rksk: 555
+      },{
+        name: '7号',
+        rws: 222,
+        ywc: 333,
+        mzl: 444,
+        rksk: 555
+      },{
+        name: '8号',
+        rws: 222,
+        ywc: 333,
+        mzl: 444,
+        rksk: 555
+      }],
+      mapData: {}
+    }
+  },
+  mounted() {
+  },
+  watch: {
+
+  },
+  methods: {
+    mapLabelFormat() {
+      return {
+        show: true,
+        formatter: (param) => {
+          const data = this.mapData[param.data.code]
+          return [`{name|${param.name}}`, `{value|${data.shje}亿元}  {${data.tb>=0?'tbUp':'tbDown'}|${Math.abs(data.tb)}%}{${data.tb>=0?'up':'down'}|}`].join('\n')
+        },
+        padding: [5, 5],
+        // backgroundColor: {
+        //   image: '../../../../static/img/u231.png'
+        // },
+        rich: {
+          name: {color: '#ffffff', padding: [2,2,10,2]},
+          value: {color: '#FFD074'},
+          tbUp: {color: '#FF0060'},
+          tbDown: {color: '#66CC33'},
+          up: {backgroundColor: {image: '../../../../static/img/arrow-up.png'}, width: 30, height: 30},
+          down: {backgroundColor: {image: '../../../../static/img/arrow-down.png'}, width: 30, height: 30}
+        }
+      }
+    },
+
+    mapTooltipFormat({ data }) {
+      return ''
+      //   const zoneData = this.mapData[data.code];
+      //   return `<div class='map-tooltip back-mid-map-tooltip'>
+      //     <div class='zone-name'>${data.name}</div>
+      //     <div class="zone-value">
+      //       <div class="je-value">${zoneData.shje}万元</div>
+      //       <div class=${zoneData.tb >= 0 ? "red" : "green"}>${Math.abs(
+      //     zoneData.tb
+      //   )}%<img src=${
+      //     zoneData.tb >= 0
+      //       ? "../../../../static/img/arrow-up.png"
+      //       : "../../../../static/img/arrow-down.png"
+      //   } /></div>
+      //     </div>
+      //   </div>`;
+    },
+    lineTooltipFormat(params) {
+      const data = params[0].data;
+      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[0].data.thisYearAmount || "--"
+      }(件)</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');
+    },
+    tooltipFormat(params) {
+      const type = params[0].seriesType;
+      const data = params[0].data;
+      // ${params[0].name || "--"}月：
+      return `<div class="${type==='bar' ? 'bar-tooltip-dz' : type==='line' ? 'line-tooltip-dz' : ''}">${data.hs || "--"}张</div>`;
+    },
+    format(percentage, num) {
+      return num
+    },
+    getResourceData() {
+      api.resourceData().then(res => {
+        if (res.success) {
+          this.menus[0].new = res.data.themeAdd
+          this.menus[0].history = res.data.themeTotal
+          this.menus[1].new = res.data.specialSubjectAdd
+          this.menus[1].history = res.data.specialSubjectTotal
+          this.menus[2].new = res.data.indexAdd
+          this.menus[2].history = res.data.indexTotal
+          this.menus[3].new = res.data.serviceAdd
+          this.menus[3].history = res.data.serviceTotal
+        }
+      })
+    },
+    getCollectTotal() {
+      api.collectTotal().then(res => {
+        if (res.success) {
+          this.collectTotal = res.data
+        }
+      })
+    },
+    getThemeSpecialIndex() {
+      api.themeSpecialIndex({resourceType: 'theme'}).then(res => {
+        if (res.success) {
+          this.barData = res.data
+        }
+      })
+      api.themeSpecialIndex({resourceType: 'specialSubject'}).then(res => {
+        if (res.success) {
+          this.specialAssetsData = res.data
+        }
+      })
+      api.themeSpecialIndex({resourceType: 'index'}).then(res => {
+        if (res.success) {
+          this.indicatorStatData = res.data
+        }
+      })
+    },
+    getApiRankData() {
+      api.apiRank().then(res => {
+        if (res.success) {
+          this.rankData = res.data
+        }
+      })
+    },
+    jumpToFilePage() {
+      this.$router.push({
+        name: "file",path: "/file"
+      });
+    },
+    jumpToApplyPage() {
+      this.$router.push({
+        name: "apply", path: "/apply"
+      });
+    },
+    getVisitsData() {
+      api.visits({}).then(res => {
+        if(res.success) {
+          this.visits = res.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style  lang="scss" scoped>
+.body-wrapper {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #0c0c0c;
+
+  .airport-logo {
+    width: 43%;
+    margin-left: -42px;
+    margin-top: 86px;
+  }
+
+  .input-wrapper {
+    width: 36%;
+    height: 53px;
+
+    /deep/ .el-input__inner {
+      height: 53px;
+    }
+
+    /deep/ .el-input-group__append {
+      background-color: #fff;
+      color: #80c2f7;
+      font-size: 18px;
+      font-weight: bold;
+    }
+  }
+
+  .header-row {
+    padding-top: 10px;
+    .data-repository, .my-collect{
+      float: left;
+    }
+    .data-repository{
+      width: 80%;
+      background: #fff;
+      padding: 20px 20px;
+      border-right: 1px solid #f2f2f2;
+      box-sizing: border-box;
+      .data-repo-title{
+        margin-bottom: 5px;
+        .icon{
+          display: inline-block;
+          width: 11px;
+          height: 25px;
+          background: #8bb2ff;
+          vertical-align: middle;
+        }
+      }
+      .data-repo-wrap{
+        display: flex;
+        justify-content: space-between;
+        padding-left: 14px;
+      }
+    }
+    .my-collect{
+      padding-top: 50px;
+      padding-right: 10px;
+      width: 20%;
+      box-sizing: border-box;
+      .menu-btn{
+        float: right;
+      }
+    }
+    .menu-btn {
+      height: 138px;
+      width: 100%;
+      padding: 20px;
+      box-shadow: 2px 5px 10px #ddd;
+      background: #fff;
+      border-radius: 5px;
+      >p {
+        font-size: 24px;
+        font-weight: bold;
+      }
+      .circle {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        margin-right: 5px;
+      }
+      .circle1 {
+        border: 3px solid #084FC0;
+      }
+      .circle2 {
+        border: 3px solid #BE5205;
+      }
+      .circle3 {
+        border: 3px solid #58C627;
+      }
+      .circle4 {
+        border: 3px solid #BF44FF;
+      }
+      .sub-title {
+        display: flex;
+        align-items: center;
+      }
+      .middle-flex{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
+  .chart-wrap {
+    //margin-top: 10px;
+    padding: 20px;
+    height: 700px;
+    background: #fff;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: space-between;
+    .chart-card {
+      width: 49.5%;
+      height: 30px;
+      .title {
+        font-size: 18px;
+        margin-bottom: 10px;
+      }
+      .chart {
+        width: 100%;
+        height: 280px;
+        box-shadow: 2px 5px 10px #ddd;
+      }
+      .rank-chart{
+        text-align: center;
+        box-sizing: border-box;
+        padding: 10px 20px 0;
+      }
+      .rank-block{
+        height: 238px;
+        overflow-y: auto;
+        scrollbar-width: none; /* firefox */
+      }
+      .rank-block::-webkit-scrollbar {
+        display: none; /* Chrome Safari */
+      }
+      .rank-item{
+        margin-bottom: 10px;
+        .icon, .right-block, .icon-three{
+          float: left;
+        }
+        .icon{
+          width: 18px;
+          height: 18px;
+          background: url('../../../assets/image/u211.svg');
+          font-size: 12px;
+          color: #FFFFFF;
+          line-height: 18px;
+        }
+        .icon-three{
+          width: 18px;
+          height: 26px;
+        }
+        .icon0{
+          background: url('../../../assets/image/u218.svg');
+          background-size: 100% 100%;
+        }
+        .icon1{
+          background: url('../../../assets/image/u219.svg');
+          background-size: 100% 100%;
+        }
+        .icon2{
+          background: url('../../../assets/image/u220.svg');
+          background-size: 100% 100%;
+        }
+        .right-block{
+          width: calc(100% - 18px);
+          .name-unit{
+            padding: 0 10px;
+            margin-bottom: 5px;
+          }
+          .name{
+            float: left;
+          }
+          .unit{
+            float: right;
+          }
+        }
+        /deep/ .progress .el-progress-bar__inner {
+          background-image: linear-gradient(
+              to right,
+              #00c8ff,
+              #009bff
+          );
+        }
+        /deep/ .progress0 .el-progress-bar__inner {
+          background-image: linear-gradient(
+              to right,
+              #ec5a48,
+              #d566d7
+          );
+        }
+        /deep/ .progress1 .el-progress-bar__inner {
+          background-image: linear-gradient(
+              to right,
+              #f9b101,
+              #ff6a62
+          );
+        }
+        /deep/ .progress2 .el-progress-bar__inner {
+          background-image: linear-gradient(
+              to right,
+              #00f576,
+              #009df7
+          );
+        }
+      }
+    }
+  }
+  .btn-space{
+    margin-left: 20px;
+  }
+  .visits-num{
+    padding: 20px;
+  }
+}
+.chart-body {
+  width: 100%;
+  height: calc(100% - 40px);
+  position: relative;
+  top: 35px;
+}
+.model-pie-body {
+  width: 100%;
+  height: 70%;
+}
+.bar-tooltip-dz {
+  padding: 5px 10px;
+  background: url("../../../../static/img/u261.png");
+  background-size: 100% 100%;
+  color: #333;
+  position: absolute;
+  top: 0;
+}
+.tax-table {
+  tbody {
+    tr {
+      &:nth-child(1),
+      &:nth-child(2),
+      &:nth-child(3) {
+        td {
+          &:nth-child(2) {
+            color: #ffd074;
+          }
+        }
+      }
+    }
+  }
+}
+.map {
+  margin-top: 20px;
+  width: 100%;
+  flex: 1;
+  height: 100%;
+}
+
+</style>

src/pages/index/components/demo2.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="body-wrapper">
+    <div class="search-card">
+        <el-input class="input-wrapper" v-model="searchWords" placeholder="请输入关键字">
+            <el-button slot="append" class="searchbtn" @click="handleSearch">
+            </el-button>
+        </el-input>
+    </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="100">
+        <template slot-scope="scope">
+            <el-button v-if="scope.row && scope.row.applyType === '1'" @click="handleAudit(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-row class="mg-bt">
+            <el-col class="label" :span="4">审核：</el-col>
+            <el-col :span="18">
+                <el-radio v-model="radio" label="2">通过</el-radio>
+                <el-radio v-model="radio" label="3">驳回</el-radio>
+            </el-col>
+        </el-row>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleConfirm">确 定</el-button>
+        </span>
+    </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'
+          }
+        ],
+        tableData: [],
+        total: 0,
+        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;
+  .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/park_monitor.vue

@@ -61,7 +61,14 @@
       </div>
     </div>
     <div style="width: 100%; height: 400px">
-      <emap style="width: 100%; height: 100%;"/>
+<!--      <emap style="width: 100%; height: 100%;"/>-->
+      <emap
+        class="map"
+        :labelFormat="mapLabelFormat"
+        :mapData="mapData"
+        id="map"
+        :tooltip="mapTooltipFormat"
+      />
     </div>
   </div>
 </template>
@@ -145,7 +152,8 @@ export default {
         ywc: 333,
         mzl: 444,
         rksk: 555
-      }]
+      }],
+      mapData: {}
     }
   },
   mounted() {
@@ -154,6 +162,45 @@ export default {
 
   },
   methods: {
+    mapLabelFormat() {
+      return {
+        show: true,
+        formatter: (param) => {
+          const data = this.mapData[param.data.code]
+          return [`{name|${param.name}}`, `{value|${data.shje}亿元}  {${data.tb>=0?'tbUp':'tbDown'}|${Math.abs(data.tb)}%}{${data.tb>=0?'up':'down'}|}`].join('\n')
+        },
+        padding: [5, 5],
+        // backgroundColor: {
+        //   image: '../../../../static/img/u231.png'
+        // },
+        rich: {
+          name: {color: '#ffffff', padding: [2,2,10,2]},
+          value: {color: '#FFD074'},
+          tbUp: {color: '#FF0060'},
+          tbDown: {color: '#66CC33'},
+          up: {backgroundColor: {image: '../../../../static/img/arrow-up.png'}, width: 30, height: 30},
+          down: {backgroundColor: {image: '../../../../static/img/arrow-down.png'}, width: 30, height: 30}
+        }
+      }
+    },
+
+    mapTooltipFormat({ data }) {
+      return ''
+      //   const zoneData = this.mapData[data.code];
+      //   return `<div class='map-tooltip back-mid-map-tooltip'>
+      //     <div class='zone-name'>${data.name}</div>
+      //     <div class="zone-value">
+      //       <div class="je-value">${zoneData.shje}万元</div>
+      //       <div class=${zoneData.tb >= 0 ? "red" : "green"}>${Math.abs(
+      //     zoneData.tb
+      //   )}%<img src=${
+      //     zoneData.tb >= 0
+      //       ? "../../../../static/img/arrow-up.png"
+      //       : "../../../../static/img/arrow-down.png"
+      //   } /></div>
+      //     </div>
+      //   </div>`;
+    },
     lineTooltipFormat(params) {
       const data = params[0].data;
       return `<div class="line-tooltip">
@@ -499,5 +546,11 @@ export default {
     }
   }
 }
+.map {
+  margin-top: 20px;
+  width: 100%;
+  flex: 1;
+  height: 100%;
+}
 
 </style>

src/pages/index/components/static_resource.vue

@@ -137,10 +137,6 @@ export default {
 }
 </script>
 <style  lang="scss" scoped>
-// 设置鼠标经过时背景颜色
-///deep/.el-table tbody tr:hover>td{
-//  background-color:#FFFFF0!important;
-//}
 .body-wrapper {
   padding: 20px;
   background: #0c0c0c;

src/pages/index/index.js

@@ -4,12 +4,6 @@ import "element-ui/lib/theme-chalk/index.css"
 import "../../assets/css/global.css"
 import "../../assets/css/element_ui.css"
 import mixins from '../../mixins'
-// import "../../assets/css/common.scss"
-// import "../../assets/css/common-map.scss"
-// import "../../assets/css/cus-table.scss"
-// import "../../assets/css/cus-table.xt.scss"
-// import "../../assets/css/reset-button.scss"
-// import "../../assets/css/snapshot.scss"
 import index from './index.vue'
 import router from "../../router/index"
 import config from '@/config/index';

src/pages/index/layouts/indexLayout.vue

@@ -36,6 +36,8 @@ export default {
       isCollapse: false,//默认为不折叠菜单
       foldphoto: "el-icon-s-unfold",//菜单展开图标
       menu: [
+        {name: 'demo1', url: '/demo1'},
+        {name: 'demo2', url: '/demo2'},
         {name: '静态资源', url: '/static_resource'},
         {name: '记录查询', url: '/record_query'},
         {name: '停车运行监管', url: '/park_monitor'},
@@ -71,7 +73,7 @@ export default {
 <style scoped>
 .home-wrapper {
   position: absolute;
-// top: 60px;
+  top: 60px;
   width: 100%;
   height: 100%;
   background-size: cover;

src/router/index.js

@@ -15,6 +15,16 @@ export default new Router({
       path: "/index",
       component: () => import("../pages/index/layouts/indexLayout.vue"),
       children: [
+        {
+          name: "demo1",
+          path: "/demo1",
+          component: () => import("../pages/index/components/demo1.vue")
+        },
+        {
+          name: "demo2",
+          path: "/demo2",
+          component: () => import("../pages/index/components/demo2.vue")
+        },
         {
           name: "static_resource",
           path: "/static_resource",