Merge remote-tracking branch 'origin/develop' into develop

徐旺旺

2021-03-31 7a2bcf4e66e794a66c2c568dd3503c350a018366

Merge remote-tracking branch 'origin/develop' into develop

 .env

@@ -2,7 +2,7 @@
NODE_ENV=development
#vue项目 属性名必须以VUE_APP_开头，比如VUE_APP_XXX
VUE_APP_MOCK=true
VUE_APP_API_HOST=http://localhost:8080/
VUE_APP_API_HOST=http://xearth.cn:3000
VUE_APP_API_TOKEN_URL=https://auth.uat.siam.sinopec.com/
VUE_APP_API_BASE_URL=/api
VUE_APP_CLIENT_ID=no_apply

 .env.production

@@ -1,7 +1,7 @@
# .env
NODE_ENV=production
VUE_APP_MOCK=false
VUE_APP_API_HOST=http://localhost:8080/
VUE_APP_API_HOST=http://localhost:3000/
VUE_APP_API_BASE_URL=/api
VUE_APP_API_TOKEN_URL=https://oauth.siam.sinopec.com/
VUE_APP_CLIENT_ID=no_apply

 .env.test

@@ -1,7 +1,7 @@
# .env
NODE_ENV=test
VUE_APP_MOCK=false
VUE_APP_API_HOST=http://localhost:8080/
VUE_APP_API_HOST=http://localhost:3000/
VUE_APP_API_TOKEN_URL=https://auth.uat.siam.sinopec.com/
VUE_APP_API_BASE_URL=/api
VUE_APP_CLIENT_ID=no_apply

 public/assets/images/map/solidwaste/gf_green.png

 public/assets/images/map/solidwaste/voc.png

 public/static/SolidWaste.json

@@ -1,81 +1,125 @@
{
  "Result": {
    "IsSuccess": 1,
    "code": 1,
    "ErrorMsg": "",
    "DataInfo": [
      {
        "StoragePlaceId": 124.0,
        "StoragePlaceName": "聚醚部危险废物暂存点",
        "HazaWasteStorageDate": "0001-01-01T00:00:00",
        "HazaWasteCatgrName": null,
        "SurplusQuantityWarning": 0,
        "LongDayWarning": 0,
        "DesignFloorArea": 95.0,
        "HazaWasteName": null,
        "EstimateFloorArea": 0.0,
        "HazaWasteDeptName": null,
        "SurplusFloorArea": 95.0,
        "HazaWasteStorageDays": 0.0,
        "StorageQty": 0.0,
        "HazaWasteStorageQty": 0.0,
        "positionX": 32.22118377685547,
        "positionY": 118.78057479858398
        "StoragePlaceId": 0,
        "Name": "巴陵石化 取水单元干泥暂存库",
        "StorageQtyMax": 0,
        "Longitude": 113.38361,
        "Latitude": 29.9008,
        "SortNum": 0,
        "DesignFloorArea": 0,
        "VideoCoding": null,
        "VideoURL": null,
        "DaysAlarm": 0,
        "MarginAlarm": 0
      },
      {
        "StoragePlaceId": 123.0,
        "StoragePlaceName": "化工部危险废物暂存点",
        "HazaWasteStorageDate": "0001-01-01T00:00:00",
        "HazaWasteCatgrName": null,
        "SurplusQuantityWarning": 0,
        "LongDayWarning": 0,
        "DesignFloorArea": 260.0,
        "HazaWasteName": null,
        "EstimateFloorArea": 0.0,
        "HazaWasteDeptName": null,
        "SurplusFloorArea": 260.0,
        "HazaWasteStorageDays": 0.0,
        "StorageQty": 0.0,
        "HazaWasteStorageQty": 0.0,
        "positionX": 32.23122596740723,
        "positionY": 118.7743091583252
        "StoragePlaceId": 1,
        "Name": "巴陵石化 吉家湖灰塘",
        "StorageQtyMax": 0,
        "Longitude": 113.14089,
        "Latitude": 29.4181,
        "SortNum": 0,
        "DesignFloorArea": 0,
        "VideoCoding": null,
        "VideoURL": null,
        "DaysAlarm": 0,
        "MarginAlarm": 0
      },
      {
        "StoragePlaceId": 127.0,
        "StoragePlaceName": "炼油部危险废物暂存点",
        "HazaWasteStorageDate": "0001-01-01T00:00:00",
        "HazaWasteCatgrName": null,
        "SurplusQuantityWarning": 0,
        "LongDayWarning": 0,
        "DesignFloorArea": 351.0,
        "HazaWasteName": null,
        "EstimateFloorArea": 0.0,
        "HazaWasteDeptName": null,
        "SurplusFloorArea": 351.0,
        "HazaWasteStorageDays": 0.0,
        "StorageQty": 0.0,
        "HazaWasteStorageQty": 0.0,
        "positionX": 32.222299575805664,
        "positionY": 118.74950408935547
        "StoragePlaceId": 2,
        "Name": "长岭炼化 八字门垃圾填埋场",
        "StorageQtyMax": 0,
        "Longitude": 113.3916666667,
        "Latitude": 29.6394444444,
        "SortNum": 0,
        "DesignFloorArea": 0,
        "VideoCoding": null,
        "VideoURL": null,
        "DaysAlarm": 0,
        "MarginAlarm": 0
      },
      {
        "StoragePlaceId": 126.0,
        "StoragePlaceName": "烯烃部危险废物暂存点",
        "HazaWasteStorageDate": "0001-01-01T00:00:00",
        "HazaWasteCatgrName": null,
        "SurplusQuantityWarning": 0,
        "LongDayWarning": 1.0,
        "DesignFloorArea": 54.0,
        "HazaWasteName": null,
        "EstimateFloorArea": 0.0,
        "HazaWasteDeptName": null,
        "SurplusFloorArea": 54.0,
        "HazaWasteStorageDays": 0.0,
        "StorageQty": 1.0,
        "HazaWasteStorageQty": 0.0,
        "positionX": 32.23092555999756,
        "positionY": 118.75735759735107
        "StoragePlaceId": 3,
        "Name": "中韩石化 灰渣场",
        "StorageQtyMax": 0,
        "Longitude": 114.5192083333,
        "Latitude": 30.6201666667,
        "SortNum": 0,
        "DesignFloorArea": 0,
        "VideoCoding": null,
        "VideoURL": null,
        "DaysAlarm": 0,
        "MarginAlarm": 0
      },
      {
        "StoragePlaceId": 4,
        "Name": "安庆石化 山口废渣填埋场",
        "StorageQtyMax": 0,
        "Longitude": 116.960599,
        "Latitude": 30.541509,
        "SortNum": 0,
        "DesignFloorArea": 0,
        "VideoCoding": null,
        "VideoURL": null,
        "DaysAlarm": 0,
        "MarginAlarm": 0
      },
      {
        "StoragePlaceId": 5,
        "Name": "安庆石化 热电陈家冲灰场",
        "StorageQtyMax": 0,
        "Longitude": 116.986949,
        "Latitude": 30.534486,
        "SortNum": 0,
        "DesignFloorArea": 0,
        "VideoCoding": null,
        "VideoURL": null,
        "DaysAlarm": 0,
        "MarginAlarm": 0
      },
      {
        "StoragePlaceId": 6,
        "Name": "高桥石化 海滨码头附近滩涂",
        "StorageQtyMax": 0,
        "Longitude": 121.55,
        "Latitude": 31.63,
        "SortNum": 0,
        "DesignFloorArea": 0,
        "VideoCoding": null,
        "VideoURL": null,
        "DaysAlarm": 0,
        "MarginAlarm": 0
      },
      {
        "StoragePlaceId": 7,
        "Name": "川维化工 生化污泥料仓",
        "StorageQtyMax": 0,
        "Longitude": 107.02342004,
        "Latitude": 29.79235333,
        "SortNum": 0,
        "DesignFloorArea": 0,
        "VideoCoding": null,
        "VideoURL": null,
        "DaysAlarm": 0,
        "MarginAlarm": 0
      },
      {
        "StoragePlaceId": 8,
        "Name": "川维化工 排泥水泥饼料仓",
        "StorageQtyMax": 0,
        "Longitude": 107.02315181,
        "Latitude": 29.78832166,
        "SortNum": 0,
        "DesignFloorArea": 0,
        "VideoCoding": null,
        "VideoURL": null,
        "DaysAlarm": 0,
        "MarginAlarm": 0
      }
    ]
  }
}
}

 public/static/WasteWater.json

File was deleted

 src/api/SolidWaste/index.js

New file
@@ -0,0 +1,6 @@
import $http from '@utils/axios'
// import Qs from 'qs'

export const getSolidWaste = (data = {}) => {
  return $http.get('/wasteSolid/getSolidWaste', data)
}

 src/api/host.js

New file
@@ -0,0 +1,6 @@
/**
 * 服务HOST定义
 */
import { getSchemeHost } from '../utils/tools'

export const $HOST = getSchemeHost()

 src/api/index.js

@@ -1,7 +1,4 @@
import * as mapApi from './mapApi'
import * as mapUrl from './mapUrl'

export default {
  mapApi,
  mapUrl
}
export default Object.assign({}, mapApi, mapUrl)

 src/api/mapApi.js

@@ -3,13 +3,16 @@
// const $HOST = 'http://10.238.221.113'
// 测试环境IP：http://10.238.221.113
import axios from '@utils/axios'
import * as mapUrl from './mapUrl'

/**
 * 该方法配置
 */
class MapAPI {
  getToken (param) {
    axios.get(param.url, param.option)
export default {
  getUser (data) {
    return axios.get(mapUrl.GetUser, data)
  },
  getSolidWaste (data) {
    return axios.get(mapUrl.getSolidWaste, data)
  }
}

export default new MapAPI()

 src/api/mapUrl.js

@@ -1,10 +1,8 @@
/**
 * 该文件配置接口的URL地址
 */
class ApiURLs {
  constructor () {
    this.APIURL_HELLOWORLD = 'http://www.baidu.com'
  }
}
import { $HOST } from './host'

export default new ApiURLs()
export const GetUser = $HOST + '/user/getUser'

export const getSolidWaste = $HOST + '/wasteSolid/getSolidWaste'

 src/api/request.js

@@ -8,6 +8,13 @@
    }
  })
}
// export const QueryStoragePlaceListByCompanyAndName = (data = {}) => {
//   return $http.get('http://xearth.cn:3000/wasteSolid/getSolidWaste', Qs.stringify(data), {
//     headers: {
//       'Content-Type': 'application/json'
//     }
//   })
// }
export const FlueGas = (data = {}) => {
  return $http.post('/EPInterface/DataService/EPMapService.asmx/ObtainningConInfo', Qs.stringify(data), {
    headers: {
@@ -15,10 +22,11 @@
    }
  })
}

export function requestWasteWater (data = {}) {
  return $http.post('EPInterface/DataService/EPMapService.asmx/ObtainningConInfo', Qs.stringify(data), {
    headers: {
      'Content-Type': 'application/json'
    }
  })
}
}

 src/app.config.js

@@ -11,7 +11,7 @@
      developmentOff: true // 设为true后在开发环境不会收集错误信息
    }
  },
  homeRouterName: 'Home',
  homeRouterName: 'mapTemplate',
  loginRouteName: 'Login',
  routeMode: 'history',
  tagNavCache: false,

 src/assets/images/login-page/page1.jpg

 src/assets/images/map-pages/basenav/flugas/exhaust/fq_blue.png

 src/assets/images/map-pages/basenav/flugas/exhaust/fq_bright_green.png

 src/assets/images/map-pages/basenav/flugas/exhaust/fq_gray.png

 src/assets/images/map-pages/basenav/flugas/exhaust/fq_green.png

 src/assets/images/map-pages/basenav/flugas/exhaust/fq_green_xc.png

 src/assets/images/map-pages/basenav/flugas/exhaust/fq_orange.png

 src/assets/images/map-pages/basenav/flugas/exhaust/fq_red.png

 src/assets/images/map-pages/basenav/flugas/exhaust/fq_yellow.png

 src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue

@@ -7,10 +7,12 @@
    <div class="border_corner border_corner_left_bottom"></div>
    <div class="border_corner border_corner_right_bottom"></div>
    <div class="main">
      <div class="main-echarts">
        <div id="echarts" style="width:100%;height:100%" ref="main"></div>
        <div id="echarts" ref="main"></div>
        <div class="border_corner border_corner_left_top"></div>
        <div class="border_corner border_corner_right_top"></div>
        <div class="border_corner border_corner_left_bottom"></div>
        <div class="border_corner border_corner_right_bottom"></div>
      </div>
    </div>
  </div>
</template>

@@ -22,18 +24,27 @@
      const myChart = this.$echarts.init(this.$refs.main)
      const option = {
        title: {
          text: '折线图堆叠'
          // text: '折线图堆叠'
        },
        // color: '#fff',
        color: ['#5470c6', '#91CC75', '#EE6666', '#FF0087'],
        tooltip: {
          trigger: 'axis'
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              color: '#1a4245'
            }
          }
        },
        // legend: {
        //   data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        // },
        legend: {
          data: ['氮氧化物', '二氧化硫', '烟尘', '废气流量']
          // pageTextStyle: {
          //   color: '#fff'
          // }
        },
        grid: {
          left: '3%',
          right: '4%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
@@ -42,63 +53,98 @@
            saveAsImage: {}
          }
        },
        // 图标缩放设置
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: 100
        }, {
          start: 0,
          end: 100,
          show: false,
          // handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          }
        }],
        // x轴的设置
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: {
          data: ['12:00:01', '12:00:02', '12:00:03', '12:00:04', '12:00:05', '12:00:06', '12:00:07'],
          axisLabel: { // x轴全部显示
            rotate: 20,
            interval: 0,
            textStyle: {
              color: '#7edae8' // 坐标的字体颜色
              color: '#fff'
            }
          },
          axisLine: {
            show: false, // 隐藏坐标轴
          splitLine: { // 网格垂直线为虚线
            show: true,
            lineStyle: {
              color: '#00eeff' // 坐标轴的颜色
              type: 'dashed'
            }
          },
          axisTick: { // x 轴刻度显示
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1 // 这里是为了突出显示加上的
            }
          }
        },
        // Y 轴的设置
        yAxis: [{
          type: 'value',
          // name: yname, // 后期图标Y轴显示单位
          name: '浓度(mg/m³)',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#7edae8' // 坐标的字体颜色
              color: '#fff' // 坐标的字体颜色
            }
          },
          axisPointer: {
            snap: true // 自动吸附最近的点
          },
          splitLine: {
            show: false // y轴 网格线不显示
          },
          axisLine: {
            show: false, // 隐藏坐标轴
            lineStyle: {
              color: '#00eeff' // 坐标轴的颜色
              color: '#ffffff', // 坐标轴的颜色
              width: 1
            }
          }
        }],
        series: [
          {
            name: '邮件营销',
            name: '氮氧化物',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            name: '二氧化硫',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            name: '烟尘',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            name: '废气流量',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
@@ -115,50 +161,48 @@
</script>

<style scoped lang="less">
.win {
  width: 100%;
  height: 100%;
  position: relative;
  //display: inline-block;
  background-color: rgba(33, 41, 69,0.9);
}
.border_corner{
  z-index: 2500;
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(0,0,0,0);
  border: 1.5px solid #47d5ea;
}
.border_corner_left_top{
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}
.border_corner_right_top{
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}
.border_corner_left_bottom{
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}
.border_corner_right_bottom{
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}
.main {
  width: 100%;
  height: 100%;
  .main-echarts{
    border: 1px solid #396d83;
  }
}
    .win {
        /*width: 100%;*/
        /*height: 100%;*/
        position: relative;
        //display: inline-block;
        background-color: rgba(33, 41, 69,0.9);
    }
    #echarts{
        width: 600px;
        height: 260px;
    }
    .border_corner{
        z-index: 2500;
        position: absolute;
        width: 14px;
        height: 14px;
        background: rgba(0,0,0,0);
        border: 2px solid #47d5ea;
    }
    .border_corner_left_top{
        top: 0;
        left: 0;
        border-right: none;
        border-bottom: none;
    }
    .border_corner_right_top{
        top: 0;
        right: 0;
        border-left: none;
        border-bottom: none;
    }
    .border_corner_left_bottom{
        bottom: 0;
        left: 0;
        border-right: none;
        border-top: none;
        border-bottom-left-radius: 4px;
    }
    .border_corner_right_bottom{
        bottom: 0;
        right: 0;
        border-left: none;
        border-top: none;
    }
</style>

 src/components/BaseNav/PublicBounced/GasComponents/GasTab.vue

@@ -37,7 +37,6 @@

.win {
  position: relative;
  //display: inline-block;
  margin-bottom: 13px;
  background-color: rgba(33, 41, 69,0.9);
}
@@ -46,7 +45,6 @@
  height: 100%;
  .main-matter{
    font-size: 13px;
    padding: 9px 7px;
    font-weight: normal;
    border: 1px solid #396d83;
    .row-item-one{
@@ -56,7 +54,7 @@
      width: 100%;
      color: #00d0f9;
      display: flex;
      font-size: 12px!important;
      font-size: 12px !important;
      .el-col{
        flex: 1;
        width: 100%;
@@ -73,7 +71,7 @@
  }
}
.border_corner{
  z-index: 2500;
  z-index: 999;
  position: absolute;
  width: 10px;
  height: 10px;
@@ -104,20 +102,4 @@
  border-left: none;
  border-top: none;
}
//.el-row {
//  width: 100%;
//  color: #00d0f9;
//  .el-col{
//    width: 180px;
//    height: 28px;
//    background-color: #243a55;;
//    text-align: center;
//    line-height: 28px;
//    margin-left: 6px;
//    border-radius: 4px;
//    &:nth-child(1){
//      margin-left:0;
//    }
//  }
//}
</style>

 src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue

 src/components/BaseNav/PublicBounced/GasComponents/GasVideo.vue

@@ -7,7 +7,7 @@
    <div class="border_corner border_corner_right_bottom"></div>
    <div class="main">
      <div class="main-video">
        <video width="100%" height="100%" controls>
        <video controls>
          <source src="movie.mp4" type="video/mp4">
          <source src="movie.ogg" type="video/ogg">
        </video>
@@ -24,23 +24,25 @@

<style scoped lang="less">
.win {
  /*width: 100%;*/
  /*height: 100%;*/
  position: relative;
  //display: inline-block;
  background-color: rgba(33, 41, 69,0.9);
/*//border: 1px solid #396d83;*/
}
.main {
  width: 100%;
  height: 100%;
  .main-video {
    padding: 7px;
    border: 1px solid #396d83;
    //border: 1px solid #396d83;
    width: 100%;
    height: 100%;
    video {
      width: 100%;
      height: 100%;
      outline: none;
    }
  }
}
.border_corner{
  z-index: 2500;
  z-index: 999;
  position: absolute;
  width: 14px;
  height: 14px;

 src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue

@@ -1,53 +1,48 @@
<template>
  <div class="public-table">
    <table border="1">
      <tr>
        <th>111</th>
        <th>111</th>
        <th>111</th>
        <th>111</th>
        <th>111</th>
        <th>111</th>
      </tr>
      <tr>
        <td>4444444444</td>
        <td>4444444444</td>
        <td>4444444444</td>
        <td>4444444444</td>
        <td>4444444444</td>
        <td>4444444444</td>
      </tr>
    </table>
    <el-col class="el-col">
      <el-table
          border
          tooltip-effect="dark"
          :data="data"
      >
        <el-table-column prop="name" label="序号"></el-table-column>
        <el-table-column prop="name" label="类别"></el-table-column>
        <el-table-column prop="date" label="固废名称"></el-table-column>
        <el-table-column prop="address" label="代码"></el-table-column>
        <el-table-column prop="address" label="产生量"></el-table-column>
        <el-table-column prop="name" label="储存量"></el-table-column>
        <el-table-column prop="date" label="产生装置"></el-table-column>
      </el-table>
    </el-col>
  </div>
</template>

<script>
export default {
  name: 'PublicTable',
  props: ['requestSolidWasteData'],
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
      data: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.getSolidWasteData()
    })
  },
  methods: {
    getSolidWasteData () {
      // const data = requestSolidWasteData
      // console.log(data)
    }
  }
}
</script>

<style lang="less" scoped>
.public-table {

}
</style>

 src/components/BaseNav/PublicBounced/PublicBounced.vue

@@ -7,8 +7,9 @@
    <div class="public-bounced-content">
      <div class="public-bounced-content-left">
        <GasTab :displayContent="displayContent"></GasTab>
        <PublicTable v-if="value === 'gufei'"></PublicTable>
        <GasECharts v-else></GasECharts>
        <!--                <PublicTable v-if="value === 'gufei'" :requestSolidWasteData="displayContent.StoragePlaceId"></PublicTable>-->
        <PublicTable></PublicTable>
        <!--        <GasECharts v-else></GasECharts>-->
      </div>
      <div class="public-bounced-content-right">
        <GasVideo></GasVideo>
@@ -19,10 +20,10 @@

<script>

import '@/components/BaseNav/SolidWaste/directive'
import '@/components/BaseNav/SolidWaste/directive/dir'
import GasTab from '@components/BaseNav/PublicBounced/GasComponents/GasTab'
import PublicTable from '@components/BaseNav/PublicBounced/GasComponents/PublicTable'
import GasECharts from '@components/BaseNav/PublicBounced/GasComponents/GasECharts'
// import GasECharts from '@components/BaseNav/PublicBounced/GasComponents/GasECharts'
import GasVideo from '@components/BaseNav/PublicBounced/GasComponents/GasVideo'

export default {
@@ -30,7 +31,7 @@
  components: {
    GasTab,
    PublicTable,
    GasECharts,
    // GasECharts,
    GasVideo
  },
  data () {
@@ -40,10 +41,10 @@
    }
  },
  methods: {
    setData (data, value) {
    setData (data) {
      this.displayContent = data
      this.flag = true
      this.value = value
      // this.value = value
    },
    closePopup () {
      this.flag = false
@@ -54,10 +55,11 @@

<style lang="less" scoped>
.public-bounced {
  width: 75%;
  z-index: 999;
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: 5%;
  left: 15%;
  background-color: #002432;
  border: 1px #9fc5c8 solid;

@@ -82,16 +84,20 @@
  }

  .public-bounced-content {
    margin: 15px auto;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .public-bounced-content-left {
      width: 48%;
      height: 100%;
    }

    .public-bounced-content-right {
      width: 48%;
      height: 100%;
    }
  }

}
</style>
</style>

 src/components/BaseNav/SolidWaste/SolidWaste.js

@@ -67,9 +67,9 @@
            // console.log(this.map.setCenter([e.target.getLatLng().lat, e.target.getLatLng().lng]))
            // this.map.flyTo([e.target.getLatLng().lat, e.target.getLatLng().lng])
            // this.map.panTo([e.target.getLatLng().lat, e.target.getLatLng().lng], 100)
            this.setPanTo(e.target.getLatLng(), 30)
            this.setPanTo(e.target.getLatLng(), 250)
            this.EffectOfPulse(e.target.getLatLng())
            this.SolidWastePopup.setData(data[i], 'gufei')
            // this.SolidWastePopup.setData(data[i], 'gufei')
            return this.SolidWastePopup.$el
          } catch (error) {
            console.log(error)
@@ -87,8 +87,9 @@
    position = this.map.latLngToLayerPoint(position)
    position.y += value
    position = this.map.layerPointToLatLng(position)
    this.map.setView(position)
    // this.map.flyTo(position)
    // this.map.setView(position)
    this.map.flyTo(position)
    // this.map.panTo(position)
  }

  // 固废点击进行的 内容的设置
@@ -121,32 +122,32 @@
  // 脉冲效果设置实现
  EffectOfPulse (position, markers, layerGroup) {
    // 区分直接执行 和判断执行的不同区别
    var differentColor = ''
    if (markers) {
      differentColor = '#ff0000'
    } else {
      differentColor = '#98FB98'
    }
    // 坐标数据：报警传进来的是数组 / 点击传进来的是object
    var FinalPosition = position instanceof Array ? {
      lat: position[0],
      lng: position[1]
    } : position
    // 插件 效果实现
    var pulsingIcon = this.L.icon.pulse({
      iconSize: [20, 20],
      color: differentColor,
      fillColor: ''
    })
    if (markers) {
      // markers.push(this.L.marker(FinalPosition, { icon: pulsingIcon }))
      // this.L.layerGroup(markers).addLayer(layerGroup)
    } else {
      var picGroupMarker = new this.L.FeatureGroup()
      this.L.marker(FinalPosition, { icon: pulsingIcon }).addTo(picGroupMarker)
      this.pulseHeighLightMarker = picGroupMarker.addTo(this.SolidWasteLayerGroup)
      this.PulseCountSetting()
    }
    // var differentColor = ''
    // if (markers) {
    //   differentColor = '#ff0000'
    // } else {
    //   differentColor = '#98FB98'
    // }
    // // 坐标数据：报警传进来的是数组 / 点击传进来的是object
    // var FinalPosition = position instanceof Array ? {
    //   lat: position[0],
    //   lng: position[1]
    // } : position
    // // 插件 效果实现
    // var pulsingIcon = this.L.icon.pulse({
    //   iconSize: [20, 20],
    //   color: differentColor,
    //   fillColor: ''
    // })
    // if (markers) {
    //   // markers.push(this.L.marker(FinalPosition, { icon: pulsingIcon }))
    //   // this.L.layerGroup(markers).addLayer(layerGroup)
    // } else {
    //   var picGroupMarker = new this.L.FeatureGroup()
    //   this.L.marker(FinalPosition, { icon: pulsingIcon }).addTo(picGroupMarker)
    //   this.pulseHeighLightMarker = picGroupMarker.addTo(this.SolidWasteLayerGroup)
    //   this.PulseCountSetting()
    // }
  }

  // 对图标脉冲 进行set设置  // 高亮图层

 src/components/BaseNav/SolidWaste/directive/dir.js

 src/components/BaseNav/SolidWaste/directive/directive.js

New file
@@ -0,0 +1,77 @@
export default {
  bind (el, binding, vnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    dialogHeaderEl.style.cssText += ';cursor:move;'
    dragDom.style.cssText += ';top:0px;'

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const getStyle = (function () {
      if (window.document.currentStyle) {
        return (dom, attr) => dom.currentStyle[attr]
      } else {
        return (dom, attr) => getComputedStyle(dom, false)[attr]
      }
    })()

    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      const dragDomWidth = dragDom.offsetWidth
      const dragDomHeight = dragDom.offsetHeight

      const screenWidth = document.body.clientWidth
      const screenHeight = document.body.clientHeight

      const minDragDomLeft = dragDom.offsetLeft
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth

      const minDragDomTop = dragDom.offsetTop
      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight

      // 获取到的值带px 正则匹配替换
      let styL = getStyle(dragDom, 'left')
      let styT = getStyle(dragDom, 'top')

      if (styL.includes('%')) {
        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
      } else {
        styL = +styL.replace(/\px/g, '')
        styT = +styT.replace(/\px/g, '')
      }

      document.onmousemove = function (e) {
        // 通过事件委托，计算移动的距离
        let left = e.clientX - disX
        let top = e.clientY - disY

        // 边界处理
        if (-(left) > minDragDomLeft) {
          left = -minDragDomLeft
        } else if (left > maxDragDomLeft) {
          left = maxDragDomLeft
        }

        if (-(top) > minDragDomTop) {
          top = -minDragDomTop
        } else if (top > maxDragDomTop) {
          top = maxDragDomTop
        }

        // 移动当前元素
        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`

        // emit onDrag event
        vnode.child.$emit('dragDialog')
      }

      document.onmouseup = function (e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
}

 src/components/BaseNav/SolidWaste/directive/index.js

New file
@@ -0,0 +1,14 @@
// import drag from './drag'
import drag from './directive'

const install = function (Vue) {
  Vue.directive('el-drag-dialog', drag)
}

if (window.Vue) {
  window['el-drag-dialog'] = drag
  Vue.use(install) // eslint-disable-line
}

drag.install = install
export default drag

 src/components/BaseNav/WasteWater/WasteWater.js

@@ -52,16 +52,17 @@
      const Icon = new WasteWaterIcon({ iconUrl: iconUrl })
      // let url = Icon.options.iconUrl

      const marker = this.L.marker.magic([positionX, positionY], { icon: Icon, magic: 'vanishIn' })
      // const marker = this.L.marker.magic([positionX, positionY], { icon: Icon, magic: 'vanishIn' }) // 带显示动画
      const marker = this.L.marker([positionX, positionY], { icon: Icon })

      marker.bindPopup(() => {
        return this.WasteWaterPopup.$el
      }, {
        className: 's-map-popup',
        minWidth: 1000,
        closeButton: true,
        autoClose: false
      })
      // marker.bindPopup(() => {
      //   return this.WasteWaterPopup.$el
      // }, {
      //   className: 's-map-popup',
      //   minWidth: 1000,
      //   closeButton: true,
      //   autoClose: false
      // })
      // 划过出现 展示数据
      marker.bindTooltip(data[i].Name, {
        permanent: true,
@@ -74,7 +75,7 @@
        try {
          // console.log(e)
          this.EffectOfPulse(e.target.getLatLng())
          this.WasteWaterPopup.setDate(data[i])
          this.WasteWaterPopup.setData(data[i])
          return this.WasteWaterPopup.$el
        } catch (error) {
          console.log(error)

 src/components/LayerController/logic/SolidWaste.js

New file
@@ -0,0 +1,70 @@
/**
 * 固废
 */
// 区分不同类型 使用不同img
const defaultImg = '/assets/images/map/solidwaste/voc.png'
const setting = '/assets/images/map/solidwaste/gf_green.png'

const mapApi = require('../../../api/mapApi').default
const AnimalService = require('../service/AnimalService').default

module.exports = function () {
  /**
   * 返回marker对象数组
   * @param L leaflet对象
   */
  this.init = async (layer, L) => {
    // const SolidWasteIcon = this.SolidWasteIcon()
    this.animalService = new AnimalService({
      L: L,
      layer: layer
    })
    const res = await mapApi.getSolidWaste()
    // console.log(res)
    const data = res.Result.DataInfo || {}
    for (let i = 0; i < data.length; i++) {
      // 经纬度 位置
      const positionX = data[i].Latitude
      const positionY = data[i].Longitude

      // 定义类型 用来区分数据的不同
      const judgeValue = data[i].StorageQty
      var iconUrl = this.differentTypes(judgeValue)

      const marker = L.marker.magic([positionX, positionY], {
        icon: L.icon({
          iconUrl: iconUrl,
          iconSize: [50, 50],
          iconAnchor: [25, 25]
        })
      })

      layer.addLayer(marker)
    }
  }

  this.bindTooltip = (layer) => {
    return '测试固废'
  }

  this.clickListener = (e) => {
    this.animalService.pulseEffect(e.latlng)
    console.log(e)
    return this.PublicBounced.$el
  }

  // 不同类型图片封装
  this.differentTypes = (judgeValue) => {
    var effectOfChange
    if (judgeValue === 1) {
      effectOfChange = defaultImg
    } else {
      effectOfChange = setting
    }
    return effectOfChange
  }
  // 固废点击进行的 内容的设置
  // SetSolidWasteContent (config, containerPopup) {
  //   this.SolidWastePopup = containerPopup
  // }
}

 src/conf/Constants.js

@@ -8,7 +8,8 @@
  fsqy: 'Sample.js',
  fspfk: 'Sample.js',
  fsjcd: 'Sample.js',
  wasteGasJcd: 'WasteGas.js'
  wasteGasJcd: 'WasteGas.js',
  solidWasteJcd: 'SolidWaste.js'
}

export const props = {

 src/conf/MapConfig.js

@@ -25,7 +25,8 @@
  minZoom: 3,
  maxZoom: 18,
  // center: [26, 104],
  center: [38.828558921813965, 117.41676807403564],
  // center: [38.828558921813965, 117.41676807403564],
  center: [29.769515991210938, 107.03567504882812],
  zoom: 14,
  worldCopyJump: true,
  inertia: true,

 src/main.js

@@ -15,12 +15,13 @@
import '@/utils/dialogDrag.js'
import '@components/plugin/leaflet-measure-path/leaflet-measure-path.css'
import '@components/plugin/leaflet-measure-path/leaflet-measure-path'

const appConfig = require('@/app.config')
Vue.config.productionTip = false

Vue.use(ElementUI)
Vue.prototype.$cancels = []
Vue.prototype.L = L
Vue.prototype.$config = appConfig
Vue.prototype.$echarts = echarts // 挂载echarts
// 注册指令7
// registerDirectives(Vue)

 src/router/index.js

@@ -1,10 +1,11 @@
import Vue from 'vue'
import Router from 'vue-router'
import { routes } from './routes'
import { getToken } from '@/utils/navigation'
import 'nprogress/nprogress.css'
const appConfig = require('@/app.config')
const { routeMode } = appConfig

const { homeRouterName, loginRouteName, routeMode } = appConfig
const LOGIN_PAGE_ROUTE_NAME = loginRouteName
Vue.use(Router)
const baseName = process.env.NODE_ENV === 'production' ? `/${appConfig.projectName}/` : '/'
const router = new Router({
@@ -17,12 +18,32 @@
    cancel()
  })
  Vue.prototype.$cancels = []
  const token = getToken()
  if (!token && to.name !== LOGIN_PAGE_ROUTE_NAME) {
    // 未登录且要跳转的页面不是登录页
    next({
      name: LOGIN_PAGE_ROUTE_NAME // 跳转到登录页
    })
  } else if (!token && to.name === LOGIN_PAGE_ROUTE_NAME) {
    // 未登陆且要跳转的页面是登录页
    next() // 跳转
  } else if (token && to.name === LOGIN_PAGE_ROUTE_NAME) {
    // 已登录且要跳转的页面是登录页
    next({
      name: homeRouterName // 跳转到homeName页
    })
  } else if (!token) {
    next({
      name: LOGIN_PAGE_ROUTE_NAME // 跳转到登录页
    })
  } else {
    next()
  }
  // 不需要登录认证的路由
  if (Object.hasOwnProperty.call(to.meta, 'noLoginIdentify') && to.meta.noLoginIdentify) {
    next()
    return
  }
  next()
  // next()
})
router.beforeResolve((to, from, next) => {
  next()

 src/router/map.js

@@ -9,8 +9,10 @@
 * }
 */
const MapTemplate = (r) => require.ensure([], () => r(require('../views/MapTemplate')), 'frame')
const Login = (r) => require.ensure([], () => r(require('../views/Login')), 'frame')
const routes = [
  { path: '/mapTemplate', name: 'MapTemplate', meta: { statusBgc: 0 }, component: MapTemplate }
  { path: '/mapTemplate', name: 'MapTemplate', meta: { statusBgc: 0 }, component: MapTemplate },
  { path: '/Login', name: 'Login', meta: { statusBgc: 0 }, component: Login }
]

// 所有上面定义的路由都要写在下面的routes里

 src/store/index.js

@@ -1,6 +1,7 @@
import Vue from 'vue'
import Vuex from 'vuex'
import map from './modules/map'
import user from './modules/user'
// import app from './modules/app'
Vue.use(Vuex)

@@ -13,6 +14,7 @@
  },
  modules: {
    // app,
    map
    map,
    user
  }
})

 src/store/modules/user.js

New file
@@ -0,0 +1,149 @@
import $API from '../../api'
import $http from '@/utils/axios'
import { setToken, getToken, setAccount, getAccount } from '@/utils/navigation'
// import { replaceUrlParams } from '@/utils/tools'

const state = {
  account: '',
  userName: '',
  userId: '',
  avator: '',
  orgUnitName: '',
  orgUnitCode: '',
  orgUnitLevel: '',
  orgSectorName: '',
  orgSectorCode: '',
  isAdmin: null,
  token: getToken(),
  access: 0,
  hasGetInfo: false
}

const mutations = {
  setAvator (state, avator) {
    state.avator = avator
  },
  setUserId (state, id) {
    state.userId = id
  },
  setAccount (state, account) {
    state.account = account
    setAccount(account)
  },
  setUserName (state, name) {
    state.userName = name
  },
  setOrgUnitName (state, orgUnitName) {
    state.orgUnitName = orgUnitName
  },
  setOrgUnitCode (state, orgUnitCode) {
    state.orgUnitCode = orgUnitCode
  },
  setOrgSectorName (state, orgSectorName) {
    state.orgSectorName = orgSectorName
  },
  setOrgSectorCode (state, orgSectorCode) {
    state.orgSectorCode = orgSectorCode
  },
  setOrgUnitLevel (state, orgUnitLevel) {
    state.orgUnitLevel = orgUnitLevel
  },
  setAdmin (state, isAdmin) {
    state.isAdmin = isAdmin
  },
  setAccess (state, access) {
    state.access = access
  },
  setToken (state, token) {
    state.token = token
    setToken(token)
  },
  setHasGetInfo (state, status) {
    state.hasGetInfo = status
  }
}

const actions = {
  // 登录
  handleLogin ({ commit }, { account, password }) {
    return new Promise((resolve, reject) => {
      $http.post($API.GetUser, {
        userName: account,
        passWord: password
      }).then(data => {
        console.log(data)
        commit('setToken', '12345668')
        commit('setAccount', account)
        resolve()
      }).catch(err => {
        reject(err)
      })
    })
  },
  // 退出登录
  handleLogOut ({ state, commit }) {
    return new Promise((resolve, reject) => {
      commit('setToken', '')
      commit('setAccount', '')
      commit('setAccess', 0)
      resolve()
    })
  },
  // 获取用户信息
  getUserInfo ({ state, commit, dispatch }) {
    const account = getAccount() || 'admin'
    return new Promise((resolve, reject) => {
      try {
        $http.get($API.AAA_GET_USER_INFO, {
          token: state.token
        }).then(response => {
          const data = response.data
          commit('setAvator', data.avator)
          // commit('setOrgUnitName', data.orgUnitName)
          // commit('setOrgUnitCode', data.orgUnitCode)
          commit('setUserId', data.userId)
          commit('setAccess', data.access)
          commit('setHasGetInfo', true)
          if (account === 'tianjun') {
            // admin的场景走mock
            commit('setAccount', data.account)
            commit('setUserName', data.userName)
            resolve(data)
          } else {
            $http.get($API.MDM_GET_USER_ACCOUNT_DETAIL, {
              account: account
            }).then(response => {
              const d = response.data
              if (d) {
                commit('setAccount', d.unifiedIdentityAcc)
                commit('setUserName', d.userName)
                // 获取用户后，获取组织机构
                dispatch('getUserOrgInfo').then(() => {
                  resolve(d)
                }).catch(err => {
                  alert('不能获取用户组织机构')
                  reject(err)
                })
              } else {
                commit('setToken', '')
                commit('setAccount', '')
                commit('setAccess', 0)
                resolve(false)
              }
            })
          }
        }).catch(err => {
          reject(err)
        })
      } catch (error) {
        reject(error)
      }
    })
  }
}

export default {
  state,
  mutations,
  actions
}

 src/utils/axios.js

@@ -83,8 +83,7 @@

// 创建axios实例
const Service = axios.create({
  timeout: 5000,
  baseURL: 'http://10.246.162.140:8080/'
  timeout: 1000
})

const CancelToken = axios.CancelToken
@@ -140,14 +139,14 @@
// respone拦截器
Service.interceptors.response.use(
  response => {
    // const res = response.data
    // if (Number(res.code) !== 200 && Number(res.code) !== 0) {
    //   $T.warning(res.message)
    //   return Promise.reject(res.message)
    // } else {
    //   return res
    // }
    return response.data
    const res = response.data
    /* if (Number(res.code) !== 200 && Number(res.code) !== 0) {
      $T.warning(res.message)
      return Promise.reject(res.message)
    } else {
      return res
    } */
    return res
  },
  error => {
    if (error.message && error.message.includes('timeout')) {

 src/utils/navigation.js

New file
@@ -0,0 +1,167 @@
import Cookies from 'js-cookie'
const appConfig = require('@/app.config')
const { cookieExpires } = appConfig

export const TOKEN_KEY = 'token'
export const ACCOUNT_KEY = 'account'
export const setToken = (token) => {
  Cookies.set(TOKEN_KEY, token, { expires: cookieExpires || 1 })
}

export const getToken = () => {
  const token = Cookies.get(TOKEN_KEY)
  if (token !== 'undefined') return token
  else return false
}

export const setAccount = (account) => {
  Cookies.set(ACCOUNT_KEY, account, { expires: cookieExpires || 1 })
}

export const getAccount = () => {
  const account = Cookies.get(ACCOUNT_KEY)
  if (account) return account
  else return false
}

export const hasChild = (item) => {
  return item.children && item.children.length !== 0
}

/**
 * @description 本地存储和获取标签导航列表
 */
export const setTagNavListToLocalstorage = list => {
  localStorage.tagNaveList = JSON.stringify(list)
}

/**
 * @returns {Array} 其中的每个元素只包含路由原信息中的name, path, meta三项
 */
export const getTagNavListFromLocalstorage = () => {
  const list = localStorage.tagNaveList
  return list ? JSON.parse(list) : []
}

/**
 * @param {Array} routers 路由列表数组
 * @description 用于找到路由列表中name为home的对象
 */
export const getHomeRouter = (routers, homeName = 'Home') => {
  let i = -1
  const len = routers.length
  let homeRoute = {}
  while (++i < len) {
    const item = routers[i]
    if (item.children && item.children.length) {
      const res = getHomeRouter(item.children, homeName)
      if (res.name) return res
    } else {
      if (item.name === homeName) homeRoute = item
    }
  }
  return homeRoute
}

/**
 * @param {*} list 现有标签导航列表
 * @param {*} newRoute 新添加的路由原信息对象
 * @description 如果该newRoute已经存在则不再添加
 */
export const getNewTagList = (list, newRoute) => {
  const { name, path, meta } = newRoute
  const newList = [...list]
  if (newList.findIndex(item => item.name === name) >= 0) return newList
  else newList.push({ name, path, meta })
  return newList
}

/**
 * @param {Number} times 回调函数需要执行的次数
 * @param {Function} callback 回调函数
 */
export const doCustomTimes = (times, callback) => {
  let i = -1
  while (++i < times) {
    callback(i)
  }
}

export const findNodeUpper = (ele, tag) => {
  if (ele.parentNode) {
    if (ele.parentNode.tagName === tag.toUpperCase()) {
      return ele.parentNode
    } else {
      return findNodeUpper(ele.parentNode, tag)
    }
  }
}

export const findNodeUpperByClasses = (ele, classes) => {
  const parentNode = ele.parentNode
  if (parentNode) {
    const classList = parentNode.classList
    if (classList && classes.every(className => classList.contains(className))) {
      return parentNode
    } else {
      return findNodeUpperByClasses(parentNode, classes)
    }
  }
}

export const findNodeDownward = (ele, tag) => {
  const tagName = tag.toUpperCase()
  if (ele.childNodes.length) {
    let i = -1
    const len = ele.childNodes.length
    while (++i < len) {
      const child = ele.childNodes[i]
      if (child.tagName === tagName) return child
      else return findNodeDownward(child, tag)
    }
  }
}

export const localSave = (key, value) => {
  localStorage.setItem(key, value)
}

export const localRead = (key) => {
  return localStorage.getItem(key) || ''
}

// scrollTop animation
export const scrollTop = (el, from = 0, to, duration = 500, endCallback) => {
  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = (
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function (callback) {
        return window.setTimeout(callback, 1000 / 60)
      }
    )
  }
  const difference = Math.abs(from - to)
  const step = Math.ceil(difference / duration * 50)

  const scroll = (start, end, step) => {
    if (start === end) {
      endCallback && endCallback()
      return
    }

    let d = (start + step > end) ? end : start + step
    if (start > end) {
      d = (start - step < end) ? end : start - step
    }

    if (el === window) {
      window.scrollTo(d, d)
    } else {
      el.scrollTop = d
    }
    window.requestAnimationFrame(() => scroll(d, end, step))
  }
  scroll(from, to, step)
}

 src/utils/tools.js

@@ -25,7 +25,16 @@
  })
  return arr
}

/**
 * 根据不同的协议，替换env配置文件中的URL协议
 *
 * @return {String}
 */
export function getSchemeHost () {
  const protocol = window.location.protocol
  const host = process.env.VUE_APP_API_HOST
  return host.replace(/scheme/g, protocol)
}
/**
 * collection数据转换为标准JSON
 * @param obj collection数据

 src/views/Login.vue

New file
@@ -0,0 +1,124 @@
<template>
    <div class="login-wrap" @keydown.enter="handleSubmit">
        <div class="content">
            <el-card class="box-card">
                <div slot="header" class="login-title clearfix">
                    <el-icon name="star-on"></el-icon>
                    <span>欢迎登录</span>
                </div>

                <div class="form-content">
                    <el-form :model="form" :rules="formRules" ref="loginForm" class="demo-ruleForm">
                        <el-form-item prop="account">
                            <el-input size="small" v-model="form.account" placeholder="请输入用户名">
                                <el-button slot="prepend" icon="el-icon-search" style="padding: 12px 10px;"></el-button>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input size="small" type="password" v-model="form.password" auto-complete="off"
                                      placeholder="请输入密码">
                                <el-button slot="prepend" icon="el-icon-search" style="padding: 12px 10px;"></el-button>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="small" type="primary" @click="handleSubmit" style="width: 100%">登录
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <p class="login-tip">输入任意用户名和密码即可</p>
            </el-card>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'Login',
  components: {},
  data () {
    return {
      form: {
        account: 'admin',
        password: 'admin'
      },
      formRules: {
        account: [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    ...mapActions([
      'handleLogin',
      'getUserInfo'
    ]),
    handleSubmit () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.handleLogin({
            account: this.form.account,
            password: this.form.password
          }).then(response => {
            this.$router.push({
              name: this.$config.homeRouterName
            })
          })
        }
      })
    }
  }
}
</script>

<style lang="less">
    .login-wrap {
        position: relative;
        background-image: url('../assets/images/login-page/page1.jpg');
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
        overflow: hidden;

        .content {
            position: absolute;
            right: 160px;
            top: 25%;
        }
        .box-card {
            width: 300px;
        }
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }
        .form-content {
            padding: 10px 0 0;
        }
        .login-title {
            width: 100%;
            font-size: 14px;
            color: #1c2438;
            font-weight: 700;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .login-tip {
            font-size: 10px;
            text-align: center;
            color: #c3c3c3;
        }
    }
</style>

 src/views/MapTemplate.vue

@@ -16,7 +16,7 @@
    <summary-sheets></summary-sheets>
    <enterprise></enterprise>
    <!--    <el-button id="map-btn" el-icon-c-scale-to-original icon="el-icon-c-scale-to-original" circle @click="isShowHidden"></el-button>-->
    <el-button type="primary" @click="ChangeState" class="solid-waste">固废</el-button>
    <!--    <el-button type="primary" @click="ChangeState" class="solid-waste">固废</el-button>-->
    <el-button type="primary" @click="ChangeWaterState" class="Waste-water">废水</el-button>
    <el-button type="primary" @click="AddGasHelper" class="flue-gas">废气</el-button>
    <PublicBounced ref="PublicBounced"></PublicBounced>
@@ -39,7 +39,6 @@
import LegendPanel from '@components/panel/LegendPanel'
import Enterprise from '../components/table/enterprise'
// 底图业务js逻辑
import AddSolidWasteHelper from '@components/BaseNav/SolidWaste/SolidWaste'
import AddWasteWaterHelper from '@components/BaseNav/WasteWater/WasteWater'
import AddGasHelper from '@components/BaseNav/flueGas/flueGas'
// // 公共展示数据
@@ -102,18 +101,6 @@
      AddGas.requestData(data)
      AddGas.SetPlueGasContent(this.config, this.$refs.PublicBounced)
    },
    ChangeState () {
      const data = {
        companyId: 3900100145,
        userCode: 'wenchun.deng',
        name: '',
        marginWarr: '',
        longDayWarr: ''
      }
      const AddSolidWaste = new AddSolidWasteHelper({ map: this.map })
      AddSolidWaste.requestData(data)
      AddSolidWaste.SetSolidWasteContent(this.config, this.$refs.PublicBounced)
    },
    ChangeWaterState () {
      const data = {
        companyId: 3900100145,
@@ -148,6 +135,7 @@
      this.$refs.toolBox.map = this.map

      window.popupComp = this.$refs.popup

      var layerFactory = new LayerFactory({
        L: window.L,
        map: this.map
@@ -165,7 +153,6 @@
      this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 初始化动态要素图层助手
      this.vectorLayerHelper.initVectorLayers(this.config)

      // this.ChangeState()
      // this.AddGasHelper()
      // this.ChangeWaterState()