fix:修改水温深度监测

web

昨天 010ce04ba6e27f2bd603cec692d2695d7a8a3c1f

 src/views/screen/temperature/home/index.vue

@@ -2,27 +2,43 @@
    <div class="home">
        <div class="home-bg"></div>
        <div class="home-c">
            <div class="point" v-for="(item, index) in pointList" :key="index" :style="{left: item.left, top: item.top}">
            <div class="point" v-for="(item, index) in monitorList" :key="index"
                 :style="{left: item.left, top: item.top}">
                <div class="point-address" @click="handleShow(index)"></div>
                <div class="point-message" v-show="item.showMsg">
                   <div class="msg-box">
                       <div class="msg-t">{{ item.name }}</div>
                       <div class="num">
                           <div class="item">
                               <div class="item-t">水温:</div>
                               <div class="item-num"><span>{{item.temputer}}</span>°C</div>
                           </div>
                           <div class="item">
                               <div class="item-t">水位:</div>
                               <div class="item-num"><span>{{ item.shuiwei }}</span>m</div>
                           </div>
                       </div>
                       <div class="shebei">
                           监测设备：
                           <span v-if="item.device === 1" style="color: #1ab394">监测设备运行正常(点击跳转)</span>
                           <span v-else style="color: #ff0a0a">设备异常</span>
                       </div>
                   </div>
                    <div class="msg-box">
                        <div class="msg-t">{{ item.pointName }}</div>
                        <div class="num">
                            <div class="item">
                                <div class="item-t">水温:</div>
                                <div class="item-num"><span>{{ item?.dataList?.find(f => f.code === selectDeep[index]).value }}</span>°C</div>
                            </div>
                            <div class="item">
                                <div class="item-t">水位:</div>
                                <div class="item-num">
                                    <el-select
                                        v-model="selectDeep[index]"
                                        class="val-select"
                                        placeholder="Select"
                                        style="width: 10rem"
                                    >
                                        <el-option
                                            v-for="item in item?.dataList"
                                            :key="item.code"
                                            :label='item.code'
                                            :value="item.code"
                                        />
                                    </el-select>
                                    m
                                </div>
                            </div>
                        </div>
                        <div class="shebei">
                            监测设备：
                            <span v-if="item.isOnline === 1">设备运作正常</span>
                            <span v-else style="color: red">设备运作异常</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@@ -31,23 +47,48 @@


<script setup>
import pointApi from '@/api/facility/point.js'
import {ref, onMounted} from "vue";

const pointList = reactive([
    { name: '电站尾水出口水温监测点', temputer: 22, shuiwei: 1000, device: 1, left: '15%', top: '53%', showMsg: false },
    { name: '电站尾水出口水温监测点', temputer: 22, shuiwei: 1000, device: 2, left: '12%', top: '68%', showMsg: false },
])
const monitorList = ref([])
const selectDeep = ref([])

const handleShow = (index) => {
    pointList[index].showMsg = !pointList[index].showMsg;
// 标点配置
const config = [
    {left: '15%', top: '53%', showMsg: false},
    {left: '12%', top: '68%', showMsg: false},
]

// 获取监控点列表
const getMonitorList = () => {
    pointApi().search({type: 1, page: 1, limit: 3}).then(res => {
        let data = res.data.list.filter(el => el.parentId !== 0)
        if (data.length > 2) data = data.splice(0, 1)
        monitorList.value = data.map((item, index) => {
            selectDeep.value[index] = item?.dataList[0].code
            return {
                ...item,
                ...config[index]
            }
        })
    })
}

const handleShow = (index) => {
    monitorList.value[index].showMsg = !monitorList.value[index].showMsg;
}

onMounted(() => {
    getMonitorList()
})
</script>


<style scoped lang="scss">
.home{
.home {
    height: 100%;
    .home-bg{

    .home-bg {
        position: absolute;
        left: 0;
        top: 0;
@@ -57,20 +98,24 @@
        background-size: 100% 100%;
        z-index: 11;
    }
    .home-c{

    .home-c {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 20;
        .point{

        .point {
            position: absolute;
            .point-address{

            .point-address {
                width: 35px;
                height: 40px;
                background: url("@/assets/images/point.png") no-repeat;
                background-size: 100% 100%;
            }
            .point-message{

            .point-message {
                width: 500px;
                height: 180px;
                background: url("@/assets/images/messageInfo-right.png") no-repeat;
@@ -80,30 +125,49 @@
                top: -60px;
                padding: 30px 50px;
                color: #fff;
                .msg-box{

                .msg-box {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
                .msg-t{

                .msg-t {
                    font-size: 26px;
                    font-weight: bold;
                }
                .num{

                .num {
                    display: flex;
                    align-items: center;
                    gap: 50px;
                    .item{
                    gap: 30px;

                    .item {
                        display: flex;
                        align-items: center;
                        span{

                        span {
                            display: inline-block;
                            padding: 0 30px;
                            padding: 0 20px;
                            font-size: 22px;
                            font-weight: bold;
                        }
                        .val-select{
                            padding: 0 20px;
                            :deep(.el-select__wrapper){
                                background-color: transparent;
                                box-shadow: 0 0 0 1px #fff inset;
                                font-size: 20px;
                                .el-select__caret{
                                    color: #fff;
                                }
                                .el-select__placeholder{
                                    color: #fff;
                                }
                            }
                        }
                    }
                }
            }