fix:添加季度选择器

web

4 天以前 8f50c8203c8df64dd0a566b228bae7f69156e109

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

@@ -2,25 +2,25 @@
    <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="msg-t">{{ item.pointName }}</div>
                       <div class="num">
                           <div class="item">
                               <div class="item-t">水温:</div>
                               <div class="item-num"><span>{{item.temputer}}</span>°C</div>
                               <div class="item-num"><span>{{item.waterTemperature}}</span>°C</div>
                           </div>
                           <div class="item">
                               <div class="item-t">水位:</div>
                               <div class="item-num"><span>{{ item.shuiwei }}</span>m</div>
                               <div class="item-num"><span>{{ item.waterLevel }}</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>
                           <span v-if="item.isOnline === 1">设备运作正常</span>
                           <span v-else style="color: red">设备运作异常</span>
                       </div>
                   </div>
                </div>
@@ -31,16 +31,38 @@


<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 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) => {
            return {
                ...item,
                ...config[index]
            }
        })
    })
}

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

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