地图细节优化

liuyg

2021-04-24 fc9b2dd35b7a10998112f74f705c1d1494fc401e

 public/map/popup/html/SupervisoryMapYdata.html

@@ -12,7 +12,9 @@
    <!-- element ui -->
    <link rel="stylesheet" href="../../lib/elementUi.css">
    <script src="../../lib/elementUi.js"></script>

    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
    <script src="../../lib/axios.js"></script>
    <!-- layui -->
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
    <style>
@@ -37,7 +39,7 @@

        .flare-liu-top {
            width: 330px;
            height: 90px;
            height: 140px;
            /* border: rgb(211, 154, 31) solid 0.5px; */
            display: flex;
            align-items: center;
@@ -49,54 +51,38 @@

        .f-l-t-heard {
            width: 300px;
            height: 30px;
            height: 50px;
            font-size: 18px;
            font-family: PingFangSC-Regular;
        }

        .f-l-t-right {
            width: 300px;
            height: 28px;
            height: 50px;
            display: flex;
            align-items: center;
            /* align-items: center; */
            color: white;
            justify-content: space-around;
            flex-direction: column;
            font-size: 12px;
        }

        .f-l-t-center {
            width: auto;
            position: relative;
            left: -103px;
            top: 5px;

        .f-l-t-r-number {
            width: 180px;
            margin-left: auto;
        }

        .f-l-t-r-msg {
            width: 200px;
            height: 28px;
            position: relative;
            top: 10px;
            left: -5px;
        .f-l-t-r-time {
            width: 180px;
            margin-left: auto;
        }

        .f-l-t-r-but {
            width: 72.531px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            background: rgba(255, 255, 255, .2);
            color: white;
            /* border: wheat 1px solid; */
        }

        .f-l-t-r-but a {
            color: white;
            width: 48.52px;
            height: 16px;
        }

        .flare-liu-body {
            width: 330px;
            height: 361px;
            /* height: 361px; */
            /* border: rgb(106, 20, 187) solid 0.5px; */

        }
@@ -111,42 +97,61 @@
        .r-b-t-main {
            display: flex;
            align-items: center;
            justify-content: space-between;
            justify-content: center;
            /* justify-content: space-between; */

            padding: 10px 0 10px 0;
            margin-bottom: 5px;
        }

        .r-b-t-main-once {
            display: flex;
            align-items: center;
            justify-content: center;

            padding: 10px 0 10px 0;
            margin-bottom: 5px;
            position: relative;
            left: 11px;
        }

        .rbt-l,
        .rbt-r {
            width: 150px;
            /* border: rgb(106, 20, 187) solid 0.5px; */
        }



        .r-b-t-left {
            display: block;
            /* display: block; */
            width: 27%;

        }

        .r-b-t-right {
            display: block;
            /* display: block; */
            width: 70%;
            color: #5d5d5d;
            font-size: 12px;

        }

        .r-b-t-r-label {
            float: left;
            margin-right: 10px;
            padding: 0 10px 0 10px;
            border: 1px solid rgba(0, 0, 0, 0.5);
            border-radius: 5px;
        .scene-image-box .el-image {
            display: block;
            min-height: 200px;
            margin-bottom: 10px;
        }

        .r-b-t-r-imgsl {

            float: left;
            padding: 0 3px 0 3px;
        .scene-image-box {
            width: 320px;
            height: 260px;
            overflow: auto;
        }


        .el-tabs__active-bar {
            background-color: aquamarine;
            background-color: #F35B5B;
        }

        .el-tabs__item.is-active,
@@ -161,65 +166,101 @@
        <!-- 从layui传值给iframe 的占位input -->
        <!-- <div class="aaa bbb">13223456745</div> -->
        <input type="text" id="sidIput" ref="sidIput" style="display:none">
        <div class="flare-liu-top">
            <div class="f-l-t-heard">{{name}}</div>
            <div class="f-l-t-center">{{machineCode}}</div>
        <div class="flare-liu-top" style="background-image: linear-gradient(to right, #F35B5B , #F35B5B">
            <div class="f-l-t-heard">{{datas.place}}</div>
            <div class="f-l-t-right">
                <div class="f-l-t-r-msg">{{statesss}}</div>
                <div class="f-l-t-r-but"> <a href="#" @click="looks">查看详情</a> </div>
                <div class="f-l-t-r-number">名称：{{datas.deviceNumber}}</div>
                <div class="f-l-t-r-time">接警时间：{{datas.jjTime}}</div>
            </div>
        </div>
        <div class="flare-liu-body">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="first">
                <el-tab-pane label="警情信息" name="first">
                    <div class="r-b-top">
                        <div class="r-b-t-main">
                            <span class="r-b-t-left">设备名称</span>
                            <span class="r-b-t-right">{{ name }}</span>
                        <div class="r-b-t-main-once">
                            <span class="r-b-t-left">ID：</span>
                            <span class="r-b-t-right">{{ datas.alarmPeople }}</span>
                        </div>
                        <div class="r-b-t-main">
                            <span class="r-b-t-left">设备联系人</span>
                            <span class="r-b-t-right">{{ contacts }}: {{ calls }}</span>
                        <div class="r-b-t-main-once">
                            <span class="r-b-t-left">地址：</span>
                            <span class="r-b-t-right">{{ datas.galarmPeople }}</span>
                        </div>
                        <!-- 设备标签待定 -->
                        <!-- <div class="r-b-t-main">
                            <span class="r-b-t-left">设备标签</span>
                            <span class="r-b-t-right">
                                <div 
                                class="r-b-t-r-label" 
                                v-for="(value,index) in labels" 
                                :key="index"
                                >
                                     {{value}} 
                                </div>
                            </span>
                        <div class="r-b-t-main-once">
                            <span class="r-b-t-left">类型：</span>
                            <span class="r-b-t-right">{{ datas.galarmPeople }}</span>
                        </div>
                        <div class="r-b-t-main-once">
                            <span class="r-b-t-left">域名：</span>
                            <span class="r-b-t-right">{{ datas.galarmPeople }}</span>
                        </div>
                        <!-- <div class="r-b-t-main-once">
                            <span class="r-b-t-left">使用方：</span>
                            <span class="r-b-t-right">？？</span>
                        </div> -->
                        <!-- 图暂时没有 -->
                        <!-- <div class="r-b-t-main">
                            <div class="rbt-l">
                                <span class="r-b-t-left">警情内容：</span>
                                <span class="r-b-t-right">{{ datas.content }} </span>
                            </div>
                            <div class="rbt-r">
                                <span class="r-b-t-left">警情类型：</span>
                                <span class="r-b-t-right">{{datas.waringType}}</span>
                            </div>
                        </div> -->
                        <div class="r-b-t-main">
                            <span class="r-b-t-left" style="position: relative; top: -27px">部署图片</span>
                            <span class="r-b-t-right">
                                <div class="r-b-t-r-imgsl" v-for="(value, index) in imgsl" :key="index">
                                    <el-image style="width: 68px; height: 68px" :src="value" :preview-src-list="imgsl"
                                        v-show="value != 'no'">
                                    </el-image>
                                    <div v-show="value == 'no'" style="
                                        width: 68px;
                                        height: 68px;
                                        text-algin: center;
                                        color: rgba(0, 0, 0, 0.5);
                                        ">
                                        无图片
                                    </div>
                                </div>
                            </span>
                            <div class="rbt-l">
                                <span class="r-b-t-left">联系人：</span>
                                <span class="r-b-t-right">{{ datas.oneContacts }} </span>
                            </div>
                            <div class="rbt-r">
                                <span class="r-b-t-left">联系电话：</span>
                                <span class="r-b-t-right">{{datas.onePhone}}</span>
                            </div>
                        </div>
                        <!-- <div class="r-b-t-main">
                            <div class="rbt-l">
                                <span class="r-b-t-left">二级负责人：</span>
                                <span class="r-b-t-right">{{ datas.twoContacts }} </span>
                            </div>
                            <div class="rbt-r">
                                <span class="r-b-t-left">call：</span>
                                <span class="r-b-t-right">{{datas.twoPhone}}</span>
                            </div>
                        </div>
                        <div class="r-b-t-main">
                            <span class="r-b-t-left">部署时间</span>
                            <span class="r-b-t-right">{{ deploymentTime }}</span>
                        </div>
                            <div class="rbt-l">
                                <span class="r-b-t-left">三级负责人：</span>
                                <span class="r-b-t-right">{{ datas.threeContacts }} </span>
                            </div>
                            <div class="rbt-r">
                                <span class="r-b-t-left">call：</span>
                                <span class="r-b-t-right">{{datas.threePhone}}</span>
                            </div>
                        </div> -->
                    </div>
                </el-tab-pane>
                <!-- <el-tab-pane label="other" name="second">other</el-tab-pane> -->
                <!-- <el-tab-pane label="现场图片" name="second">
                     <el-card class="scene-image-box">
                        <el-image v-for="(item, index) in imgSrc" :key="index" :src="item" :preview-src-list="srcList"
                            v-show="imgSrc.length > 0"></el-image>
                        <span v-show="imgSrc.length == 0">暂无现场图片</span>
                    </el-card> -->

                <!-- <el-card class="scene-image-box">
                            <el-image v-for="url in imgSrc" :key="url" :src="url"  :preview-src-list="srcList" v-show="imgSrc.length"></el-image> -->
                <!--<el-image v-for="url in imgSrc" :key="url" :src="url"   v-show="imgSrc.length"></el-image>
                            <span v-show="imgSrc.length == 0">暂无现场图片</span>
                        </el-card>
               
                    
                </el-tab-pane> -->
                <!-- <el-tab-pane label="现场视频" name="third">
                    <el-card>
                        <video :src="feedbackVideo" style="width: 100%; height: 100%; object-fit: fill" controls
                            v-show="feedbackVideo != ''"></video>
                        <span v-show="feedbackVideo == ''">暂无现场视频</span>
                    </el-card>
                </el-tab-pane> -->
            </el-tabs>
        </div>
    </div>
@@ -232,116 +273,71 @@
        var me = new Vue({
            el: '#appliutwo',
            data: {
                num: '',
                name: '',
                statesss: '',
                //详细信息data
                ourData: '',
                // names: '',
                contacts: '',
                calls: '',
                imgsl: [],
                deploymentTime: '',
                oldtime: '',
                newtime: '',
                machineCode: '',

                a: true,
                activeName: 'first'
                datas: {},
                activeName: 'first',
                imgSrc: [],
                srcList: [],
                feedbackVideo: "",
                // aaa: "",
                // address: "南昌市东湖区永外正街17号",
                // addvcd: "",
                // city: "",
                // coordinate: "POINT(0 0)",
                // createtime: "2021-03-17 10:06:23",
                // district: "",
                // dj: "三级甲等",
                // haveJW: "无地图经纬度",
                // id: 10,
                // information: "<em>南昌一附院</em>一般指南昌大学第一附属医院。南昌大学第一附属医院有东湖院区和象湖院区两个院区，其中东湖院区位于江西省南昌市东湖区永外正街17号，始建于1939年，是一所集医疗、教学、科研、预防保健、康养于一体三级甲等综合医院",
                // isDelete: -1,
                // jd: "",
                // phone: "0791-88692748",
                // province: "",
                // type: "医院",
                // wd: "",
                // yname: "南昌大学第一附属医院",
                // ynumber: "CLRK202103171006232744",
            },
            methods: {
                looks() {
                    window.parent.parent.location.hash = `#/dataL/dataL?id=${this.ourData.id}&deviceName=${this.ourData.deviceName}&deviceNumber=${this.ourData.deviceNumber}&deviceType=${this.ourData.deviceType}&ownership=${this.ourData.ownership}&ownerId=&devicestate=${this.ourData.devicestate}&stime=${this.ourData.stime}&parentId=${this.ourData.parentId}&jd=${this.ourData.jd}&wd=${this.ourData.wd}&street=${this.ourData.street}&dtype=${this.ourData.dtype}&serialNumber=${this.ourData.serialNumber}&stype=&channelNumber=${this.ourData.channelNumber}&pay=&expireTime=${this.ourData.expireTime}&heartbeat=${this.ourData.heartbeat}&province=${this.ourData.province}&city=${this.ourData.city}&district=${this.ourData.district}&state=${this.ourData.state}&reason=&deptId=${this.ourData.deptId}&onePhone=${this.ourData.onePhone}&twoPhone=${this.ourData.twoPhone}&oneId=${this.ourData.oneId}&twoId=&threeId=&oneContacts=${this.ourData.oneContacts}&twoContacts=${this.ourData.twoContacts}&type=${this.ourData.type}&beginTime=&endTime=&pid=${this.ourData.pid}&onlineStatus=${this.ourData.onlineStatus}&jtype=${this.ourData.jtype}&threePhone=${this.ourData.threePhone}&threeContacts=${this.ourData.threeContacts}`;
                },
                getdatas(dat) {

                    var xhr = null
                        , my = this
                        , url = '/api/blade-jfpts/depl/selectInfo?deviceNumber=' + dat.deviceNumber;
                    if (XMLHttpRequest) { //http请求
                        xhr = new XMLHttpRequest();
                    } else {
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");

                    }
                    xhr.open("post", url, true);
                    xhr.send();
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState === 4) {
                            if (xhr.status === 200) {
                                // 判断isJson是否传进来了
                                var imgD = JSON.parse(xhr.responseText);// JSON转js
                                // console.log(imgD)
                                var imgdatas = [];
                                if (imgD.data.length != 0) {
                                    imgdatas = imgD.data[0].paddress.split(',');
                                } else {

                                }
                                // var imgdatas = imgD.data[0].paddress.split(',');
                                my.imgsl = imgdatas.length == 0 ? ['no'] : imgdatas;
                                // my.imgsl = [ //最多3张照片 
                                //     "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",

                                //     "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE",
                                //     "https://resource-city.sensoro.com/6E0FB78DC42C35F3B8FF0F6A03472433",
                                // ]
                                // console.log(imgD, my.imgsl);
                            }
                        }
                    }
                    this.name = dat.deviceName.length >= 15 ? dat.deviceName.substring(0, 15) + '···' : dat.deviceName;
                    me.num = dat.deviceNumber;
                    this.evaluate = "空气质量";
                    this.machineCode = "无数据" && dat.deviceNumber;
                    this.smoke = "烟雾";
                    this.proportion = "电量";
                    this.ReportTime = "最近上报：" + dat.heartbeat;
                    this.contacts = "无数据" && dat.oneContacts;
                    this.calls = "无数据" && dat.onePhone;
                    this.labels = ["无数据"] && [dat.deviceType];
                    // var imgD = ["no"];
                    // this.imgsl = ["no"] && imgD;
                    this.deploymentTime = "无数据" && dat.stime;

                    var ct = document.getElementsByClassName('flare-liu-top')[0];
                    var cordActive = document.getElementsByClassName('el-tabs__active-bar')[0];//滑块背景颜色

                    if (dat.state != '') {
                        ct.style.backgroundImage = 'linear-gradient(to right, #F49966 , #F49966';
                        cordActive.style.backgroundImage = 'linear-gradient(to right, #F49966 , #F49966';
                        this.statesss = '故障';
                    } else {
                        if (dat.jtype != 1) {
                            if (dat.onlineStatus == 1) {//el-tabs__active-bar
                                ct.style.backgroundImage = 'linear-gradient(to right, #32C1A2 , #32C1A2';
                                cordActive.style.backgroundImage = 'linear-gradient(to right, #32C1A2 , #32C1A2';
                                this.statesss = '在线';
                            } else {
                                ct.style.backgroundImage = 'linear-gradient(to right, #CDCDCD , #CDCDCD';
                                cordActive.style.backgroundImage = 'linear-gradient(to right, #CDCDCD , #CDCDCD';
                                this.statesss = '离线';
                            }
                        } else {
                            ct.style.backgroundImage = 'linear-gradient(to right, #F35B5B , #F35B5B';
                            cordActive.style.backgroundImage = 'linear-gradient(to right, #F35B5B , #F35B5B';
                            this.statesss = '警报';
                        }
                    }
                    console.log(dat);
                },
                handleClick(tab, event) {//标签tab点击事件
                    // console.log(tab, event);
                }
                },
                getImgAndVideo() {
                    var that = this;
                    // console.log(this.datas.id)
                    axios({
                        method: "post",
                        url: "/api/blade-jfpts/feedback/feedback/selectFeedEdit",
                        params: {
                            jid: this.datas.id,
                        },
                    }).then((resdata) => {
                        var dL = resdata.data.data;
                        if (dL.length != 0) {
                            if (dL[0].tp.length > 0) {
                                // console.log(dL[0].tp);
                                that.imgSrc = dL[0].tp;
                                that.srcList = dL[0].tp;
                            }
                            if (dL[0].sp.length > 0) {
                                // console.log(dL[0].sp);
                                that.feedbackVideo = dL[0].sp[0];
                            }
                        }
                    });
                },
            },
            mounted() {
                this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
                    // console.log(this.$refs.sidIput.value);
                    clearTimeout(this.oldtime);
                    this.ourData = JSON.parse(this.$refs.sidIput.value);//json对象转js对象
                    // console.log(this.ourData);
                    this.getdatas(this.ourData);
                }, 20);


                    this.datas = JSON.parse(this.$refs.sidIput.value);//json对象转js对象
                    this.getdatas(this.datas);
                    // this.getImgAndVideo();
                }, 200);
            }
        })
    </script>