manage-client 3.1.15-aode → 3.1.18

package/src/components/daping/Style/qinhuaStyle.less

@@ -0,0 +1,224 @@
+.background-qinhua {
+  font-family: PingFangSC-Regular;
+  background-image: url('../../../../static/NewManageHome/background_qinhua.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  /*width: 2304px;*/
+  /*height: 775px;*/
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  //position: absolute;
+}
+.background-left-top {
+  font-family: PingFangSC-Regular;
+  background-image: url('../../../../static/NewManageHome/左上.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  /*width: 2304px;*/
+  /*height: 775px;*/
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  /*position: absolute;*/
+}
+.background-right-top {
+  font-family: PingFangSC-Regular;
+  background-image: url('../../../../static/NewManageHome/右上.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  /*width: 2304px;*/
+  /*height: 775px;*/
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  /*position: absolute;*/
+}
+.background-content-img {
+  background-image: url('../../../../static/NewManageHome/组45.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  /*width: 2304px;*/
+  /*height: 775px;*/
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  /*position: absolute;*/
+}
+.background-content-img1 {
+  background-image: url('../../../../static/NewManageHome/组43.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  /*width: 2304px;*/
+  /*height: 775px;*/
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  /*position: absolute;*/
+}
+.background-left-bottom {
+  font-family: PingFangSC-Regular;
+  background-image: url('../../../../static/NewManageHome/左下.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  /*width: 2304px;*/
+  /*height: 775px;*/
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  /*position: absolute;*/
+}
+.background-right-bottom {
+  font-family: PingFangSC-Regular;
+  background-image: url('../../../../static/NewManageHome/右下.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  /*width: 2304px;*/
+  /*height: 775px;*/
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  /*position: absolute;*/
+}
+.normal-font {
+  font-family: PingFang-SC-Medium;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: 30px;
+  letter-spacing: 0px;
+  color: #b7cee6;
+}
+.title{
+  width: 47px;
+	height: 23px;
+	font-family: PingFangSC-Bold;
+	font-size: 24px;
+	font-weight: normal;
+	font-stretch: normal;
+	line-height: 26px;
+	letter-spacing: 0px;
+	color: #ffffff;
+}
+.font-title {
+  font-family: PingFangSC-Medium;
+  font-size: 24px;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: 26px;
+  letter-spacing: 0px;
+  color: #ffffff;
+}
+.lable-title {
+  font-family: PingFangSC-Bold;
+  margin-left: 1em;
+  font-size: 18px;
+  font-weight: normal;
+  color: #e79450;
+}
+.normal-font {
+  font-family: PingFang-SC-Medium;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: 35px;
+  letter-spacing: 0px;
+  color: #246fc0;
+}
+
+.value-font {
+  font-family: PingFang-SC-Bold;
+  font-size: 18px;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: 35px;
+  letter-spacing: 0px;
+  color: #00f6ff;
+}
+
+@font-pingfang-bold{
+  //font-family: pFBold;
+  //src:url(../../../../static/font/pingfang/PFBold_1.otf)
+}
+@font-pingfang-extralight{
+  //font-family: pFExtraLight;
+  //src:url(../../../../static/font/pingfang/PFExtraLight_1.otf)
+}
+@font-pingfang-heavy{
+  //font-family: pFHeavy;
+  //src:url(../../../../static/font/pingfang/PFHeavy_1.otf)
+}
+@font-pingfang-light{
+  //font-family: pFLight;
+  //src:url(../../../../static/font/pingfang/PFLight_1.otf)
+}
+@font-pingfang-medium{
+  //font-family: pFMedium;
+  //src:url(../../../../static/font/pingfang/PFMedium_1.otf)
+}
+@font-pingfang-regular{
+  //font-family: pFRegular;
+  //src:url(../../../../static/font/pingfang/PFRegular_1.otf)
+}
+@font-trends{
+  //font-family: tRends;
+  //src:url(../../../../static/font/pingfang/TRENDS.ttf)
+}
+.pf-title{
+  font-family: pFBold;
+	font-size: 24px;
+	font-weight: normal;
+	font-stretch: normal;
+	line-height: 26px;
+	letter-spacing: 0px;
+	color: #ffffff;
+}
+.font-14-medium{
+  color: #ffffff;
+line-height: 18px;
+  font-size: 14px;
+font-family: font-pingfang-medium;
+}
+.bottom-center.amap-info-contentContainer{
+  height: auto;
+  //height: 300px;
+  //width: 180px;
+  //background-color: #084a78;
+  //border: 1px solid #0389db;
+  //padding: 5px 0;
+  //border-radius: 6px;
+}
+.amap-marker-content{
+  height: auto;
+}
+.tooltip {
+  width: 200px;
+  background-color: #084a78;
+  border: 1px solid #0389db;
+  padding: 5px;
+  border-radius: 6px;
+  //text-align: center;
+  /* 定位 */
+  //position: absolute;
+  z-index: 1;
+}
+.t2 {
+  color: white;
+}
+
+.t3 {
+  color: #ffc21f;
+}
+.amap-info-content{
+  background: transparent;
+}
+.amap-info-close{
+  display: none;
+}
+.amap-info-content.amap-info-outer{
+  //display: contents;
+  display: inline;
+}
+div{
+  display: block;
+}

package/src/components/daping/XianMap.vue

@@ -0,0 +1,275 @@
+
+<template>
+<div style="margin-top: -75%;">
+  <div id="idname" style="padding-top: 2%;
+    padding-left: 2%;
+    padding-right: 2%;">
+  </div>
+</div>
+
+
+
+</template>
+
+<script>
+
+import mapjson from 'src/components/qinhua/json/mapStyle.json'
+import {MP} from 'src/components/qinhua/js/BMap.js'
+
+export default {
+  name: 'xian-echart-map',
+  title:'xian-echart-map',
+
+  data() {
+    return {
+      mapdata:[
+        {name:'xian',value:require('src/components/qinhua/json/xian.json')}
+
+      ],
+      list:[],
+      xc:'',
+      timer:'',
+      geoCoordMap : {
+
+        '未央区':[108.953364,34.299687],
+        '太白立交':[108.927493,34.239545],
+        '狄寨塬':[109.145543,34.206836],
+        '耿镇':[109.108174,34.451585],
+        '高陵':[109.006904,34.498217],
+
+
+      },
+      data : [
+        {name: '未央区', value:333},
+        {name: '太白立交', value: 111},
+        {name: '狄寨塬', value: 222},
+        {name: '耿镇', value: 222},
+        {name: '高陵', value: 222},
+
+      ]
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+
+    convertData (data) {
+      var res = [];
+      for (var i = 0; i < this.data.length; i++) {
+        var geoCoord = this.geoCoordMap[this.data[i].name];
+        if (geoCoord) {
+          res.push({
+            name: this.data[i].name,
+            value: geoCoord.concat(this.data[i].value)
+          });
+        }
+      }
+      return res;
+    },
+    drawChinaMap() {
+      // this.$echarts.registerMap('xian', xian);
+
+
+      let mapChart =this.$echarts.init(document.getElementById("idname"));
+
+      console.log('画图~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~')
+      let option = {
+
+        tooltip : {
+          triggerOn: "mousemove",
+          trigger: 'item'
+        },
+        /*tooltip: {
+          show:true,
+          triggerOn: "mousemove",
+          trigger: 'item',
+          formatter: function(a, b) {
+            console.log('nnnnnnnnnnnnnnnnnnnn')
+            console.log(a.data)
+            console.log('bbbbbbbbbbbbbbbbbbbbb')
+            console.log(b)
+            return (
+
+              `${a['name']}   `
+            )
+          }
+        },*/
+        bmap: {
+          center: [108.951927,34.278213],
+          zoom: 10,
+          roam: false,
+          mapStyle: {
+            styleJson: [{
+              'featureType': 'water',
+              'elementType': 'all',
+              'stylers': {
+                'color': '#d1d1d1'
+              }
+            }, {
+              'featureType': 'land',
+              'elementType': 'all',
+              'stylers': {
+                'color': '#f3f3f3'
+              }
+            }, {
+              'featureType': 'railway',
+              'elementType': 'all',
+              'stylers': {
+                'visibility': 'off'
+              }
+            }, {
+              'featureType': 'highway',
+              'elementType': 'all',
+              'stylers': {
+                'color': '#fdfdfd'
+              }
+            }, {
+              'featureType': 'highway',
+              'elementType': 'labels',
+              'stylers': {
+                'visibility': 'off'
+              }
+            }, {
+              'featureType': 'arterial',
+              'elementType': 'geometry',
+              'stylers': {
+                'color': '#fefefe'
+              }
+            }, {
+              'featureType': 'arterial',
+              'elementType': 'geometry.fill',
+              'stylers': {
+                'color': '#fefefe'
+              }
+            }, {
+              'featureType': 'poi',
+              'elementType': 'all',
+              'stylers': {
+                'visibility': 'off'
+              }
+            }, {
+              'featureType': 'green',
+              'elementType': 'all',
+              'stylers': {
+                'visibility': 'off'
+              }
+            }, {
+              'featureType': 'subway',
+              'elementType': 'all',
+              'stylers': {
+                'visibility': 'off'
+              }
+            }, {
+              'featureType': 'manmade',
+              'elementType': 'all',
+              'stylers': {
+                'color': '#d1d1d1'
+              }
+            }, {
+              'featureType': 'local',
+              'elementType': 'all',
+              'stylers': {
+                'color': '#d1d1d1'
+              }
+            }, {
+              'featureType': 'arterial',
+              'elementType': 'labels',
+              'stylers': {
+                'visibility': 'off'
+              }
+            }, {
+              'featureType': 'boundary',
+              'elementType': 'all',
+              'stylers': {
+                'color': '#fefefe'
+              }
+            }, {
+              'featureType': 'building',
+              'elementType': 'all',
+              'stylers': {
+                'color': '#d1d1d1'
+              }
+            }, {
+              'featureType': 'label',
+              'elementType': 'labels.text.fill',
+              'stylers': {
+                'color': '#999999'
+              }
+            }]
+          }
+        },
+        series : [
+          {
+            name: '站点',
+            type: 'effectScatter',
+            coordinateSystem: 'bmap',
+            data: this.convertData(this.data.sort(function (a, b) {
+              return b.value - a.value;
+            }).slice(0, 6)),
+            symbolSize:10,
+            encode: {
+              value: 2
+            },
+            showEffectOn: 'render',
+            rippleEffect: {
+              brushType: 'stroke'
+            },
+            hoverAnimation: true,
+            label: {
+              formatter: '{b}',
+              position: 'right',
+              show: true
+            },
+            itemStyle: { //散点的样式
+              shadowBlur: 10,
+              shadowColor: '#FFE228',
+              color :'#FFE228',
+            },
+            zlevel: 1
+          }
+        ]
+
+      };
+
+      mapChart.setOption(option,true)
+      var bmap = mapChart.getModel().getComponent('bmap').getBMap();
+      // bmap.setMapStyleV2({ styleJson:  mapjson });
+      bmap.setMapStyle({ style:  'midnight' });
+
+
+
+    }
+
+  },
+  beforeDestroy() {
+    //清除定时器
+    clearInterval(this.timer);
+  },
+  props: ['show'],
+  watch: {
+    // 'show'(val) {
+    //   this.drawChinaMap()
+    // }
+  },
+  ready(){
+    // console.log('----------------------------------ready+this.show')
+    // console.log(this.show)
+    // this.$nextTick(() => {
+    //   MP('pUKyfRZf0LhEAQ2kdpUGOHx6i0uLVnwn').then(() => {
+    //     console.log('=============================')
+    //     this.drawChinaMap()
+    //   })
+    // })
+    /*setTimeout(() => {
+      this.drawChinaMap()
+    }, 5000)*/
+
+  }
+};
+</script>
+<style scoped>
+ .ec-extension-bmap{
+   margin-top: -330px;
+ }
+</style>

package/src/components/daping/js/AMap.js

@@ -0,0 +1,19 @@
+export default function MapLoader () {
+  return new Promise((resolve, reject) => {
+    if (window.AMap) {
+      resolve(window.AMap)
+    } else {
+      // 动态创建script标签
+      var script = document.createElement('script')
+      script.type = 'text/javascript'
+      script.async = true
+      script.src = 'https://webapi.amap.com/maps?v=1.4.9&callback=initAMap&key=Key&plugin=AMap.DistrictSearch,AMap.Circle,AMap.LngLat,AMap.Polyline,AMap.LngLat,AMap.Text,AMap.Geocoder';
+      // plugin后的是需要的插件
+      script.onerror = reject
+      document.head.appendChild(script)
+    }
+    window.initAMap = () => {
+      resolve(window.AMap)
+    }
+  })
+}

package/src/components/daping/js/BMap.js

@@ -0,0 +1,13 @@
+export function MP(ak) {
+  return new Promise(function (resolve, reject) {
+    window.onload = function () {
+      console.log('map是================================')
+      resolve(BMap)
+    }
+    const script = document.createElement("script");
+    script.type = "text/javascript";
+    script.src = "http://api.map.baidu.com/api?v=2.0&ak=" + ak + "&callback=init";
+    script.onerror = reject;
+    document.head.appendChild(script);
+  })
+}