修改

zengh

2023-01-16 8aa3edd56c279100c9053576f3e90fa55459fe77

 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,64 @@
        .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;
            position: relative;
            left: -10px;

        }

        .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: #32C1A2; 
        }

        .el-tabs__item.is-active,
@@ -161,65 +169,41 @@
        <!-- 从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, #32C1A2 , #32C1A2)">
            <div class="f-l-t-heard">{{datas.tenant_name}}</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.dj}}</div>
                <div class="f-l-t-r-time">建立时间：{{datas.create_time}}</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="rbt-l">
                                <span class="r-b-t-left">联系人：</span>
                                <span class="r-b-t-right">{{ datas.linkman }} </span>
                            </div>
                            <div class="rbt-r">
                                <span class="r-b-t-left">电话：</span>
                                <span class="r-b-t-right">{{datas.contact_number}}</span>
                            </div>
                        </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.address }}</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> -->
                        <!-- 图暂时没有 -->
                        <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="r-b-t-main-once">
                            <span class="r-b-t-left">业主简介：</span>
                            <span class="r-b-t-right">{{ datas.content }}</span>
                            <!-- <span class="r-b-t-right introduce"></span> -->
                        </div>
                        <div class="r-b-t-main">
                            <span class="r-b-t-left">部署时间</span>
                            <span class="r-b-t-right">{{ deploymentTime }}</span>
                        </div>
                    
                    </div>
                </el-tab-pane>
                <!-- <el-tab-pane label="other" name="second">other</el-tab-pane> -->
          
                <!-- <el-tab-pane label="现场视频" name="third"><el-card></el-card></el-tab-pane> -->
            </el-tabs>
        </div>
    </div>
@@ -232,116 +216,68 @@
        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',
                // account_number: -1,
                // address: "江西省南昌市永外正街17号南昌大学一附院人事处",
                // background_url: "",
                // city: "3601",
                // contact_number: "0791-88695116",
                // content: "昌大学第一附属医院是一所集医疗、教学、科研、预防保健、康养于一体三级甲等综合医院，是江西省、南昌市医保定点医院",
                // create_dept: "1123598813738675201",
                // create_time: "2021-01-26 15:48:06",
                // create_user: "1123598821738675201",
                // ctime: "1939-08-10 00:00:00",
                // datasource_id: "1161483357481541634",
                // district: "360113",
                // dj: "     三级甲等",
                // domain: "",
                // ht: " 综合医院",
                // id: "1353972967828533249",
                // is_deleted: 0,
                // jd: "115.91029100000003",
                // license_key: "77cfee8356bb00cf9917f072f228ee10e7d0f5f15b257a66adc0192ee0ca33034019abaa8f441ed91da8f295f5cc7f1d04dac41a822fe51f5c29cb43ff85b240",
                // linkman: "赵明明",
                // province: "36",
                // status: 1,
                // tenant_id: "963841",
                // tenant_name: "南昌大学第一附属医院",
                // type: "0",
                // update_time: "2021-04-25 11:17:36",
                // update_user: "1123598821738675201",
                // wd: "25.87018472992316",
                
                // category
                // attributes
                // developers
                // had
                // housetype
                // ho
                // content
                // id
                // nature
                // motto
                // ctime
                // content
                // hn
            },
            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);
                    $('.introduce').append(dat.information)
                },
                handleClick(tab, event) {//标签tab点击事件
                    // console.log(tab, event);
                }
                },
            },
            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>