<!-- * @Author: your name * @Date: 2022-01-11 13:44:17 * @LastEditTime: 2022-03-10 09:12:48 * @LastEditors: Please set LastEditors * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @FilePath: /test/hello-world/src/views/Home.vue --> <template> <div class="home bigwindow"> <!--<div class="goSystem" @click="$router.push('/index')">进入管理系统</div>--> <div id="map"></div> <!-- <Center :show="show" :centerData="centerData" /> --> <UserCenter :title="centerTitle" :show="userCenterShow" ref="userCenter" :detcetorList="detcetorList" :userId="centerUserId" :total="centerTotal" :pageSize="20" /> <OtherCenter :title="centerTitle" :show="otherCenterShow" ref="otherCenter" :detcetorList="detcetorList" :userId="centerUserId" :total="centerTotal" :pageSize="20" /> <PipeColor /> <!-- 底部按钮 --> <!--<div class="home-div">--> <!--<img src="@/assets/mapinages/bottombanner.png" alt="" style="" />--> <!--<div class="listingsSty fangy">--> <!--<div--> <!--@click="allCompany"--> <!--:class="selarr.length == companyLength ? 'active' : ''"--> <!--class="firsty"--> <!-->--> <!--全部--> <!--</div>--> <!--<div--> <!--class="firsty"--> <!--:class="selarr.indexOf(item.val) >= 0 ? 'active' : ''"--> <!--v-for="(item, index) in typeList"--> <!--:key="item.val"--> <!--@click="sel(index, item)"--> <!-->--> <!--{{ item.name }}--> <!--</div>--> <!--</div>--> <!--</div>--> <div class="event_div" @click="handleAdd"> <img style="vertical-align:middle;margin-top: -5px" src="@/assets/images/Frame.png" alt="" /> 添加事件接报 <!--<img src="@/assets/imgages/Frame.png"/>添加事件接报--> </div> <!--<div class="mouseToolBtn">--> <!--<button class="serBtn" @click="openDraw()" id="mouseToolBtn">画图</button>--> <!--</div>--> <!--<div class="delTu" id="delTu">--> <!--<!–<input name="in" type="radio" @click="delRadioLays()"/>–>--> <!--</div>--> <!--<div class="toolBtn" :style="display">--> <!--<div class="el-form-div" style="height: 30px;background: black">--> <!--<div class="detail-title">标绘工具</div>--> <!--<div style="cursor: pointer;" >--> <!--<img style="width: 20px;height: 20px;margin-top: 5px;" @click="closeDraw" src="@/assets/mapImages/closeBtn.png" alt="" />--> <!--</div>--> <!--</div>--> <!--<div class="el-form-div">--> <!--<div style="width: 50%">--> <!--<div class="tool-div" @click="drawMark()">标记</div>--> <!--<div class="tool-div" @click="drawCircle()">圆形 </div>--> <!--<div class="tool-div" @click="drawRule()">测距</div>--> <!--<div class="tool-div" @click="editDraw()">编辑图形</div>--> <!--<div class="tool-div" @click="map.delOverlays()">删除图形</div>--> <!--<div class="tool-div" @click="mouseToolDrawClear">清除所有</div>--> <!--</div>--> <!--<div style="width: 50%">--> <!--<div class="tool-div" @click="drawPolyline()">线段</div>--> <!--<div class="tool-div" @click="drawPolygon()">多边形</div>--> <!--<div class="tool-div" @click="drawMeasureArea()">面积</div>--> <!--<div class="tool-div" @click="endEditDraw()">关闭编辑</div>--> <!--<div class="tool-div" @click="map.endOverlays()">结束绘制</div>--> <!--<div class="tool-div">保存图片</div>--> <!--</div>--> <!--</div>--> <!--</div>--> <!-- 设备按钮 --> <div class="typelist-div"> <div class="list" v-for="(item, index) in arr" :key="index" :class="selarr1.indexOf(item.val) >= 0 ? 'active' : 'active2'" @click="sel1(index, item)" > <img :src="item.imgurl" style=" float: left; margin-right: 3px;" /> {{ item.name }} </div> </div> <div class="typelist-div2"> <div class="list" style="width: 148px;height: 35px;line-height: 35px;" v-for="(item, index) in arr2" :key="index" :class="selarr1.indexOf(item.val) >= 0 ? 'active' : ''" @click="sel1(index, item)" > <img :src="item.imgurl" style="margin-top: 8px;float: left; margin-right: 3px;width: 18px;height: 18px;margin-left: 10px;" /> {{ item.name }} <span v-if="index==3" style="margin-left: 50px">{{item.num}}</span> <span v-if="index!=3" style="margin-left: 25px">{{item.num}}</span> </div> </div> <!--<!– 左边 –>--> <!--<div class="leftbar">--> <!--<leftBar ref="mychild2"></leftBar>--> <!--</div>--> <!-- 右边 --> <div class="rightbar"> <rightBar ref="mychild"></rightBar> </div> <!-- 添加或修改事件接报对话框 --> <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <div class="el-form-div"> <div style="width: 50%"> <el-form-item label="事件名称" prop="eventName"> <el-input v-model="form.eventName" :disabled="readonly" placeholder="请输入事件名称" /> </el-form-item> <el-form-item label="事件类型" prop="eventType"> <el-select v-model="form.eventType" placeholder="请选择事件类型" style="width: 100%" :disabled="readonly"> <el-option v-for="dict in eventTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="parseInt(dict.dictValue)" ></el-option> </el-select> </el-form-item> <el-form-item label="事件等级"> <el-radio-group v-model="form.eventGrade"> <el-radio :disabled="readonly" v-for="dict in eventGradeOptions" :key="dict.dictValue" :label="parseInt(dict.dictValue)" >{{dict.dictLabel}}</el-radio> </el-radio-group> </el-form-item> </div> <div style="width: 50%"> <el-form-item label="报案人" prop="informant" > <el-input v-model="form.informant" placeholder="请输入报案人" :disabled="readonly"/> </el-form-item> <el-form-item label="案发时间" prop="inforTime" > <el-date-picker clearable size="small" :disabled="readonly" v-model="form.inforTime" type="datetime" style="width: 100%" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择报案时间"> </el-date-picker> </el-form-item> <el-form-item label="报案人电话" prop="informantPhone"> <el-input v-model="form.informantPhone" placeholder="请输入报案人电话" :disabled="readonly"/> </el-form-item> </div> </div> <el-form-item label="事发地点" prop="address"> <el-input v-model="form.address" placeholder="请输入事发地点" :disabled="readonly"/> </el-form-item> <el-form-item label="经度" prop="longitude"> <div class="el-form-div"> <el-input v-model="form.longitude" placeholder="请输入经度" style="width: 120px" :disabled="readonly"/> <el-input v-model="form.latitude" placeholder="请输入纬度" style="width: 120px;margin-left: 10px;" :disabled="readonly"/> <el-button type="primary" :style="buttonstyle" plain @click="MapdialogFun">选择经纬度</el-button> </div> </el-form-item> <el-form-item label="事件描述" prop="describe"> <el-input v-model="form.describe" type="textarea" placeholder="请输入事件描述" :disabled="readonly"/> </el-form-item> <el-form-item label="所属企业" prop="enterpriseId"> <el-select v-model="form.enterpriseName" placeholder="请选择预案等级" @change="qiyechang" > <el-option v-for = "dict in enterpriseList" :key = "dict.enterpriseId" :label = "dict.enterpriseName" :value = "dict.enterpriseId" /> </el-select> <!--<el-input v-model="form.beyondEnterpriseId" placeholder="请输入所属企业" />--> </el-form-item> <!--<el-form-item label="指派公司id" prop="enterpriseId">--> <!--<el-input v-model="form.enterpriseId" placeholder="请输入指派公司id" />--> <!--</el-form-item>--> <!--<el-form-item label="指派公司名称" prop="enterpriseName">--> <!--<el-input v-model="form.enterpriseName" placeholder="请输入指派公司名称" />--> <!--</el-form-item>--> <el-form-item label="备注" prop="remarks"> <el-input v-model="form.remarks" placeholder="请输入备注" /> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> <el-dialog title="任务指派" :visible.sync="open2" width="900px" append-to-body> <el-form ref="form" :model="form" :rules="rules2" label-width="100px"> <el-form-item label="所属企业:" prop="enterpriseId"> <el-select v-model="form.enterpriseName" placeholder="请选择预案等级" @change="qiyechang" > <el-option v-for = "dict in enterpriseList" :key = "dict.enterpriseId" :label = "dict.enterpriseName" :value = "dict.enterpriseId" /> </el-select> <!--<el-input v-model="form.beyondEnterpriseId" placeholder="请输入所属企业" />--> </el-form-item> <div class="el-form-div"> <div style="width: 50%"> <el-form-item label="事件名称:" > {{form.eventName}} </el-form-item> <el-form-item label="事件类型:" > {{form.eventTypeName}} </el-form-item> <el-form-item label="事件等级:"> {{form.eventGradeName}} </el-form-item> </div> <div style="width: 50%"> <el-form-item label="报案人:" > {{form.informant}} </el-form-item> <el-form-item label="案发时间:" > {{form.inforTime}} </el-form-item> <el-form-item label="报案人电话:" > {{form.informantPhone}} </el-form-item> </div> </div> <el-form-item label="事发地点:" > {{form.address}} </el-form-item> <el-form-item label="经纬度:" > {{form.longitude}}、{{form.latitude}} </el-form-item> <el-form-item label="事件描述:" > {{form.describe}} </el-form-item> <el-form-item label="备注:" prop="remarks"> {{form.remarks}} </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> <GetPos :dialogVisible.sync="dialogTableVisible" device="" :devicePos="devicePos" @close="dialogcancelFun" @getPath="getPath" /> </div> </template> <script> // @ is an alias to /src import { EditorMap } from "@/utils/mapClass/yjmap"; import { mapGetters, mapActions } from "vuex"; import { listDetectorInfo } from "@/api/detector/detectorInfo"; import { detectorUserList } from "@/api/detector/detectorUser"; import { listReceive, getReceive, delReceive, addReceive, updateReceive } from "@/api/system/receive"; import { pipeData, tiaoyaxiang, famen, changzhan, jiankong, user, alarmtime, } from "@/utils/mapClass/config.js"; import { getPipe, getTyx, getFm, getCz, getVideo, getUser, getEnterprise, userAlarm, getTcqDevice, } from "@/api/bigWindow/getDevice"; import { listDevice } from "@/api/system/device"; import Line from "@/components/bigWindow/Line.vue"; import VideoView from "@/components/bigWindow/VideoView.vue"; import Device from "@/components/bigWindow/Device.vue"; import Cz from "@/components/bigWindow/Cz.vue"; import User from "@/components/bigWindow/User.vue"; import UserCenter from "@/components/bigWindow/UserCenter.vue"; import OtherCenter from "@/components/bigWindow/OtherCenter.vue"; import Company from "@/components/bigWindow/Company.vue"; import PipeColor from "@/components/emergency/PipeColor.vue"; import GetPos from '@/components/GetPos'; import rightBar from "@/components/emergency/rightBar.vue"; import deviceMaterial from "@/components/emergency/deviceMaterial.vue"; export default { name: "Home", components: { GetPos, rightBar, // Center, UserCenter, OtherCenter, PipeColor, deviceMaterial, }, data() { return { // 是否显示弹出层 open: false, open2: false, // 事件类型 1水灾 2火灾 3突发字典 eventTypeOptions: [], // 事件等级 1级 2级 3级字典 eventGradeOptions: [], // 弹出层标题 title: "", buttonstyle:"display:none", //选择经纬度 dialogTableVisible:false, devicePos:[], deviceList:[], enterpriseList:[], map: null, show: false, readonly:true, // centerData: null, selarr: [1, 2, 3], weather: "", lower: "", higher: "", nowDate: "", nowweek: "", nowtime: "", // 当前日期 typeList: [ { val: 1, name: "中燃翔科", }, { val: 2, name: "中诚然气", }, { val: 3, name: "中燃韵科", }, ], display:"display:none", // 2:"调压箱", // 3:"阀门", // 4:"厂站", // 5:"监控", // 6:"用户", arr: [ { val: 2, ischeck: false, imgurl: require("@/assets/images/cz1.png"), name: "调压箱", }, { val: 3, ischeck: false, imgurl: require("@/assets/images/cz2.png"), name: "阀门井", }, { val: 4, ischeck: false, imgurl: require("@/assets/images/cz3.png"), name: "场 站", }, // { // val: 6, // ischeck: false, // imgurl: require("@/assets/images/cz4.png"), // name: "用 户", // }, { val: 5, ischeck: false, imgurl: require("@/assets/images/cz5.png"), name: "监 控", }, ], arr2: [ { val: 10, num:0, ischeck: false, imgurl: require("@/assets/image/yj-jydw.png"), name: "救援队伍", }, { val: 11, num:0, ischeck: false, imgurl: require("@/assets/image/yj-wz.png"), name: "救援物资", }, { val: 12, num:0, ischeck: false, imgurl: require("@/assets/image/yj-cl.png"), name: "救援车辆", }, { val: 13, num:0, ischeck: false, imgurl: require("@/assets/image/yj-yy.png"), name: "医 院", }, { val: 15, num:0, ischeck: false, imgurl: require("@/assets/image/yj-xf.png"), name: "消防队伍", }, { val: 16, num:0, ischeck: false, imgurl: require("@/assets/image/yj-xj.png"), name: "巡检人员", }, ], selarr1: [], // 用户的center数据 detcetorList: [], centerUserId: null, centerTotal: null, userCenterShow: false, centerTitle: "", // 其他设备的center数据 // 除了这个值,用来显示隐藏,其他值与user共用 otherCenterShow: false, // 报警轮询timer alarmTimer: null, //绘制工具 markNum:0, // 表单参数 form: {}, // 表单校验list rules2:{ enterpriseId:[ { required: true, message: "请选择指派公司", trigger: "blur" } ], }, rules: { eventName: [ { required: true, message: "请输入事件名称", trigger: "blur" } ], eventType: [ { required: true, message: "请选择事件类型", trigger: "blur" } ], informant: [ { required: true, message: "请输入报案人", trigger: "blur" } ], inforTime: [ { required: true, message: "请输入案发时间", trigger: "blur" } ], informantPhone: [ { required: true, message: "请输入报案人电话", trigger: "blur" } ], longitude: [ { required: true, message: "请输入经纬度", trigger: "blur" } ], } }; }, computed: { ...mapGetters(["company", "systemSetting"]), companyLength() { return this.typeList.length; }, }, watch: { selarr(newValue) { if (newValue.length == this.companyLength) { // this.$refs.mychild2.choice(0); } }, }, created() { //this.getList(); this.getDicts("event_type").then(response => { this.eventTypeOptions = response.data; }); this.getDicts("event_grade").then(response => { this.eventGradeOptions = response.data; }); }, async mounted() { this.getList(); // console.log(99999999999999) // getPipe().then(res=>{ // console.log("成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功",res) // }).catch(res=>{ // console.log(123) // }) // return; const path = eval(this.systemSetting.map_center); this.map = new EditorMap( "map", { //center: path, //mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758", center: [114.684979,38.038292], zoom: 14.5, }, this ); // 这是测试,用本地数据 if (this.systemSetting.prod_test === "test") { this.addPipeLine(pipeData, Line); this.addDevice(tiaoyaxiang, Device); this.addDevice(famen, Device); this.addDevice(changzhan, Cz); this.addDevice(user, User); this.addDevice(jiankong, VideoView); } else { // 调用状态管理器方法获取公司信息每次都要调取,因为每次进来都是更新的 this.GetCompany(); this.typeList = this.company.map((item) => ({ val: item.conpanyId, name: item.companyName, })); var allarr = this.arr.concat(this.arr2); this.selarr = this.company.map((item) => item.conpanyId); this.selarr1 = allarr.map((item) => item.val); this.arr.forEach((item) => (item.ischeck = true)); // getPipe() getTyx() getFm() getCz() getVideo() getUser() await this.goMap(getEnterprise, this.addDevice, Company); this.goMap(getPipe, this.addPipeLine, Line); this.goMap(getTyx, this.addDevice, Device); this.goMap(getFm, this.addDevice, Device); this.goMap(getCz, this.addDevice, Cz); this.goMap(getVideo, this.addDevice, VideoView); // 用户要等一下 因为有报警数据 // this.goMap(detectorUserList, this.addDevice, User).then((res) => { // // 先查一下,然后开启定时器 // this.userAlarm(); // this.alarmTimer = setInterval(() => { // this.userAlarm(); // // console.log("查询报警"); // }, alarmtime); // }); } this.currentTime(); // this.$refs.mychild.choice(this.selarr); // this.$refs.mychild2.choice(this.selarr); }, methods: { /** 查询应急设备列表 */ getList() { var params = { "pageNum": 1, "pageSize": 1000 }; listDevice(params).then(response => { response.rows.forEach((item) => { item.iconType = item.deviceType+9; if(item.deviceType<5){ this.arr2[item.deviceType-1].num++; }else { this.arr2[item.deviceType-2].num++; } }); this.deviceList = response.rows; //console.log(this.deviceList) this.addDevice({"data":this.deviceList},deviceMaterial) this.arr2.forEach((item) => (item.ischeck = true)); }); }, /** 新增按钮操作 */ handleAdd() { this.readonly=false; this.reset(); this.open = true; this.title = "添加事件接报"; this.buttonstyle="margin-left:10px" }, qiyechang(value){ let obj = {}; obj = this.enterpriseList.find((item)=>{ return item.enterpriseId === value; ``}); this.form.enterpriseName = obj.enterpriseName; this.form.enterpriseId = value; }, /** 修改按钮操作 */ handleUpdate(row) { console.log(row) this.readonly=true; this.buttonstyle="display:none"; this.reset(); const id = row.id || this.ids getReceive(id).then(response => { this.form = response.data; this.form.eventGradeName = row.eventGradeName; this.form.eventTypeName = row.eventTypeName; this.open2 = true; this.title = "修改事件接报"; document.getElementById("jingwei").style.display="none"; }); }, /** 提交按钮 */ submitForm() { this.$refs["form"].validate(valid => { if (valid) { if (this.form.id != null) { this.form.status = 2; updateReceive(this.form).then(response => { this.msgSuccess("修改成功"); this.open = false; this.open2 = false; this.$refs.mychild.choice(0); }); } else { addReceive(this.form).then(response => { this.msgSuccess("新增成功"); this.open = false; this.$refs.mychild.choice(0); }); } } }); }, //选择经纬度 MapdialogFun() { this.dialogTableVisible = true; }, dialogcancelFun() { this.dialogTableVisible = false; }, getPath(res){ //console.log("res", res); //console.log(this.form.longitude, this.form.latitude); //确认选择经纬度 this.form.longitude = res[0]; this.form.latitude = res[1]; }, // 取消按钮 cancel() { this.open = false; this.open2 = false; this.reset(); }, // 表单重置 reset() { this.form = { id: null, eventName: null, eventType: null, eventGrade: 0, address: null, longitude: null, latitude: null, informant: null, inforTime: null, informantPhone: null, describe: null, enterpriseId: null, enterpriseName: null, remarks: null, isDel: null, createTime: null }; this.resetForm("form"); }, ...mapActions({ GetCompany: "bigWindowCompany/GetCompany", }), // 管道上图 addPipeLine(data, component) { for (let comp in data) { data[comp].forEach((pipe) => { this.map.addPipeLine(pipe, component); }); } }, // 设备上图 addDevice(data, component) { //console.log(data,data) for (let comp in data) { data[comp].forEach((pipe) => { this.map.addDevice(pipe, component); }); } }, goMap(httpFunc, addFunc, component) { return httpFunc().then((res) => { // 给用户加icontype if (res.data && !res.data[0].iconType) { res.data.forEach((item) => { item.iconType = 6; }); } if(httpFunc==getEnterprise){ //console.log("000000000",res.data) this.enterpriseList= res.data; } // 根据数据格式不同,赋值不同,如果是个数组,就用res,如果不是就用res.data let config = {}; if (Array.isArray(res)) { config = { data: res }; // 给视频设备的conpanyType变成null,因为视频不受企业控制 if (res[0].iconType == 5) { res.forEach((item) => { item.companyType = null; }); } } else { config = { data: res.data }; } //console.log("======", config); addFunc(config, component); return config.iconType; }); }, userAlarm() { userAlarm().then((res) => { console.log("报警", res.data); if (res.data.length > 0) { // 报警 res.data.forEach((item) => { this.map.deviceAlarm(item); }); // 看看谁告消警 } this.map.relieveAlarm(res.data); }); }, myCenterShow(boolean) { this.show = boolean; }, // centerDataFunc(centerData) { // this.centerData = centerData; // console.log(centerData); // this.show = true; // }, allCompany() { if (this.selarr.length == this.companyLength) { this.selarr = []; } else { this.selarr = this.company.map((item) => item.conpanyId); } // this.map.companyFilter(this.selarr); this.map.allfilter(this.selarr, this.selarr1); this.map.infowindowClose(); this.show = false; }, sel(index, item) { this.map.infowindowClose(); this.show = false; const ind = this.selarr.indexOf(item.val); if (ind >= 0) { this.selarr.splice(ind, 1); if (item.val == 3) { // this.$refs.mychild.choice(1); // this.$refs.mychild2.choice(1); } else { // this.$refs.mychild.choice(item.val + 1); // this.$refs.mychild2.choice(item.val + 1); } } else { this.selarr.push(item.val); // this.$refs.mychild.choice(item.val); // this.$refs.mychild2.choice(item.val); } // this.map.companyFilter(this.selarr); this.map.allfilter(this.selarr, this.selarr1); }, sel1(index, item) { const ind = this.selarr1.indexOf(item.val); if (ind >= 0) { this.selarr1.splice(ind, 1); } else { this.selarr1.push(item.val); //找中心点 //console.log(item.val); if(item.val>=10){ for(var i=0;i<this.deviceList.length;i++){ if(this.deviceList[i].iconType==item.val){ //console.log(this.deviceList[i]) this.map.setZoomAndCenter(this.deviceList[i].longitude,this.deviceList[i].latitude); break; } } // this.deviceList.forEach((item2) => ( // if(item2.iconType==item.val){ // // } // // )); } } this.map.allfilter(this.selarr, this.selarr1); //this.map.setZoomAndCenter(14, [116.326655,39.899438]); }, //用户的设备center getDetectorInfoList(httpFunc, queryParams, title) { //console.log(queryParams); return httpFunc(queryParams).then((res) => { // console.log("queryParams", res); if (res.code == 200) { this.detcetorList = res.rows; this.centerUserId = queryParams.userId; // 总数据 this.centerTotal = res.total; // this.$refs.userCenter.fade = "fade"; this.otherCenterShow = false; this.userCenterShow = true; this.centerTitle = title; // 传递回去 return res.code; } }); }, // 调压箱,阀门,场站睇下的设备 getTcqDevice(queryParams, title) { console.log(queryParams); return getTcqDevice(queryParams).then((res) => { // console.log("queryParams", res); console.log("resresresresreszzzzzzzzzzzzzzz", res); this.detcetorList = res; this.centerUserId = queryParams.devId; // 总数据 this.centerTotal = res.length; // this.$refs.userCenter.fade = "fade"; this.userCenterShow = false; this.otherCenterShow = true; this.centerTitle = title; // 传递回去 return res.code; }); }, currentTime() { setInterval(() => { this.formatDate(); }, 1000); }, formatDate() { let date = new Date(); let year = date.getFullYear(); // 年 let month = date.getMonth() + 1; // 月 let day = date.getDate(); // 日 let week = date.getDay(); // 星期 let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", ]; let hour = date.getHours(); // 时 hour = hour < 10 ? "0" + hour : hour; // 如果只有一位,则前面补零 let minute = date.getMinutes(); // 分 minute = minute < 10 ? "0" + minute : minute; // 如果只有一位,则前面补零 let second = date.getSeconds(); // 秒 second = second < 10 ? "0" + second : second; // 如果只有一位,则前面补零 this.nowtime = `${hour}:${minute}:${second}`; this.nowweek = `${weekArr[week]}`; this.nowDate = `${year}年${month}月${day}`; }, // 地图绘制 // drawMark() { // this.map.mouseAddMarker(); // }, // drawPolyline() { // this.map.mouseAddPipeline("Polyline"); // }, // drawCircle() { // this.map.mouseAddCircle("Circle"); // }, // drawPolygon() { // this.map.mouseAddPolygon("Polygon"); // }, // drawRule() { // this.map.mouseAddRule(); // }, // drawMeasureArea() { // this.map.mouseAddMeasureArea(); // }, // mouseToolDrawClear(){ // this.map.mousetoolClose(true); // }, // editDraw(){ // this.map.editOverlays(); // }, // endEditDraw(){ // this.map.endEditOverlays(); // }, // delRadioLays(num){ // console.log("---"+num) // }, // openDraw(){ // this.display=""; // }, // closeDraw(){ // this.display="display:none"; // } }, }; </script> <style lang="scss" scoped> .home { position: relative; height: calc(100vh - 50px); } .goSystem { position: fixed; z-index: 9999; top: 50px; right: 20px; font-size: 14px; color: #00ffff; cursor: pointer; padding: 3px 5px; /* &:hover { color: #00ffff; } */ } #map { position: absolute; top: 0px; bottom: 0; width: 100%; } .banner-test { width: 100%; height: 85px; position: relative; top: 0; z-index: 999; } .banner-test img { width: 100%; height: 100%; } .leftbar { width: 450px; height: 90%; position: fixed; top: 10%; left: 0; background: #112238; } .rightbar { width: 470px; height:calc(100vh - 100px); position: fixed; top: 100px; right: 0; background: #ffffff; } .home-div { width: 50%; height: 70px; position: fixed; bottom: 0; margin-left: 20%; // z-index: 1000; img { width: 100%; height: 100%; position: absolute; z-index: -1; } } .event_div{ position: fixed; right: 0px; z-index:999; width: 470px; height: 50px; color: white; background: #4091F7 ; top: 50px; line-height: 50px; text-align: center; cursor:pointer; font-size: 24px; } .listingsSty { /* height: 25px; */ // position: fixed; /* border: 1px solid #fff; */ margin-left: 25%; width: 50%; display: flex; justify-content: space-between; padding-top: 25px; // font-family: 'arialbd'; } .firsty { // width: 15%; min-width: 80px; height: 35px; text-align: center; line-height: 35px; /* border: 1px solid #fff; */ color: #fff; font-size: 16px; // float: left; // margin-left: 8%; cursor: pointer; // font-family: 'arialbd'; } .active { /*color: #2ee7e7;*/ /*background: url(../../assets/mapinages/background.png);*/ /*background-repeat: no-repeat;*/ /*background-size: 100% 100%;*/ font-size: 18px; /*position:relative;*/ /*&::after{ width: 80px; height: 50px; z-index: -1; content: " "; position: absolute; top: -7px; left: 50%; margin-left:-40px; background: url(/img/bac1.0ec28f27.png); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; color: aquamarine; }*/ } .weather-icon { float: left; width: 30px !important; height: 30px !important; margin-top: 10px !important; margin-left: 10px !important; padding-right: 5px; } .tttt { background-image: -webkit-linear-gradient( bottom, rgb(134, 185, 233), #ffffff ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .typelist-div { width: 450px; height: 50px; z-index: 999; position: fixed; top: 0; margin-top: 80px; right: 450px; } .typelist-div2{ width: 155px; height: 220px; z-index: 999; position: fixed; margin-top: 80px; margin-left: 10px; background: white; margin-left: 15px; } .list { z-index: 9999; float: left; color: #000000; line-height: auto; background: #ffffff; box-shadow: inset 0px 1px 2px 1px #ffffff; font-size: 14px; padding: 5px 7px; cursor: pointer; } .list.active { background: #ffffff; box-shadow: inset 0px 1px 2px 1px #ffffff; color: #1890ff; } .list.active2 { filter: grayscale(100%); } .mouseToolBtn { position: fixed; margin-left: 100px; z-index: 999; bottom: 50px; } .delTu{ position: fixed; margin-left: 30%; margin-top: 300px; z-index: 999; height: 150px; width: 450px; background: #1c84c6; } .serBtn { background: #fff; width: 50px; height: 50px; text-align: center; outline: none; border-radius: 5px; border: none; cursor: pointer; } .toolBtn{ background: white; width: 160px; position: fixed; margin-left: 100px; z-index: 999; bottom: 100px; height: 200px; } .el-form-div{ display:flex; flex-direction:row; justify-content:flex-start; width: 100%; } .detail-title{ height: 30px; color: white; line-height: 30px; width: 130px; font-size: 15px; margin-left: 5px; } .tool-div{ border: 1px solid #cccccc; width: 80%; margin-left: 10%; text-align: center; margin-top: 4px; font-size: 14px; height: 24px; line-height: 24px; cursor:pointer; } ::v-deep .el-dialog:not(.is-fullscreen) { margin-top: 13vh !important; } </style>