|
@@ -1,218 +1,494 @@
|
|
|
<template>
|
|
|
<div class="home">
|
|
|
- <div class="title">
|
|
|
- <div class="logo">
|
|
|
- <img src="../../assets/image/title.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="yyInfo" @click="$router.push('/subscribe-info')">预约信息</div>
|
|
|
- </div>
|
|
|
- <div class="sh">第20届上海国际社会</div>
|
|
|
- <div class="gg">公共安全展览会</div>
|
|
|
- <div class="ggEl">The 20th Shanghai CPSE Expo</div>
|
|
|
- <div class="blh">暨上海国际警用及安防无人系统博览会</div>
|
|
|
- <div class="yqh">邀请函</div>
|
|
|
- <div class="yqhEl">INVITATION</div>
|
|
|
- <div class="ghgl">永天科技诚挚地恭候您的光临!</div>
|
|
|
- <van-divider dashed class="yyfs"><span>预约方式</span></van-divider>
|
|
|
- <div class="yyfsEl">the appointment mode</div>
|
|
|
- <div class="formBox">
|
|
|
- <van-form @submit="onSubmit" validate-trigger="onSubmit" :submit-on-enter="false" ref="formT">
|
|
|
- <van-field v-model="form.name" name="姓名" label="姓名*" type="text" placeholder="请输入你的姓名" :rules="[{ required:true, pattern: /^.{1,10}$/, message: '请输入姓名,不得超过10字' }]"/>
|
|
|
- <span class="infoT">*请留真实信息,以便商务验证和联系您</span>
|
|
|
- <van-field v-model="form.phone" name="手机*" label="手机" type="tel" placeholder="请输入你的手机号" :rules="[{ required:true, pattern: /^1[345678]\d{9}$/, message: '请输入正确的手机号' }]"/>
|
|
|
- <van-field v-model="form.smsCode" name="验证码*" label="验证码" type="tel" placeholder="请输入验证码" :rules="[{ required:true, pattern: /^\d{6}$/, message: '请输入正确的验证码' }]">
|
|
|
- <template #button>
|
|
|
- <van-loading v-if="smsCodeLoading" color="#1989fa" />
|
|
|
- <span class="hqyzm" v-else @click="getsmsCode">{{showsmsCode?'获取验证码':timesmsCode + 's'}}</span>
|
|
|
- </template>
|
|
|
- </van-field>
|
|
|
- <van-field v-model="form.companyName" name="单位名称*" label="单位名称" type="text" placeholder="请输入单位名称" :rules="[{ required:true, pattern: /^.{0,50}$/, message: '内容不得超过50字' }]"/>
|
|
|
- <van-field v-model="form.post" name="职务" label="职务" type="text" placeholder="请输入单位职务" :rules="[{ required:false, pattern: /^.{0,30}$/, message: '内容不得超过30字' }]"/>
|
|
|
- <van-field readonly clickable label="省份" :value="form.sf" placeholder="选择省份" @click="showPicker = true"/>
|
|
|
- <van-popup v-model="showPicker" round position="bottom">
|
|
|
- <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
|
|
|
- </van-popup>
|
|
|
-
|
|
|
- <van-field readonly clickable name="dateOfVisit" :value="form.dateOfVisit" label="到访日期" placeholder="点击选择到访日期" @click="showTimePicker = true" :rules="[{ required:true, message: '请选择到访日期' }]"/>
|
|
|
- <van-popup v-model="showTimePicker" position="bottom">
|
|
|
- <van-datetime-picker type="datetime" @confirm="onConfirmTime" @cancel="showTimePicker = false" :min-date="minDate" :max-date="maxDate" />
|
|
|
- </van-popup>
|
|
|
-
|
|
|
- <van-field readonly clickable label="随行人数" :value="form.accompanys" placeholder="选择随行人数" validate-trigger="onSubmit" @click="showacCompany = true"/>
|
|
|
- <van-popup v-model="showacCompany" round position="bottom">
|
|
|
- <van-picker show-toolbar :columns="columns2" @cancel="showacCompany = false" @confirm="onConfirmCompany" />
|
|
|
- </van-popup>
|
|
|
-
|
|
|
- <div style="margin: 16px;">
|
|
|
- <van-button plain round block type="info" native-type="submit">立即预约</van-button>
|
|
|
+ <div class="headerBox">
|
|
|
+ <div class="headerLeft">
|
|
|
+ <div>{{ dateDay }}</div>
|
|
|
+ <div class="time">{{ dataTime }}</div>
|
|
|
+ <div class="week">{{ timeWeek }}</div>
|
|
|
+ <div class="address">{{$store.state.weaterRes.aqiDetail.area}}</div>
|
|
|
+ <div class="weather">
|
|
|
+ <img :src="$store.state.weaterRes.weather_pic || ''" alt="" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ {{ $store.state.weaterRes.weather || "" }}
|
|
|
+ {{ $store.state.weaterRes.temperature || "" }}℃
|
|
|
</div>
|
|
|
- </van-form>
|
|
|
- </div>
|
|
|
- <van-divider dashed class="yyfs" style="margin-top:50px;"><span>活动信息</span></van-divider>
|
|
|
- <div class="yyfsEl">the Activity information</div>
|
|
|
- <div class="hdxxInfo">
|
|
|
- <div class="hdxxInfoLable"><span></span>时间:2021.8.11-8.13</div>
|
|
|
- <div class="hdxxInfoLable"><span></span>上海·世博馆<i class="boldColor">1</i> 号馆 展位号<i class="boldColor">E10</i></div>
|
|
|
- <div class="hdxxInfoLable"><span></span>上海浦东新区国展路1099号</div>
|
|
|
- </div>
|
|
|
- <div class="bottomBox">
|
|
|
- <div class="bottomBoxL">
|
|
|
- <div class="title1">入场须知:</div>
|
|
|
- <div class="title2">* 预约成功后将通过手机短信及电话回访的方式确认,请保持通话顺畅</div>
|
|
|
- <div class="title3">* 如有疑问请咨询 :<br/> 电话:021-65376655<br/> 邮箱:yujia.chi@chinausky.com</div>
|
|
|
</div>
|
|
|
- <div class="bottomBoxR">
|
|
|
- <div class="bottomBoxRT">FOLLOW US<br> <span>关注我们获取更多咨询</span></div>
|
|
|
- <img src="../../assets/image/ewm.png" alt="">
|
|
|
+ <div class="headerCenter"></div>
|
|
|
+ <div class="headerRight">
|
|
|
+ <div class="boxBgRight">
|
|
|
+ <img src="../../assets/image/headerIcon.png" alt="" />巡检维保
|
|
|
+ </div>
|
|
|
+ <div>当前待处理:5</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <van-overlay :show="showSuccessBox">
|
|
|
- <div class="successBox">
|
|
|
- <div class="iconSuccess">
|
|
|
- <img src="../../assets/image/icon.png" alt="">预约成功!
|
|
|
+ <div class="contentBox">
|
|
|
+ <div class="mapBox">
|
|
|
+ <div class="Amap" id="mapF"></div>
|
|
|
+ <div class="rightIconBox">
|
|
|
+ <div @click="isTypeMap('isNormal')"><img src="../../assets/image/zcIcon.png" alt="" />正常</div>
|
|
|
+ <span></span>
|
|
|
+ <div @click="isTypeMap('isWarning')"><img src="../../assets/image/jcIcon.png" alt="" />告警</div>
|
|
|
+ <span></span>
|
|
|
+ <div @click="isTypeMap('isLine')"><img src="../../assets/image/lxIcon.png" alt="" />离线</div>
|
|
|
</div>
|
|
|
- <div class="tzxx">我们会在24小时内联系您, 请保持手机通畅。</div>
|
|
|
- <van-button plain round type="info" @click="showSuccessBoxC">知道了</van-button>
|
|
|
</div>
|
|
|
- </van-overlay>
|
|
|
+ <div class="echartsBox">
|
|
|
+ <div>
|
|
|
+ <div class="titleBox">整体情况</div>
|
|
|
+ <div class="echartsBoxList box1">
|
|
|
+ <div class="box1Left">
|
|
|
+ <img src="../../assets/image/jg.png" alt="" />
|
|
|
+ <span>井盖总数(100)</span>
|
|
|
+ </div>
|
|
|
+ <div class="box1Right">
|
|
|
+ <div>井盖在线数:<span class="green">90</span></div>
|
|
|
+ <div>在线率:<span class="green">90%</span></div>
|
|
|
+ <div>离线告警数:<span class="yellow">5</span></div>
|
|
|
+ <div>离线率:<span class="yellow">5%</span></div>
|
|
|
+ <div>异常告警数:<span class="red">5</span></div>
|
|
|
+ <div>告警率:<span class="red">5%</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="titleBox">近7日告警情况统计</div>
|
|
|
+ <div class="echartsBoxList">
|
|
|
+ <div ref="echartD1" class="echartD"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="titleBox">近7日液位情况统计</div>
|
|
|
+ <div class="echartsBoxList">
|
|
|
+ <div ref="echartD2" class="echartD"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="titleBox">告警列表</div>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ height="calc(100% - 38px)"
|
|
|
+ header-row-class-name="tableHeaderClass"
|
|
|
+ row-class-name="rowCalss"
|
|
|
+ fit
|
|
|
+ :highlight-current-row="false"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="设备编号"
|
|
|
+ :min-width="20"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="dpName"
|
|
|
+ label="告警类型"
|
|
|
+ :min-width="20"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="jf"
|
|
|
+ label="负责人"
|
|
|
+ :min-width="20"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="zl"
|
|
|
+ label="联系方式"
|
|
|
+ :min-width="20"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="je"
|
|
|
+ label="位置"
|
|
|
+ :min-width="20"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="time"
|
|
|
+ label="告警时间"
|
|
|
+ :min-width="20"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="time"
|
|
|
+ label="处理状态"
|
|
|
+ :min-width="20"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag
|
|
|
+ :type="scope.$index > 2 ? 'success' : 'danger'"
|
|
|
+ disable-transitions
|
|
|
+ >{{ scope.$index > 2 ? "已处理" : "未处理" }}</el-tag
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// @ is an alias to /src
|
|
|
-import { Notify } from 'vant';
|
|
|
+// import { Notify } from 'vant';
|
|
|
+import * as echarts from "echarts";
|
|
|
+import getDataE1 from "./echarts1";
|
|
|
+import getDataE2 from "./echarts2";
|
|
|
+import AMap from "AMap";
|
|
|
+import xh from "../../assets/image/xh.png";
|
|
|
+import dc from "../../assets/image/dc.png";
|
|
|
+import zcIcon from "../../assets/image/zcIcon.png";
|
|
|
+import jcIcon from "../../assets/image/jcIcon.png";
|
|
|
+import lxIcon from "../../assets/image/lxIcon.png";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- form:{
|
|
|
- name: '',//客户姓名
|
|
|
- phone: '',//手机号
|
|
|
- smsCode: '',//短信验证码
|
|
|
- companyName: '',//单位名称
|
|
|
- post: '',//职位
|
|
|
- sf: '',//省份
|
|
|
- dateOfVisit: '',//到访日期
|
|
|
- accompany: '',//随行人数
|
|
|
- remark: '',//备注
|
|
|
- userId: '',//接待人ID
|
|
|
- userName: '',//接待人姓名
|
|
|
- },
|
|
|
- minDate: new Date(2021, 7, 11 , 0,0,0),
|
|
|
- maxDate: new Date(2021, 7, 13 , 23,59,59),
|
|
|
- showTimePicker: false,
|
|
|
- showacCompany: false,
|
|
|
- showPicker: false,
|
|
|
- showsmsCode:true,
|
|
|
- timesmsCode:60,
|
|
|
- showSuccessBox:false,
|
|
|
- smsCodeLoading:false,
|
|
|
- smsCodeInter:null,
|
|
|
- columns: [
|
|
|
- "北京市",
|
|
|
- "天津市",
|
|
|
- "河北省",
|
|
|
- "山西省",
|
|
|
- "内蒙古自治区",
|
|
|
- "辽宁省",
|
|
|
- "吉林省",
|
|
|
- "黑龙江省",
|
|
|
- "上海市",
|
|
|
- "江苏省",
|
|
|
- "浙江省",
|
|
|
- "安徽省",
|
|
|
- "福建省",
|
|
|
- "江西省",
|
|
|
- "山东省",
|
|
|
- "河南省",
|
|
|
- "湖北省",
|
|
|
- "湖南省",
|
|
|
- "广东省",
|
|
|
- "广西省",
|
|
|
- "海南省",
|
|
|
- "重庆市",
|
|
|
- "四川省",
|
|
|
- "贵州省",
|
|
|
- "云南省",
|
|
|
- "西藏自治区",
|
|
|
- "陕西省",
|
|
|
- "甘肃省",
|
|
|
- "青海省",
|
|
|
- "宁夏回族自治区",
|
|
|
- "新疆维吾尔自治区",
|
|
|
- "台湾省",
|
|
|
- "香港特别行政区",
|
|
|
- "澳门特别行政区",
|
|
|
+ dateDay: "",
|
|
|
+ dataTime: "",
|
|
|
+ timeArea: "",
|
|
|
+ timeWeek: "",
|
|
|
+ weatherObj: {},
|
|
|
+ map: null,
|
|
|
+ echartsBox1: null,
|
|
|
+ echartsBox2: null,
|
|
|
+ dataWeekList: ["一", "二", "三", "四", "五", "六", "七"],
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ name: "0021",
|
|
|
+ dpName: "液位过高",
|
|
|
+ jf: "周文斌",
|
|
|
+ zl: "13571202367",
|
|
|
+ je: "江西省上饶市",
|
|
|
+ time: "15:23:26",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "0022",
|
|
|
+ dpName: "运行异常",
|
|
|
+ jf: "周文斌",
|
|
|
+ zl: "13571202367",
|
|
|
+ je: "江西省上饶市",
|
|
|
+ time: "15:22:00",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "0023",
|
|
|
+ dpName: "液位过高",
|
|
|
+ jf: "周文斌",
|
|
|
+ zl: "13571202367",
|
|
|
+ je: "江西省上饶市",
|
|
|
+ time: "15:21:00",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "0024",
|
|
|
+ dpName: "运行异常",
|
|
|
+ jf: "周文斌",
|
|
|
+ zl: "13571202367",
|
|
|
+ je: "江西省上饶市",
|
|
|
+ time: "15:20:00",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "0025",
|
|
|
+ dpName: "液位过高",
|
|
|
+ jf: "周文斌",
|
|
|
+ zl: "13571202367",
|
|
|
+ je: "江西省上饶市",
|
|
|
+ time: "15:19:00",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "0026",
|
|
|
+ dpName: "运行异常",
|
|
|
+ jf: "周文斌",
|
|
|
+ zl: "13571202367",
|
|
|
+ je: "江西省上饶市",
|
|
|
+ time: "15:18:00",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "0027",
|
|
|
+ dpName: "运行异常",
|
|
|
+ jf: "周文斌",
|
|
|
+ zl: "13571202367",
|
|
|
+ je: "江西省上饶市",
|
|
|
+ time: "15:17:00",
|
|
|
+ },
|
|
|
],
|
|
|
- columns2: ['1-3人', '3-7人', '7人以上'],
|
|
|
- infoForm:{
|
|
|
-
|
|
|
- }
|
|
|
+ lnglats: [
|
|
|
+ { x: 118.004933, y: 28.47108, type: 1 },
|
|
|
+ { x: 118.004205, y: 28.470654, type: 2 },
|
|
|
+ { x: 118.005709, y: 28.471602, type: 3 },
|
|
|
+ ],
|
|
|
+ mapListType:{
|
|
|
+ isNormal: true,
|
|
|
+ isWarning: true,
|
|
|
+ isLine: true,
|
|
|
+ },
|
|
|
+ overlayGroupMap:[]
|
|
|
};
|
|
|
},
|
|
|
- // components: {
|
|
|
- // },
|
|
|
- methods:{
|
|
|
- showSuccessBoxC(){
|
|
|
- this.$router.push({
|
|
|
- path:'/subscribe-info',
|
|
|
- query:{
|
|
|
- ...this.form
|
|
|
- }
|
|
|
- })
|
|
|
- this.showSuccessBox = false
|
|
|
- for (const key in this.form) {
|
|
|
- this.form[key] = "";
|
|
|
- }
|
|
|
- this.$refs.formT.resetValidation()
|
|
|
+ watch: {
|
|
|
+ "$store.state.windowWidth"() {
|
|
|
+ echarts.init(this.$refs.echartD1).resize();
|
|
|
+ echarts.init(this.$refs.echartD2).resize();
|
|
|
},
|
|
|
- async onSubmit(values) {
|
|
|
- console.log('submit', values);
|
|
|
- let res = await this.$axios.post('/AF/addRegister' + '?' +this.$qs.stringify({
|
|
|
- ...this.form
|
|
|
- }))
|
|
|
- if(res.data.success){
|
|
|
- this.showSuccessBox = true;
|
|
|
- this.infoForm = res.data.data
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ this.getData();
|
|
|
+ this.initMap();
|
|
|
+ setInterval(() => {
|
|
|
+ let day = new Date();
|
|
|
+ this.dateDay =
|
|
|
+ day.getFullYear() +
|
|
|
+ "-" +
|
|
|
+ (day.getMonth() + 1 < 10
|
|
|
+ ? "0" + (day.getMonth() + 1)
|
|
|
+ : "" + (day.getMonth() + 1)) +
|
|
|
+ "-" +
|
|
|
+ (day.getDate() < 10 ? "0" + day.getDate() : day.getDate());
|
|
|
+ this.timeWeek = " 星期" + this.dataWeekList[day.getDay()];
|
|
|
+ this.dataTime =
|
|
|
+ (day.getHours() < 10 ? "0" + day.getHours() : day.getHours()) +
|
|
|
+ ":" +
|
|
|
+ (day.getMinutes() < 10 ? "0" + day.getMinutes() : day.getMinutes()) +
|
|
|
+ ":" +
|
|
|
+ (day.getSeconds() < 10 ? "0" + day.getSeconds() : day.getSeconds());
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ isTypeMap(val){
|
|
|
+ console.log(val)
|
|
|
+ this.mapListType[val] = !this.mapListType[val]
|
|
|
+ let type = val === "isNormal" ? 1 : val === "isWarning" ? 2 : 3;
|
|
|
+ let markers = this.lnglats.filter(val=>val.type === type)
|
|
|
+ let marksList = this.overlayGroupMap.getOverlays().filter(element => element.getExtData().type === type);
|
|
|
+ if(this.mapListType[val]){
|
|
|
+ this.overlayGroupMap.addOverlays(this.addMarker(markers));
|
|
|
+ }else {
|
|
|
+ this.overlayGroupMap.removeOverlays(marksList);
|
|
|
}
|
|
|
},
|
|
|
- async getsmsCode(){
|
|
|
- if(!this.form.phone || !/^1[345678]\d{9}$/.test(this.form.phone)) return Notify({ type: 'primary', message: '请输入正确的手机号' });
|
|
|
- this.smsCodeLoading = true
|
|
|
- let res = await this.$axios.get('/AF/msgTest' + '?' + this.$qs.stringify({
|
|
|
- phone:this.form.phone
|
|
|
- }))
|
|
|
- if(res.data.success){
|
|
|
- Notify({ type: 'success', message: '验证码已发送' })
|
|
|
- this.showsmsCode = !this.showsmsCode
|
|
|
- this.smsCodeInter = setInterval(()=>{
|
|
|
- --this.timesmsCode
|
|
|
- if(this.timesmsCode <= 0 ){
|
|
|
- clearInterval(this.smsCodeInter)
|
|
|
- this.showsmsCode = !this.showsmsCode
|
|
|
- }
|
|
|
- },1000)
|
|
|
- } else{
|
|
|
- Notify({ type: 'primary', message: res.message });
|
|
|
- }
|
|
|
- this.smsCodeLoading = false
|
|
|
+ async getData() {
|
|
|
+ this.echartsBox1 = echarts.init(this.$refs.echartD1);
|
|
|
+ this.echartsBox1.setOption(getDataE1());
|
|
|
+ this.echartsBox2 = echarts.init(this.$refs.echartD2);
|
|
|
+ this.echartsBox2.setOption(getDataE2());
|
|
|
},
|
|
|
- onConfirm(value) {
|
|
|
- this.showPicker = false;
|
|
|
- this.form.sf = value
|
|
|
+ async initMap() {
|
|
|
+ this.map = await new AMap.Map("mapF", {
|
|
|
+ mapStyle: "amap://styles/d0ddc09bd7cbd7331a8e8fa691e5b0da", //设置地图的显示样式
|
|
|
+ resizeEnable: true,
|
|
|
+ zoom: 13,
|
|
|
+ zooms: [3, 18],
|
|
|
+ // features: [] //清空背景道路等
|
|
|
+ });
|
|
|
+ AMap.plugin(["AMap.Geolocation"], () => {
|
|
|
+ var geolocation = new AMap.Geolocation({
|
|
|
+ showButton: true, //是否显示定位按钮
|
|
|
+ buttonPosition: "RT", //定位按钮的位置
|
|
|
+ /* LT LB RT RB */
|
|
|
+ buttonOffset: new AMap.Pixel(10, 20), //定位按钮距离对应角落的距离
|
|
|
+ zoomToAccuracy: false, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
|
|
|
+ showMarker: true, //是否显示定位点
|
|
|
+ markerOptions: {
|
|
|
+ //自定义定位点样式,同Marker的Options
|
|
|
+ offset: new AMap.Pixel(-18, -36),
|
|
|
+ content:
|
|
|
+ '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',
|
|
|
+ },
|
|
|
+ showCircle: true, //是否显示定位精度圈
|
|
|
+ circleOptions: {
|
|
|
+ //定位精度圈的样式
|
|
|
+ strokeColor: "#0093FF",
|
|
|
+ noSelect: true,
|
|
|
+ strokeOpacity: 0.5,
|
|
|
+ strokeWeight: 1,
|
|
|
+ fillColor: "#02B0FF",
|
|
|
+ fillOpacity: 0.25,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.map.addControl(geolocation);
|
|
|
+ });
|
|
|
+ this.overlayGroupMap = new AMap.OverlayGroup(this.addMarker())
|
|
|
+ this.map.add(this.overlayGroupMap);
|
|
|
+ this.map.setFitView(); // 根据所有点自适应
|
|
|
},
|
|
|
- onConfirmCompany(value,ind) {
|
|
|
- this.showacCompany = false;
|
|
|
- this.form.accompanys = value
|
|
|
- this.form.accompany = ind === 1 ? 0 : ind + 1
|
|
|
+ addMarker(lnglats = this.lnglats, type) {
|
|
|
+ // 创建标点和点击事件
|
|
|
+ let icon = "";
|
|
|
+ return lnglats.map((val, ind) => {
|
|
|
+ if (type !== "water") {
|
|
|
+ icon =
|
|
|
+ val.type == 1
|
|
|
+ ? zcIcon
|
|
|
+ : val.type == 2
|
|
|
+ ? jcIcon
|
|
|
+ : val.type == 3
|
|
|
+ ? lxIcon
|
|
|
+ : zcIcon;
|
|
|
+ }
|
|
|
+ console.log(icon);
|
|
|
+ let marker = new AMap.Marker({
|
|
|
+ position: new AMap.LngLat(val.x, val.y),
|
|
|
+ icon: icon || "",
|
|
|
+ zIndex: 9,
|
|
|
+ extData: {
|
|
|
+ id: ind + 1,
|
|
|
+ type:val.type
|
|
|
+ },
|
|
|
+ });
|
|
|
+ marker.on("click", async () => {
|
|
|
+ await this.addMarkerInfo([val.x, val.y], val);
|
|
|
+ });
|
|
|
+ return marker;
|
|
|
+ });
|
|
|
},
|
|
|
- onConfirmTime(value) {
|
|
|
- this.showTimePicker = false;
|
|
|
- this.form.dateOfVisit = new Date(value).Format("yyyy-MM-dd hh:mm:ss")
|
|
|
+ // 添加标点
|
|
|
+ addMarkerInfo(position, value) {
|
|
|
+ // this.map.getIsOpen();
|
|
|
+ this.map.clearInfoWindow();
|
|
|
+ var infoWindow = new AMap.InfoWindow({
|
|
|
+ isCustom: true, //使用自定义窗体
|
|
|
+ closeWhenClickMap: true,
|
|
|
+ content: `
|
|
|
+ <div class="mapTab">
|
|
|
+ <div class="closeInfo ${value.type === 1 ? 'green' : value.type === 2 ? 'red' : 'gray'}">${value.type === 1 ? '正常' : value.type === 2 ? '告警' : '离线'}</div>
|
|
|
+ <div class="tableTitle">
|
|
|
+ <img src="${xh}" alt="">
|
|
|
+ <img src="${dc}" alt="">
|
|
|
+ <div>98%</div>
|
|
|
+ <div>3.6V</div>
|
|
|
+ </div>
|
|
|
+ <div class="tableContent">
|
|
|
+ <div class="yztBox ${value.type === 2 ? 'waning' : 'gray'}"">
|
|
|
+ <div class="${value.type === 1 ? 'green' : value.type === 2 ? 'white' : 'gray'}">${value.type === 1 ? '正常' : value.type === 2 ? '水位过高' : '---'}</div>
|
|
|
+ <div>实时水况</div>
|
|
|
+ </div>
|
|
|
+ <div><span>运行状态:</span><b class="${value.type === 1 ? 'green' : value.type === 2 ? 'red' : 'gray'}">${value.type === 1 ? '运行正常' : value.type === 2 ? '井盖打开' : '设备离线'}</b></div>
|
|
|
+ <div><span>实时水位:</span>${value.type === 1 ? '1米' : value.type === 2 ? '10米' : '---'}</div>
|
|
|
+ <div><span>负责人:</span>张三</div>
|
|
|
+ <div><span>联系电话:</span>13666666666</div>
|
|
|
+ <div><span>时间:</span>2021-08-19 15:12:12</div>
|
|
|
+ <div><span>位置:</span>上海市青浦区徐乐路208号</div>
|
|
|
+ </div>
|
|
|
+ <div class="sbh">设备号:868646515</div>
|
|
|
+ </div>`,
|
|
|
+ offset: new AMap.Pixel(0, -30),
|
|
|
+ });
|
|
|
+ infoWindow.open(this.map, position);
|
|
|
},
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-@import './index';
|
|
|
+@import "./index";
|
|
|
</style>
|
|
|
+<style lang="scss">
|
|
|
+.mapTab {
|
|
|
+ width: 300px;
|
|
|
+ height: 265px;
|
|
|
+ background: url("../../assets/image/mapBox.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 10px 15px;
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ .sbh {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 9px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .closeInfo {
|
|
|
+ position: absolute;
|
|
|
+ right: 13px;
|
|
|
+ top: 5px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .tableTitle {
|
|
|
+ display: flex;
|
|
|
+ padding: 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ img,
|
|
|
+ div {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ height: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tableContent {
|
|
|
+ width: 100%;
|
|
|
+ height: 150px;
|
|
|
+ line-height: 27px;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 14px;
|
|
|
+ text-shadow: 2px 2px 0px 0px #004f8c;
|
|
|
+ padding-top: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ div {
|
|
|
+ display: block;
|
|
|
+ span {
|
|
|
+ width: 80px;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ b {
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .yztBox {
|
|
|
+ position: absolute;
|
|
|
+ right: 17px;
|
|
|
+ top: 20px;
|
|
|
+ width: 68px;
|
|
|
+ height: 104px;
|
|
|
+ background: url("../../assets/image/yzt.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ div {
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 27px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .waning{
|
|
|
+ background: url("../../assets/image/yc.png");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .green {
|
|
|
+ color: #01ff19;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .red {
|
|
|
+ color: rgba(255, 1, 1, 1);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .white{
|
|
|
+ color: #FFF;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .gray {
|
|
|
+ color: #ccc;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|