最近做了一个需求，是关于故障在地图标记的，这里记录一下。
-
目录结构如下：
-
效果图如下
-
components组件内容里三个组件，cmap,warningArr, warningnum,下面一次列出内容
cmap.vue
<template>
<div class="cmap-con">
<div class="cmap-body">
<ul class="tip">
<li class="tip-item">
<span class="one"></span>未跟进
</li>
<li class="tip-item">
<span class="two"></span>跟进中
</li>
<li class="tip-item">
<span class="three"></span>已解决
</li>
</ul>
<img :src="resetImage" class="img-con" @click="resetMap()" />
<div id="cMap"></div>
</div>
</div>
</template>
<script>
export default {
props: ["carouselInitList"],
data(){
return {
map: null,
viaMarker: null,
markers: [],
marckStyle: {
风险: {
0: {
image: require("@/assets/img/bigfaultWarning/风险-0.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
},
1: {
image: require("@/assets/img/bigfaultWarning/风险-1.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
},
2: {
image: require("@/assets/img/bigfaultWarning/风险-2.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
},
3: {
image: require("@/assets/img/bigfaultWarning/风险-1.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
},
4: {
image: require("@/assets/img/bigfaultWarning/风险-1.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
},
5: {
image: require("@/assets/img/bigfaultWarning/风险-1.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
},
6: {
image: require("@/assets/img/bigfaultWarning/风险-1.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
}
},
国标: {
0: {
image: require("@/assets/img/bigfaultWarning/国标-0.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
},
1: {
image: require("@/assets/img/bigfaultWarning/国标-1.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
},
2: {
image: require("@/assets/img/bigfaultWarning/国标-2.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
},
3: {
image: require("@/assets/img/bigfaultWarning/国标-1.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
},
4: {
image: require("@/assets/img/bigfaultWarning/国标-1.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
},
5: {
image: require("@/assets/img/bigfaultWarning/国标-1.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
},
6: {
image: require("@/assets/img/bigfaultWarning/国标-1.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
}
},
威标: {
0: {
image: require("@/assets/img/bigfaultWarning/威标-0.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
},
1: {
image: require("@/assets/img/bigfaultWarning/威标-1.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
},
2: {
image: require("@/assets/img/bigfaultWarning/威标-2.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
},
3: {
image: require("@/assets/img/bigfaultWarning/威标-1.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
},
4: {
image: require("@/assets/img/bigfaultWarning/威标-1.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
},
5: {
image: require("@/assets/img/bigfaultWarning/威标-1.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
},
6: {
image: require("@/assets/img/bigfaultWarning/威标-1.png"),
imageSize: new AMap.Size(12, 14.5),
size: new AMap.Size(12, 14.5)
},
}
},
infoWindow: null,
resetImage: require("../../../assets/img/bigfaultWarning/dingwei-5.png")
}
},
methods: {
drawMap(){
// 创建地图实例
this.map = new AMap.Map("cMap", {
zoom: 2.6,
resizeEnable: true,
center: [104.34, 34.312316],
});
this.map.setMapStyle("amap://styles/34cc8111bfbee05b8d29bbe6cebabc20");
this.getbianjie()
},
initMark(carouselInitList) {
let vm = this;
if (vm.infoWindow) {
vm.infoWindow.close();
}
vm.map.remove(this.markers);
var markersList = carouselInitList;
var markers = []; //province见Demo引用的JS文件
for (var i = 0; i < markersList.length; i += 1) {
if (!markersList[i].eventGps) {
continue;
}
var marker;
var icon = new AMap.Icon(
vm.marckStyle[markersList[i].type][markersList[i].eventStatus]
);
marker = new AMap.Marker({
icon: icon,
position: markersList[i].eventGps,
offset: new AMap.Pixel(-1, -2),
zIndex: 999,
map: this.map,
extData: {
id: markersList[i].key
}
});
// 以上代码为将所有符合条件的数据做标记
//以下代码是给每个标记加上点击事件
marker.on("click", (e) => {
let id = e.target.getExtData().id
vm.$emit("cmapClick", id);
});
markers.push(marker);
}
// 以上拿到所有的标记对象
this.markers = markers;
},
// 点击某个标记标记变大，其他恢复以前大小。
tagMark(id) {
let vm = this
for (let i = 0; i < vm.markers.length; i++) {
let dataId = vm.markers[i].getExtData().id;
let targetMarker = {}
targetMarker = vm.markers[i]
let target = vm.carouselInitList.find(v => v.key == dataId)
let obj = JSON.parse(
JSON.stringify(vm.marckStyle[target.type][target.eventStatus])
);
if (targetMarker) {
if(dataId == id){
obj.imageSize = new AMap.Size(25, 30);
obj.size = new AMap.Size(25, 30);
targetMarker.setzIndex(1000)
targetMarker.setOffset(new AMap.Pixel(-1, -2));
targetMarker.setIcon(new AMap.Icon(obj));
let content = `<div style="font-size:2px";>` + target.eventAddress + `</div>`
vm.infoWindow = new AMap.InfoWindow({
anchor: "left-center",
content: content
});
vm.infoWindow.open(vm.map, target.eventGps);
vm.map.setZoomAndCenter(5, target.eventGps);
}else {
obj.imageSize = new AMap.Size(12, 14.5);
obj.size = new AMap.Size(12, 14.5);
targetMarker.setOffset(new AMap.Pixel(-1, -2));
targetMarker.setzIndex(999)
targetMarker.setIcon(new AMap.Icon(obj));
}
}
}
},
getbianjie() {
let vm = this;
AMapUI.load(["ui/geo/DistrictExplorer", "lib/$"], function(
DistrictExplorer,
$
) {
//创建一个实例
var districtExplorer = (window.districtExplorer = new DistrictExplorer({
eventSupport: true, //打开事件支持
map: vm.map
}));
//绘制某个区域的边界
function renderAreaPolygons(areaNode) {
// this.map.setBounds(areaNode.getBounds(), null, null, true);
//清除已有的绘制内容
districtExplorer.clearFeaturePolygons();
//绘制子区域
districtExplorer.renderSubFeatures(areaNode, function(feature, i) {
var fillColor = "#172a3b";
var strokeColor = "#69cefc";
return {
cursor: "default",
bubble: true,
strokeColor: strokeColor, //线颜色
strokeOpacity: 2, //线透明度
strokeWeight: 1, //线宽
fillColor: fillColor, //填充色
fillOpacity: 0.9 //填充透明度
};
});
}
//切换区域后刷新显示内容
function refreshAreaNode(areaNode) {
districtExplorer.setHoverFeature(null);
renderAreaPolygons(areaNode);
}
//切换区域
function switch2AreaNode(adcode, callback) {
loadAreaNode(adcode, function(error, areaNode) {
if (error) {
if (callback) {
callback(error);
}
return;
}
refreshAreaNode(areaNode);
if (callback) {
callback(null, areaNode);
}
});
}
//加载区域
function loadAreaNode(adcode, callback) {
districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
if (error) {
if (callback) {
callback(error);
}
return;
}
if (callback) {
callback(null, areaNode);
}
});
}
//全国
switch2AreaNode(100000);
});
this.initMark(this.carouselInitList)
},
resetMap(){
this.map.setZoomAndCenter(2.6, [105.34, 31.312316]);
}
},
mounted() {
this.drawMap();
},
}
</script>
<style lang="scss">
#cMap {
.amap-info {
background-color: rgba(0, 0, 0, 0.5);
// border: 1px solid #07f1ff;
border-radius: 0.156vw;
.amap-info-content {
background-color: rgba(0, 0, 0, 0.5);
}
}
}
</style>
<style lang="scss">
.amap-info-contentContainer {
// height: 30px;
// line-height: 30px;
// background: rgba(255, 255, 255, 1);
box-shadow: none;
// border-radius: 4px;
font-size: 12px;
text-align: center;
color: #fff;
.amap-info-content {
border: none;
box-shadow: none;
200px;
}
.amap-info-close {
visibility: hidden;
}
.amap-info-sharp {
display: none;
// background-color: transparent;
}
}
</style>
<style lang="scss" scoped>
#cMap {
position: relative;
top: -80px;
perspective: 150;
100%;
// padding-bottom: 100%;
height: 560px;
background: none !important;
}
.cmap-con {
// height: 780px;
padding: 20px 20px 0 20px;
position: relative;
.cmap-body {
background-image: url(../../../assets/img/bigfaultWarning/背景.png);
background-size: 100% 100%;
border-radius: 7px;
::v-deep.amap-logo {
display: none!important;
visibility: hidden!important;
opacity:0 !important;
}
::v-deep.amap-copyright {
display: none!important;
visibility: hidden!important;
opacity:0 !important;
}
.tip {
color: #5aaed8;
font-size: 12px;
padding: 20px 60px 0;
position: relative;
z-index: 2000;
.tip-item {
margin-top: 20px;
.one {
display: inline-block;
15px;
height: 10px;
background-image: linear-gradient(#ff1f38, #fed1c5);
border-radius: 2px;
margin-right: 15px;
}
.two {
display: inline-block;
15px;
height: 10px;
background-image: linear-gradient(#fba980, #f6cb6b);
border-radius: 2px;
margin-right: 15px;
}
.three {
display: inline-block;
15px;
height: 10px;
background-image: linear-gradient(#16cff3, #8ffca0);
border-radius: 2px;
margin-right: 15px;
}
}
}
.img-con {
position: absolute;
padding: 0 40px 20px 40px;
bottom:10px;
37px;
height: 37px;
z-index: 2000;
}
}
}
</style>
warningArr.vue
<template>
<div class="waringarr-con">
<!-- <div class="warningarr-cascader"> -->
<van-field
v-model="fieldValue"
is-link
readonly
label="故障类型"
placeholder="请选择故障类型"
@click="show = true"
class="field-select"
/>
<van-popup v-model="show" round position="bottom">
<van-cascader
v-model="cascaderValue"
title="请选择故障类型"
:options="options"
@close="show = false"
@finish="onFinish"
/>
</van-popup>
<div class="warningarr-list">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell
v-for="(carousel,index) in carouselInitList2"
:key="index"
:class="{'list-cell' : true,
one:carousel.type=='风险',two:carousel.type=='国标',the:carousel.type=='威标' }"
@click="handleClick(carousel, index)">
<!-- {{carousel.isHeight}}{{carousel.eventId}} -->
<div :class="{'list-row': true, 'active': carousel.isHeight}">
<div class="list-col1">
<div class="title-con">
<img
v-if="carousel.type=='国标'&&carousel.eventStatus=='0'"
src="../../../assets/img/bigfaultWarning/国标-0.png"
alt
/>
<img
v-if="carousel.type=='国标'&&(carousel.eventStatus=='1' || carousel.eventStatus=='3' || carousel.eventStatus=='4' || carousel.eventStatus=='5' || carousel.eventStatus=='6')"
src="../../../assets/img/bigfaultWarning/国标-1.png"
alt
/>
<img
v-if="carousel.type=='国标'&&carousel.eventStatus=='2'"
src="../../../assets/img/bigfaultWarning/国标-2.png"
alt
/>
<img
v-if="carousel.type=='威标'&&carousel.eventStatus=='0'"
src="../../../assets/img/bigfaultWarning/威标-0.png"
alt
/>
<img
v-if="carousel.type=='威标'&&(carousel.eventStatus=='1' || carousel.eventStatus=='3' || carousel.eventStatus=='4' || carousel.eventStatus=='5' || carousel.eventStatus=='6')"
src="../../../assets/img/bigfaultWarning/威标-1.png"
alt
/>
<img
v-if="carousel.type=='威标'&&carousel.eventStatus=='2'"
src="../../../assets/img/bigfaultWarning/威标-2.png"
alt
/>
<img
v-if="carousel.type=='风险'&&carousel.eventStatus=='0'"
src="../../../assets/img/bigfaultWarning/风险-0.png"
alt
/>
<img
v-if="carousel.type=='风险'&& (carousel.eventStatus=='1' || carousel.eventStatus=='3' || carousel.eventStatus=='4' || carousel.eventStatus=='5' || carousel.eventStatus=='6')"
src="../../../assets/img/bigfaultWarning/风险-1.png"
alt
/>
<img
v-if="carousel.type=='风险'&&carousel.eventStatus=='2'"
src="../../../assets/img/bigfaultWarning/风险-2.png"
alt
/>
<span class="title-col">{{carousel.faultCategoryName}}</span>
</div>
<div>
<div class="warn-con">
<div class="img-con">
<img
width="10"
height="10"
src="../../../assets/img/bigfaultWarning/v.png"
/>
</div>
<span class="warn-detail">{{carousel.vin}}</span>
</div>
<div class="warn-con">
<div class="img-con">
<img
width="18"
height="18"
:src="carousel.weatherSrc"
/>
</div>
<span class="warn-detail">{{carousel.temp}}℃,{{carousel.condTxt}}</span>
</div>
<div class="warn-con">
<div class="img-con">
<img
width="13"
height="13"
src="../../../assets/img/bigfaultWarning/time.png"
/>
</div>
<span class="warn-detail">{{carousel.updateTime}}</span>
</div>
</div>
</div>
<div class="list-col2">
<div class="title-con">
<img
src="../../../assets/img/bigfaultWarning/adr.png"
alt
/>
<span class="title-col">{{carousel.eventCity}}</span>
</div>
</div>
</div>
</van-cell>
</van-list>
</div>
</div>
</template>
<script>
import bus from '@/config/eventBus.js'
import api from "@/config/services/faultWaring.js";
export default {
data(){
return {
fieldValue: '',
cascaderValue: '',
show: false,
finished: false,
list: [],
loading: false,
pageNum: 1,
carouselInitList2: [],
}
},
props: [
"carouselInitList",
"options"
],
watch: {
carouselInitList(nv) {
this.carouselInitList2 = nv
}
},
methods: {
// 点击故障块信息
handleClick(currentItem, index) {
this.currentItem = currentItem;
this.carouselInitList2.forEach((element, i) => {
if(element.key == currentItem.key){
this.$set(this.carouselInitList2[i], 'isHeight', true)
}else {
this.$set(this.carouselInitList2[i], 'isHeight', false)
}
})
this.$emit("clickFaultInfo", currentItem);
},
// 全部选项选择完毕后，会触发 finish 事件
onFinish({ selectedOptions }) {
this.show = false;
let tag = ''
let type = ''
if(selectedOptions.length > 1){
type = selectedOptions[0].value
if(selectedOptions[1].value == 'qb'){
tag = ''
this.fieldValue = selectedOptions[0].text
}else {
tag = selectedOptions[1].value
this.fieldValue = selectedOptions.map((option) => option.text).join('/');
}
}else {
this.fieldValue = selectedOptions[0].text
type = ''
tag = ''
}
let obj = {
type: type,
tag: tag
}
this.$emit("selectFault", obj)
},
onLoad(){
if(this.carouselInitList && this.carouselInitList.length > 0){
this.loading = false
this.finished = true
}
},
},
created(){
this.carouselInitList2 = this.carouselInitList
}
}
</script>
<style lang="scss" scoped>
.waringarr-con {
padding: 20px;
.van-field {
background:#0A101F;
border-radius: 7px;
margin-bottom: 3px;
::v-deep.van-field__label {
color: #09adff !important;
font-size: 17px;
}
::v-deep.van-field__control {
color: #09adff;
font-size: 14px;
}
::v-deep.van-cell__right-icon {
color: #09adff;
}
::placeholder {
color: #09adff;
font-weight: 400;
}
}
.van-cell::after {
border: none;
}
.warningarr-list {
.list-cell {
padding: 0;
background: #040404 !important;
.list-row {
display: flex;
// background:#1f2b4c;
border-radius: 7px;
margin-bottom:20px;
background-size: 100% 100%;
.list-col1 {
padding: 20px;
70%;
.title-con {
display: flex;
align-items: center;
padding-bottom: 30px;
img {
40px;
height: 50px
}
.title-col {
color: #09adff;
font-size: 29px;
padding-left: 20px;
}
}
.warn-con {
display: flex;
align-items: center;
padding-bottom: 10px;
.img-con {
display: flex;
align-items: center;
justify-content: center;
18px;
height: 18px;
}
.warn-detail {
color: #fff;
font-size: 23px;
padding-left: 20px;
}
}
}
.list-col2 {
display: flex;
justify-content: space-between;
flex-direction: column;
text-align: -webkit-center;
29%;
padding: 20px 10px;
.title-con {
display: flex;
align-items: center;
.title-col {
color: #09adff;
font-size: 20px;
padding-left: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
}
::v-deep.van-cell {
padding: 0;
background: #040404 !important;
}
::v-deep.van-cell::after {
border: none;
}
.one {
.list-row {
background-image: url(../../../assets/img/bigfaultWarning/tip_bg-f.png);
}
.active {
background-size: 100% 100%;
background-image: url(../../../assets/img/bigfaultWarning/tip_bg-f-a.png);
}
}
.two {
.list-row {
background-image: url(../../../assets/img/bigfaultWarning/tip_bg-g.png);
}
.active {
background-size: 100% 100%;
background-image: url(../../../assets/img/bigfaultWarning/tip_bg-g-a.png);
}
}
.the {
.list-row{
background-image: url(../../../assets/img/bigfaultWarning/tip_bg-w.png);
}
.active {
background-size: 100% 100%;
background-image: url(../../../assets/img/bigfaultWarning/tip_bg-w-a.png);
}
}
}
}
</style>
warningnum.vue
<template>
<div class="warning-num">
<van-row class="warning-row">
<van-col span="6" class="warning-col1">
<p class="num-count1">{{eventCount[3]}}</p>
<p>今日故障</p>
</van-col>
<van-col span="8" class="warning-col">
<p class="num-text" >已跟进故障 <span class="num-count" >{{eventCount[1]}}</span></p>
<p>已解决故障 <span class="num-count">{{eventCount[2]}}</span></p>
</van-col>
<van-col span="10" class="warning-col">
<p class="num-text">剩余未更进故障 <span class="num-count" >{{eventCount[0]}}</span></p>
<p>未更进故障总数 <span class="num-count"> {{eventCount[4]}}</span></p>
</van-col>
</van-row>
</div>
</template>
<script>
export default {
props: ["eventCount"],
}
</script>
<style lang="scss" scoped>
.warning-num {
padding: 20px 20px 0 20px;
}
.warning-row {
display: flex;
align-items: center;
padding: 25px 15px;
background:#141E38;
color: #fffeff;
border-radius: 7px;
font-size: 24px;
font-family: 'PingFangSC-Regular';
font-weight: 'Regular';
.warning-col {
white-space: nowrap;
.num-text {
padding-bottom: 30px;
}
.num-count {
font-size: 36px;
margin-left: 20px;
}
}
.warning-col1 {
text-align: center;
.num-count1 {
font-size: 36px;
}
}
}
</style>
faultWaring.vue
<template>
<div>
<warningnum :eventCount="eventCount"></warningnum>
<cmap
ref="cmap"
v-if="carouselInitList && carouselInitList.length > 0"
@cmapClick="cmapClick"
:carouselInitList="carouselInitList"
></cmap>
<warningarr
v-if="carouselInitList && options && carouselInitList.length > 0 && options.length > 1"
:carouselInitList="carouselInitList"
:carouselItem="carouselItem"
:options="options"
@clickFaultInfo="clickFaultInfo"
@selectFault="selectFault"></warningarr>
</div>
</template>
<script>
import warningnum from '@/views/Bigscreen/components/warningnum.vue'
import cmap from '@/views/Bigscreen/components/cmap.vue'
import warningarr from '@/views/Bigscreen/components/warningArr.vue'
import faultWarningList from './faultWarningList.json'
import faultNews from './faultNews.json'
import api from "@/config/services/faultWaring.js";
export default {
components: {
warningnum,
cmap,
warningarr
},
data() {
return {
eventCount: {},
carouselItem: {},
currentItem: {},
carouselInitList: [],
options: [{
text: '全部',
value: 'qb'
}],
ifGetNews: false,
newFaultNews: [],
myAudioAdd: require("@/assets/img/bigfaultWarning/warn.mp3"),
fault: {},
userInfo: {}
}
},
methods: {
clickFaultInfo(currentItem){
let id = currentItem.key
this.$refs.cmap.tagMark(id);
this.carouselItem = {}
},
async getList(obj){
let parmas = obj
await api.getList(parmas).then(res => {
console.log("getListres", res)
// let data = faultWarningList.data
let data = res.data
this.eventCount = data.eventCount;
let list = data.eventList
this.eventCount[3] =
parseInt(this.eventCount[0]) +
parseInt(this.eventCount[1]) +
parseInt(this.eventCount[2]);
if(list.length){
this.carouselInitList = list.map(v => {
v.key = v.eventId
let weather = v.weather ? JSON.parse(v.weather) : {}
if(weather.condCode) {
v.weatherSrc = require("@/assets/img/weather/" + weather.condCode + ".png")
}
v.temp = weather.nowTmp
v.condTxt = weather.condTxt;
v.rainfall = weather.nowPcpn;
v.isHeight = false
v.eventGps = v.eventGps ? v.eventGps.split(",") : "";
if (v.eventGps) {
v.eventGps[0] = v.eventGps[0] - 0;
v.eventGps[1] = v.eventGps[1] - 0;
}
return v
})
}
})
// this.initcarouselList()
},
getCategoriesNameNew(){
let typeObj = {
国标: "gb",
威标: "wb",
风险: "yj",
售后其他: "xx"
};
api.getCategoriesNameNew().then(res => {
let data = res.data.data
for(let n in data){
let obj = {}
obj.text = n
obj.value = typeObj[n]
obj.children = []
if(obj.text != '售后其它'){
let obj3 = {text: '全部', value: 'qb'}
obj.children.push(obj3)
}
for(let m in data[n]){
let obj2 = {}
obj2.text = data[n][m].title
obj2.value = data[n][m].key
obj.children.push(obj2)
}
this.options.push(obj)
}
});
},
async selectFault(fault){
this.fault = fault
await this.getList(fault)
this.$refs.cmap.initMark(this.carouselInitList)
this.$refs.cmap.resetMap()
},
cmapClick(id){
this.carouselItem = {}
this.carouselInitList.forEach((v, i) => {
if(v.key == id){
let obj = v
obj.isHeight = true
this.carouselInitList.splice(i, 1)
this.carouselInitList.unshift(obj)
}else {
v.isHeight = false
}
})
this.$refs.cmap.tagMark(id);
},
playAudio(){
// if (type == 1) {
// this.$nextTick(() => {
let audio = new Audio();
audio.src = this.myAudioAdd;
audio.play();
// });
// }
// else {
// // document.getElementById("myAudioUpdate").play();
// let audio = new Audio();
// audio.src = this.myAudioUpdate;
// audio.play();
// }
},
setFaultNews(newFaultNews){
let vm = this
let n=0;
let time2 = setInterval(function(){
//播放声音
let v = newFaultNews[n]
v.key = v.eventId
// let weather = JSON.parse(v.weather) ? JSON.parse(v.weather) : {}
let weather = v.weather
if(weather.condCode) {
v.weatherSrc = require("@/assets/img/weather/" + weather.condCode + ".png")
}
v.temp = weather.nowTmp
v.condTxt = weather.condTxt;
v.rainfall = weather.nowPcpn;
// v.isHeight = true
vm.$set(v, 'isHeight', true)
v.eventGps = v.eventGps ? v.eventGps.split(",") : "";
if (v.eventGps) {
v.eventGps[0] = v.eventGps[0] - 0;
v.eventGps[1] = v.eventGps[1] - 0;
}
vm.carouselInitList.unshift(v)
vm.carouselInitList[1].isHeight = false
n+=1;
if(n >= newFaultNews.length){
clearInterval(time2)
}
},2000)
},
async handPushEvent(){
// this.newFaultNews = [1,2,3,4,5,6,7,8,9,10,11]
await api.handPushEvent().then(res => {
// console.log("handPushEventres", res)
if(res.code == 200){
this.newFaultNews = res.data
if(this.newFaultNews.length > 0){
this.playAudio()
this.setFaultNews(this.newFaultNews)
}
console.log("this.newFaultNews", this.newFaultNews)
}
})
},
// webSockit() {
// let vm = this;
// vm.noticeSocketLink = new WebSocket('ws://10.2.65.2:8191/wseventTest');
// vm.noticeSocketLink.onopen = function(evt) {
// };
// vm.noticeSocketLink.onmessage = function(evt) {
// if (evt.data != "{}") {
// let data = JSON.parse(evt.data);
// console.log("sscsc",data)
// let v = {
// eventAddress:"四川省成都市龙泉驿区龙泉街道天盛花苑",
// eventId:2071,
// eventGps:"104.25476950295838,30.549802091401308",
// faultCategory:"VCU_MotorDTC_list_11",
// updateTime:"2021-04-23 12:12:34",
// type:"威标",
// faultDate:"2021-04-23 11:29:59",
// faultCategoryName:"霍尔故障",
// eventCity:"成都市",
// eventStatus:0,
// eventProvince:"四川省",
// weather:"{"condTxt":"多云","condCode":"101","nowTmp":"24","nowPcpn":"0.0"}",
// vin:"LL227409XJW113251"
// }
// v.key = v.eventId
// let weather = v.weather ? JSON.parse(v.weather) : {}
// if(weather.condCode) {
// v.weatherSrc = require("@/assets/img/weather/" + weather.condCode + ".png")
// }
// v.temp = weather.nowTmp
// v.condTxt = weather.condTxt;
// v.rainfall = weather.nowPcpn;
// v.isHeight = true
// v.eventGps = v.eventGps ? v.eventGps.split(",") : "";
// if (v.eventGps) {
// v.eventGps[0] = v.eventGps[0] - 0;
// v.eventGps[1] = v.eventGps[1] - 0;
// }
// vm.carouselInitList.unshift(v)
// vm.$refs.cmap.tagMark(v);
// console.log("this.carouselInitList",vm.carouselInitList)
// }
// };
// vm.noticeSocketLink.onclose = function(evt) {};
// },
async getUser(){
await api.getUser().then((res) => {
console.log("user", res)
this.userInfo = res.data.data.item;
}).catch((err) => this.$toast("你没有权限!"))
},
async getToken(){
let params = {
userName: this.userInfo.userName
}
await api.getToken(params).then((res => {
if (res.status == 200) {
let token = res.headers.authorization;
console.log(token)
localStorage.setItem('tokens', token);
}
})
)
}
},
async created(){
await this.getUser()
await this.getToken()
let obj = {type: '', tag: ''}
this.getList(obj)
this.getCategoriesNameNew()
let vm = this
this.timer1 = setInterval(async () => {
vm.fault = vm.fault ? vm.fault : obj
await vm.handPushEvent()
await vm.getList(vm.fault)
vm.$refs.cmap.initMark(vm.carouselInitList)
}, 20000);
// this.webSockit();
},
beforeCreate() {
document.querySelector('body').setAttribute('style', 'background: #040404')
},
beforeDestroy() {
document.querySelector('body').removeAttribute('style')
if(this.timer1){
clearInterval(this.timer1);
}
},
}
</script>