map

ZZJ

2021-10-29 0bb459c121f04f573230fa98de5ffc75b53f9960

map

 package.json

@@ -50,6 +50,7 @@
    "eslint": "^5.16.0",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-vue": "^5.0.0",
    "parcel-bundler": "^1.12.5",
    "prettier": "^1.18.2",
    "sass": "^1.18.0",
    "sass-loader": "^7.1.0",

 public/images/InternetData/ÉùÒô.png

 public/images/InternetData/¹Ò¶Ï.png

 public/images/InternetData/»°Í².png

 public/images/InternetDevice/Group 367.png

 public/images/InternetDevice/Group 368.png

 public/images/InternetDevice/Group 441.png

 public/images/InternetDevice/µç³Ø.png

 public/images/map/°²È«Ã±-ºì.png

 public/images/map/°²È«Ã±-ÂÌ.png

 public/images/map/·¶Î§-ºì.png

 public/images/map/·¶Î§-ÂÌ.png

 public/images/shuohuang/±³¾°.png

 src/pages/internetData/components/telephoneBox.vue

@@ -12,9 +12,9 @@
      <div class="video">1</div>

      <div class="control">
          <span class="icon iconfont">&#xe740;</span>
          <span class="icon iconfont mid">&#xe740;</span>
          <span class="icon iconfont">&#xe740;</span>
          <img src="/images/InternetData/挂断.png" />
          <img src="/images/InternetData/声音.png" class="mid" />
          <img src="/images/InternetData/话筒.png" />
      </div>

      <div class="close el-icon-close" @click="close"></div>
@@ -102,8 +102,9 @@
    .control {
        margin-top: 50px;

        .icon {
            font-size: 37px;
        img {
            width: 37px;
            height: 37px;
        }

        .mid {

 src/pages/internetData/index/index.vue

@@ -19,7 +19,6 @@

    <!-- æ™ºèƒ½å®‰å…¨å¸½ -->
    <helmet
    v-if="activeTab === 0" 
    />

    </div>

 src/pages/internetData/views/helemtTable.vue

@@ -150,43 +150,43 @@
      currentPage:1,
      tableData: [
        {code: "A123123123123", elec:79.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
        longitude:120.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"单向定位",
        longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
        isSend:false,istele:false
         },
         {code: "A123123123123", elec:29.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
        longitude:120.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"单向定位",
        longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
        isSend:false,istele:false
         },
         {code: "A123123123123", elec:0, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
        longitude:120.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"单向定位",
        longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
        isSend:false,istele:false
         },
         {code: "A123123123123", elec:79.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
        longitude:120.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"单向定位",
        longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
        isSend:false,istele:false
         },
         {code: "A123123123123", elec:79.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
        longitude:120.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"单向定位",
        longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
        isSend:false,istele:false
         },
         {code: "A123123123123", elec:79.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
        longitude:120.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"单向定位",
        longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
        isSend:false,istele:false
         },
         {code: "A123123123123", elec:79.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
        longitude:120.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"单向定位",
        longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
        isSend:false,istele:false
         },
          {code: "A123123123123", elec:79.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
        longitude:120.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"单向定位",
        longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
        isSend:false,istele:false
         },
          {code: "A123123123123", elec:79.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
        longitude:120.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"单向定位",
        longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
        isSend:false,istele:false
         },
          {code: "A123123123123", elec:79.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
        longitude:120.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"单向定位",
        longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"单向定位",
        isSend:false,istele:false
         },
      ],

 src/pages/internetEquipment/components/headCard.vue

@@ -4,7 +4,7 @@
          <div class="number" :style="colorStyle">{{number}}</div>
          <div class="info">{{info}}</div>
      </div>
      <div class="card-right icon iconfont">&#xe743;</div>
      <img class="card-right" :src="src" alt="">
  </div>
</template>

@@ -21,6 +21,9 @@
            require: true
        },
        color: {
            require: true
        },
        src: {
            require: true
        }
    },
@@ -66,8 +69,8 @@
    }

    .card-right {
        font-size: 58px;
        color: var(--color);
        width: 58px;
        height: 58px;

    }
}

 src/pages/internetEquipment/components/helemetEchart.vue

@@ -21,7 +21,7 @@
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1', '2021-09-02 00:00', '1', '2021-09-02 00:00', '1', '2021-09-02 00:00', '1'],
                data: ['', '2021-09-02 00:00', '', '2021-09-02 00:00', '', '2021-09-02 00:00', ''],
                axisLine: {
                    show: false  //不显示坐标轴轴线
                },
@@ -30,6 +30,9 @@
                },
                spiltLine:{
                    show: false  //想要不显示网格线，改为false
                },
                axisLabel:{
                    interval: 0
                }
              },
              yAxis: {

 src/pages/internetEquipment/components/helemetHead.vue

@@ -4,8 +4,8 @@
      :key="index"
      :number="item.number"
      :info="item.info"
      :icon="item.icon"
      :color="item.color"
      :src="cardImage[index]"
      />

      <helemetEchart />
@@ -21,9 +21,14 @@
    data (){
        return {
            cardData: [
                {number:233,info:"设备总量",icon:"\ue743",color:"#4E94FF"},
                {number:34,info:"本月新增",icon:"\ue743",color:"#FFAA44"},
                {number:45,info:"今日预警",icon:"\ue743",color:"#FF6464"},
                {number:233,info:"设备总量",color:"#4E94FF"},
                {number:34,info:"本月新增",color:"#FFAA44"},
                {number:45,info:"今日预警",color:"#FF6464"},
            ],
            cardImage: [
                '/images/InternetDevice/Group 441.png',
                '/images/InternetDevice/Group 367.png',
                '/images/InternetDevice/Group 368.png',
            ]
        }
    },

 src/pages/internetEquipment/components/processWarn.vue

New file
@@ -0,0 +1,136 @@
<template>
  <div class="process-warn">
    <div class="close el-icon-close" @click="close"></div>
      <span class="el-icon-question"></span>
      <div class="title">确认提示</div>
      <div class="des">请确定预警数据是否已处理？</div>
      <div class="radio">
         <el-radio v-model="radio" :label="false">未处理</el-radio>
         <el-radio v-model="radio" :label="true">已处理</el-radio>
      </div>
      <div class="btn">
        <div class="cancel" @click="close">取消</div>
        <div class="save" @click="save">确定</div>
      </div>

  </div>
</template>

<script>
export default {
  props :{
    warnObj :{
      warnObj :true
    }
  },
  data (){
    return {
      radio : false
    }
  },
  methods:{
        close (){
            this.$emit("close",this.warnObj)
        },
        save (){
          if (this.radio) {
            this.$emit("save",this.warnObj)
          }
            this.$emit("close",this.warnObj)
        }
  }
}
</script>

<style scoped lang="scss">
.process-warn {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items:center;
    z-index: 2;
    padding: 48px 30px 30px 30px;

    width: 420px;
    height: 274px;
    left: 50%;
    top: 50%;
    margin-top: -15%;
    margin-left: -15%;

    background: #FFFFFF;
    border-radius: 8px;
    color: #4F4F4F;

    span {
      font-size: 40px;
      color:#FFAA44;
      cursor: pointer;
    }

    .close {
        position: absolute;
        top: 12px;
        right: 12px;
        font-size: 12px;
        font-weight: 700;
    }

    .title {
      margin: 6px 0 4px 0;
      font-weight: 700;
      font-size: 16px;
    }

    .des {
      margin-bottom: 10px;
      font-size: 14px;
      color: #828282;
    }

    label ::v-deep .el-radio__inner:hover {
        border-color: #FFAA44;
    }

    label.is-checked {
      ::v-deep .el-radio__inner {
        border-color: #FFAA44;
        background: #FFAA44;
      }
      ::v-deep .el-radio__label {
        color: #FFAA44;
      }
    }

    .btn {
      display: flex;
      margin-top: 34px;
      justify-content: space-between;
      width: 100%;
    }

    .cancel {
      width: 175px;
      height: 40px;
      border: 1px solid #E0E0E0;
      box-sizing: border-box;
      border-radius: 25px;
      font-size: 16px;
      line-height: 40px;
      color: #333;
      cursor: pointer;
    }

    .save {
      width: 175px;
      height: 40px;
      background: #11AA66;
      border-radius: 25px;
      font-size: 16px;
      line-height: 40px;
      color: #fff;
      cursor: pointer;
    }
}

</style>

 src/pages/internetEquipment/components/warnDescription.vue

@@ -1,7 +1,7 @@
<template>
  <div class="warn-description">
      <div class="code"><span>设备编码: </span>{{warnDes.code}}</div>
      <div class="location" v-if="warnDes.location">{{warnDes.location}}</div>
      <div class="location" v-if="warnDes.location"><span>位置: </span>{{warnDes.location}}</div>
      <div class="time"><span>时间: </span>{{warnDes.time}}</div>
      <div class="position" v-if="warnDes.longitude"><span>经度: </span>{{warnDes.longitude}} <span>纬度: </span>{{warnDes.latitude}}</div>
      <div class="warnIcon" v-if="warnDes.warn"><span class="icon iconfont">&#xe71c;</span> {{warnDes.warn}}</div>

 src/pages/internetEquipment/index/index.vue

@@ -16,7 +16,7 @@
    <!-- å³ä¾§å†…容 -->
    <div class="right_content">
      <!-- å®‰å…¨å¸½è®¾å¤‡ -->
      <helemetEquipment v-if="activeTab === 0"/>
      <helemetEquipment />

    </div>
  </div>
@@ -53,9 +53,6 @@
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}

.internert-equipment {
  display: flex;
@@ -79,3 +76,9 @@
  }
}
</style>

<style >
* {
  box-sizing: border-box;
}
</style>

 src/pages/internetEquipment/module/elecModule.vue

@@ -1,10 +1,17 @@
<template>
  <div class="elec-module">
      <div class="title"></div>
      <div class="title">电量过低预警</div>

      <div class="elec-item"
       v-for="(item,index) in warnArr"
       :key="index">
          <div class="left">
              <img src="/images/InternetDevice/电池.png" alt="">
              <div class="colobox" 
              :style="{'width':`${item.elec/100*29}px`,
              'background-color':`${item.elec >= 30 ? 'rgb(37, 174, 109)' : 'rgb(255, 100, 100)'}`}"></div>
              <div class="elec">电量: {{item.elec}}</div>
          </div>
          <warnDescription 
        :warnDes="{code:item.code,
        time:item.time,
@@ -29,12 +36,54 @@
</script>

<style scoped lang="scss">

.elec-module {
    padding: 20px;
    width: 280px;
    height: 292px;
    background-color: #fff;
    box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
    border-radius: 15px;
    overflow-y: scroll;

    .title {
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 700;
        text-align: left;
    }

    .elec-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
        padding: 20px 5px 20px 5px;
        width: 240px;
        height: 78px;
        background: #F9FAFC;
        border-radius: 10px;

        .elec {
            font-weight: 700;
        }

        .left {
            position: relative;
            img {
                width: 40px;
                height: 20px;
            }

            .colobox {
                position: absolute;
                top: 2px;
                left: 10px;
                width: 29px;
                height: 15px;
                border-radius: 2px;
            }
        }
    }
}
</style>

 src/pages/internetEquipment/module/historyModule.vue

@@ -1,38 +1,113 @@
<template>
  <div class="history-module">
      <div class="title"></div>
      <div class="title">历史报警</div>
      <div class="history-item" 
      v-for="(item,index) in warnArr"
      v-for="(item,index) in warnArrProcess"
      :key="index">
          <warnDescription  
        :warnDes="{code:item.code,
        time:item.time,
        warn:item.warn}"/>
        <div 
        class="button" 
        @click="process(item)">处理</div>
      </div>
      <processWarn 
      v-if="activeWarn" 
      :warnObj="activeWarn" 
      @close="close" 
      @save="save"/>
      <div class="mask"  v-if="activeWarn"/>
  </div>
</template>

<script>
import warnDescription from '@/pages/internetEquipment/components/warnDescription'
import processWarn from '@/pages/internetEquipment/components/processWarn'
export default {
    data (){
        return {
            activeWarn:null
        }
    },
    props :{
        warnArr : {
            type: Array
        }
    },
    components :{
        warnDescription
        warnDescription,
        processWarn
    },
    computed :{
        warnArrProcess(){
            return this.warnArr.filter(item=>!item.processed)
        }
    },
    methods: {
        process(item){
            this.activeWarn = item
        },
        close(){
            this.activeWarn =null
        },
        save(item) {
            this.$set(item,'processed',true)
            this.close()
        }
    }
}
</script>

<style scoped lang="scss">
.history-module {
    padding: 20px;
    width: 280px;
    height: 292px;
    background-color: #fff;
    box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
    border-radius: 15px;
    overflow-y: scroll;

    .title {
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 700;
        text-align: left;
    }

    .history-item {
        display: flex;
        width: 240px;
        height: 74px;
        margin-bottom: 4px;
        align-items: center;
        justify-content: space-between;
        background: #F9FAFC;
        border-radius: 10px;
        padding: 0 10px;
        .button {
            width: 54px;
            height: 20px;
            background: #CFEEE0;
            border-radius: 30px;
            font-size: 12px;
            line-height: 20px;
            color: #11AA66;
            cursor: pointer;
        }
    }

    .mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 1;
    background-color: black;
    opacity: .5;
    }
}
</style>

 src/pages/internetEquipment/module/mapIndex.vue

@@ -1,21 +1,395 @@
<template>
  <div class="map-index">

  <div id="map-index">
    <div class="control">
      <div class="location icon iconfont" @click="location">&#xe74e;</div>
      <div class="zoom-in icon iconfont" @click="zoomIn">&#xeb89;</div>
      <div class="zoom-out icon iconfont" @click="zoomOut">&#xe758;</div>
    </div>
    <div class="range icon iconfont" @click="drawPolygon">&#xe773;</div>
    <el-input v-model="nodeId" placeholder="请输入内容"></el-input>
    <div class="save" v-if="showBtn" @click="savePoly">保存</div>
    <div class="cancel" v-if="showBtn" @click="resetMap">取消</div>
  </div>
</template>

<script>
export default {
import "ol/ol.css";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import VectorSource from "ol/source/Vector";
import { Icon, Style, Fill, Stroke } from "ol/style";
import { transform } from "ol/proj";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import { Vector as VectorLayer } from "ol/layer";
import OSM from "ol/source/OSM";
import Draw from "ol/interaction/Draw";
import { Modify, Snap } from "ol/interaction";
import Polygon from "ol/geom/Polygon";

let myMap = {};
let myVectorSource = {};
let baseLayer = new TileLayer({
  source: new OSM({
    // url:'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8',
    url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7",
    crossOrigin: "anonymous",
    // url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
  }),
});
let myDraw = {};
let myModify = {};

export default {
  data() {
    return {
      showBtn: false,
      nodeArr: [
        { data: [116.06157, 39.66157], id: 1, color: "绿" },
        { data: [116.06247, 39.66247], id: 2, color: "绿" },
        { data: [116.06337, 39.66337], id: 3, color: "绿" },
        { data: [116.06467, 39.66437], id: 4, color: "绿" },
        { data: [116.06517, 39.66517], id: 5, color: "红" },
        { data: [116.06627, 39.66627], id: 6, color: "红" },
        { data: [116.06787, 39.66787], id: 7, color: "红" },
        { data: [116.06897, 39.66897], id: 8, color: "红" },
      ],
      nodeId: "",
      iconArr: [],
      rangeArr: [],
      zoom: 15,
      center: [116.06667, 39.66667],
      polygonArr: [
        {
          data: [
            [12919660.904416857, 4817401.4907109635],
            [12921041.54824026, 4817277.28054],
            [12920195.963614853, 4816775.662541878],
            [12919493.698417485, 4816785.2171704145],
          ],
          id: "1",
        },
      ],
      polyFeature: [],
      drawStore: [],
      modifyStore: [],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.initPolygonArr();
      const vectorSource = new VectorSource({
        features: this.polyFeature,
      });
      /* if(this.polygonArr.length>0){
      this.initPolygonArr()
      console.log(this.polyFeature);
      vectorSource.addFeature(this.polyFeature[0])
      } */
      myVectorSource = vectorSource;
      this.initAllNode();

      const vectorLayer = this.initLayer(vectorSource);

      const map = this.initBottomMap(vectorLayer);

      myMap = map;
      /* map.getView().on('change:resolution', ()=> {
      this.iconArr.forEach(item=>{
        let style = item.getStyle()
        console.log(this.zoom);
        style.getImage().setScale(this.zoom/15)
        item.setStyle(style)
        console.log(item);
      })
    }) */
    },
    initNode([x, y], color) {
      const iconFeature = new Feature({
        geometry: new Point(transform([x, y], "EPSG:4326", "EPSG:3857")),
      });

      const iconStyle = new Style({
        image: new Icon({
          size: [32, 32],
          src: `/images/map/安全帽-${color}.png`,
        }),
        zIndex: 1,
      });

      iconFeature.setStyle(iconStyle);
      this.iconArr.push(iconFeature);
      return iconFeature;
    },
    initAllNode() {
      this.nodeArr.forEach((item) => {
        const node = this.initNode(item.data, item.color);
        node.set("id", item.id);
        myVectorSource.addFeature(node);
      });
    },
    initPolygonArr() {
      this.polyFeature = [];
      this.polygonArr.forEach((item) => {
        const feature = new Feature({ geometry: new Polygon([item.data]) });
        feature.id = item.id;
        this.polyFeature.push(feature);
      });
    },
    initLayer(source) {
      return new VectorLayer({
        source: source,
        style: new Style({
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.4)",
          }),
          stroke: new Stroke({
            color: "#F54336",
            width: 2,
          }),
        }),
      });
    },
    initBottomMap(vectorLayer) {
      return new Map({
        target: "map-index",
        layers: [baseLayer, vectorLayer],
        view: new View({
          center: transform(this.center, "EPSG:4326", "EPSG:3857"),
          zoom: this.zoom,
        }),
      });
    },
    zoomIn() {
      const view = myMap.getView();
      this.zoom++;
      view.setZoom(this.zoom);
    },
    zoomOut() {
      const view = myMap.getView();
      this.zoom--;
      view.setZoom(this.zoom);
    },
    location() {
      const view = myMap.getView();
      view.setZoom(this.zoom);
      view.setCenter(
        transform([116.06667, 39.66667], "EPSG:4326", "EPSG:3857")
      );
    },
    drawPolygon() {
      this.showBtn = true;
      const draw = new Draw({
        source: myVectorSource,
        type: "Polygon",
      });
      myDraw = draw;
      draw.on("drawend", (event) => {
        let id =
          this.drawStore.length > 0
            ? +this.drawStore[this.drawStore.length - 1].id + 1
            : +this.polygonArr[this.polygonArr.length - 1].id + 1;
        event.feature.id = id;
        this.drawStore.push({
          id,
          data: event.feature.getGeometry().getCoordinates()[0],
        });
      });

      const modify = new Modify({ source: myVectorSource });
      modify.addEventListener("modifyend", (event) => {
        console.log(event.features);
        const id = event.features.array_[0].id;
        const data = event.features.array_[0].getGeometry().getCoordinates()[0];
        this.modifyStore.push({ id, data });
      });
      myModify = modify;
      myMap.addInteraction(modify);
      myMap.addInteraction(draw);
    },
    resetMap() {
      this.initPolygonArr();
      console.log(this.polyFeature);
      const vectorSource = new VectorSource({
        features: this.polyFeature,
      });
      /* if(this.polygonArr.length>0){
      this.initPolygonArr()
      console.log(this.polyFeature);
      vectorSource.addFeature(this.polyFeature[0])
      } */
      myVectorSource = vectorSource;
      this.initAllNode();

      const vectorLayer = this.initLayer(vectorSource);
      myMap.setLayers([baseLayer, vectorLayer]);
      myMap.removeInteraction(myDraw);
      myMap.removeInteraction(myModify);
      this.showBtn = false;
      this.drawStore = [];
      this.modifyStore = [];
    },
    savePoly() {
      myMap.removeInteraction(myDraw);
      myMap.removeInteraction(myModify);
      this.showBtn = false;
      if (this.drawStore.length) {
        this.polygonArr = [...this.polygonArr, ...this.drawStore];
        this.drawStore = [];
}
      if (this.modifyStore.length) {
        this.modifyStore.forEach((item) => {
          this.polygonArr.forEach((item2) => {
            if (item.id == item2.id) {
              item2.data = item.data;
            }
          });
        });
        this.modifyStore = [];
      }
    },
  },
  watch: {
    nodeId: {
      handler(val) {
        const arr = this.nodeArr.filter((item) => item.id == val);
        if (this.rangeArr.length > 0) {
          this.rangeArr.forEach((item) => {
            myVectorSource.removeFeature(item);
          });
          this.rangeArr = [];
        }

        if (arr.length > 0) {
          arr.forEach((item) => {
            const rangeFeature = new Feature({
              geometry: new Point(
                transform(item.data, "EPSG:4326", "EPSG:3857")
              ),
              name: "Null Island",
              population: 4000,
              rainfall: 500,
            });

            const iconStyle = new Style({
              image: new Icon({
                size: [64, 64],
                src: `/images/map/范围-${item.color}.png`,
              }),
            });

            rangeFeature.setStyle(iconStyle);
            myVectorSource.addFeature(rangeFeature);
            this.rangeArr.push(rangeFeature);
          });
        }
      },
    },
  },
};
</script>

<style scoped lang="scss">
.map-index  {
#map-index {
  position: relative;
  margin: 20px 0;
    width: 1170px;
    height: 396px;
    border-radius: 15px;
    background-color: skyblue
  .control {
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 1;
    left: 25px;
    bottom: 25px;
    width: 30px;
    height: 91px;
    background: #ffffff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    .location,
    .zoom-in,
    .zoom-out {
      line-height: 30px;
      font-size: 18px;
      flex: 1;
      cursor: pointer;
    }
    .location {
      background: #11aa66;
      border-radius: 8px 8px 0 0;
      color: #fff;
    }
  }
  .el-input {
    position: absolute;
    z-index: 1;
    top: 15px;
    left: 15px;
    width: 205px;
    height: 35px;
    ::v-deep input {
      width: 100%;
      height: 100%;

      &:focus {
        border-color: #11aa66 !important;
      }
    }
  }
  .range {
    position: absolute;
    left: 25px;
    bottom: 126px;
    width: 30px;
    height: 30px;
    background: #11aa66;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    z-index: 1;
    line-height: 30px;
  }
  .save {
    position: absolute;
    z-index: 3;
    top: 15px;
    right: 113px;
    width: 87px;
    height: 35px;
    background: #11aa66;
    border: 1px solid #11aa66;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    line-height: 36px;
    cursor: pointer;
}

  .cancel {
    position: absolute;
    z-index: 3;
    top: 15px;
    right: 20px;
    width: 87px;
    height: 35px;
    background: #fff;
    border: 1px solid #11aa66;
    border-radius: 8px;
    color: #4f4f4f;
    font-size: 12px;
    line-height: 36px;
    cursor: pointer;
  }
}
</style>

<style>
.ol-zoom {
  display: none !important;
}
</style>

 src/pages/internetEquipment/views/helemetEquipment.vue

@@ -26,7 +26,9 @@
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域"
        warn:"未在电子围栏区域",
        processed:false,
        elec: 50.2
      },{
        code:"A100640819DA3B",
        image:"/images/settings/background.png",
@@ -34,7 +36,9 @@
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域"
        warn:"未在电子围栏区域",
        processed:false,
        elec: 10.2
      },
      {
        code:"A100640819DA3B",
@@ -43,7 +47,9 @@
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域"
        warn:"未在电子围栏区域",
        processed:false,
        elec: 50.2
      },
      {
        code:"A100640819DA3B",
@@ -52,7 +58,9 @@
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域"
        warn:"未在电子围栏区域",
        processed:false,
        elec: 50.2
      },
      {
        code:"A100640819DA3B",
@@ -61,7 +69,9 @@
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域"
        warn:"未在电子围栏区域",
        processed:false,
        elec: 50.2
      },
      {
        code:"A100640819DA3B",
@@ -70,7 +80,9 @@
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域"
        warn:"未在电子围栏区域",
        processed:false,
        elec: 50.2
      },
      {
        code:"A100640819DA3B",
@@ -79,7 +91,9 @@
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域"
        warn:"未在电子围栏区域",
        processed:false,
        elec: 50.2
      },
      {
        code:"A100640819DA3B",
@@ -88,7 +102,9 @@
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域"
        warn:"未在电子围栏区域",
        processed:false,
        elec: 50.2
      },
      {
        code:"A100640819DA3B",
@@ -97,7 +113,9 @@
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域"
        warn:"未在电子围栏区域",
        processed:false,
        elec: 50.2
      },
      {
        code:"A100640819DA3B",
@@ -106,7 +124,9 @@
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域"
        warn:"未在电子围栏区域",
        processed:false,
        elec: 50.2
      }]
    }
  },

 src/pages/shuohuangMonitorAnalyze/components/leftNav.vue

@@ -1,8 +1,14 @@
<template>
  <div class="left-nav">
    <h1>
      <img class="icon" :src="`${publicPath}images/shuohuang/railroad.png`" style="height: 40px;" />
      <span v-show="!isCollapse" style="padding-left: 6px;">朔黄铁路机辆分公司</span>
      <img
        class="icon"
        :src="`${publicPath}images/shuohuang/railroad.png`"
        style="height: 40px"
      />
      <span v-show="!isCollapse" style="padding-left: 6px"
        >朔黄铁路机辆分公司</span
      >
    </h1>
    <el-menu
      class="el-menu-vertical-demo"
@@ -55,17 +61,16 @@
</template>

<script>

//import railroadImg from '/images/shuohuang/railroad.png';
export default {
  props: {
    isCollapse: {
      type: Boolean,
      default: true
      default: true,
    },
    menuChange: {
      type: Function
    }
      type: Function,
    },
  },
  computed: {
    isAdmin() {
@@ -82,8 +87,8 @@
  data() {
    return {
      publicPath: process.env.BASE_URL,
      activeIndex: 'guideIndex'
    }
      activeIndex: "guideIndex",
    };
  },
  mounted() {
    // if (this.isAdmin) {
@@ -92,24 +97,20 @@
    //     this.activeIndex = sessionStorage.getItem('leftNavAct');
    //   }
    // }
    this.activeIndex = this.isAdmin ? 'guideIndex' : 'searchForVideoAnalyze';
    this.activeIndex = this.isAdmin ? "guideIndex" : "searchForVideoAnalyze";

    this.$emit('menuChange', this.activeIndex);
    this.$emit("menuChange", this.activeIndex);
  },
  methods: {
    handleSelect(index, indePath) {
      this.activeIndex = index;
      sessionStorage.setItem('leftNavAct', this.activeIndex);
      this.$emit('menuChange', index);
      sessionStorage.setItem("leftNavAct", this.activeIndex);
      this.$emit("menuChange", index);
    },
    handleOpen() {

    handleOpen() {},
    handleClose() {},
    },
    handleClose() {

    }
  }
}
};
</script>

<style lang="scss">

 src/pages/shuohuangMonitorAnalyze/index/App.vue

@@ -12,12 +12,19 @@
      </div>
      <div class="container">
        <!-- é¦–页 -->
        <GuideIndex ref="GuideIndex" v-if="actPage=='guideIndex'"></GuideIndex>
        <searchForVideoAnalyze v-if="actPage=='searchForVideoAnalyze'"></searchForVideoAnalyze>
        <GuideIndex
          ref="GuideIndex"
          v-if="actPage == 'guideIndex'"
        ></GuideIndex>
        <searchForVideoAnalyze
          v-if="actPage == 'searchForVideoAnalyze'"
        ></searchForVideoAnalyze>
        <memberManage v-if="actPage=='memberManage'"></memberManage>
        <taskManage v-if="actPage=='taskManage'"></taskManage>
        <transferMemo v-if="actPage=='transferMemo'"></transferMemo>
        <transferDeviceManage v-if="actPage=='transferDeviceManage'"></transferDeviceManage>
        <transferDeviceManage
          v-if="actPage == 'transferDeviceManage'"
        ></transferDeviceManage>
        <configManage v-if="actPage=='configManage'"></configManage>
        <lkg v-if="actPage=='lkgManage'"></lkg>
      </div>
@@ -26,16 +33,16 @@
</template>

<script>
import Lkg from '../components/lkgManage'
import TopNav from '../components/topNav';
import LeftNav from '../components/leftNav';
import GuideIndex from '../components/guideIndex';
import TaskManage from '../components/taskManage';
import TransferMemo from '../components/transferMemo';
import ConfigManage from '../components/configManage';
import MemberManage from '../components/memberManage';
import TransferDeviceManage from '../components/transferDeviceManage';
import SearchForVideoAnalyze from '../components/searchForVideoAnalyze';
import Lkg from "../components/lkgManage";
import TopNav from "../components/topNav";
import LeftNav from "../components/leftNav";
import GuideIndex from "../components/guideIndex";
import TaskManage from "../components/taskManage";
import TransferMemo from "../components/transferMemo";
import ConfigManage from "../components/configManage";
import MemberManage from "../components/memberManage";
import TransferDeviceManage from "../components/transferDeviceManage";
import SearchForVideoAnalyze from "../components/searchForVideoAnalyze";

export default {
  components: {
@@ -48,20 +55,20 @@
    TransferMemo,
    TransferDeviceManage,
    ConfigManage,
    GuideIndex
    GuideIndex,
  },
  data() {
    return {
      isCollapse: false,
      actPage: 'guideIndex',
    }
      actPage: "guideIndex",
    };
  },
  mounted() {
    // this.actPage = 'guideIndex';
  },
  methods: {
    markNav() {
      sessionStorage.setItem('actPage', this.actPage);
      sessionStorage.setItem("actPage", this.actPage);
      this.menuChange(this.actPage);
    },
    toggleCollapse() {
@@ -69,20 +76,23 @@
      //通知当前活动页table(如果有) doLayout
    },
    menuChange(path) {
      if (path=='guideIndex') {
      if (path == "guideIndex") {
        // this.$refs.GuideIndex.refreshShoubiNum()
      }
      if (path == 'taskscreen') {
      if (path == "taskscreen") {
        //window.location.href = window.location.href+'taskscreen/index.html'
        window.open(window.location.href + 'taskscreen/index.html', '_blank')
      } else if (path == 'hiddendangerscreen') {
        window.open(window.location.href + "taskscreen/index.html", "_blank");
      } else if (path == "hiddendangerscreen") {
        //window.location.href = window.location.href+'hiddendangerscreen/index.html'
        window.open(window.location.href + 'hiddendangerscreen/index.html', '_blank')
        window.open(
          window.location.href + "hiddendangerscreen/index.html",
          "_blank"
        );
      }
      this.actPage = path;
    }
  }
}
    },
  },
};
</script>

<style lang="scss">

 vue.config.js