fix:添加季度选择器

web

5 天以前 8f50c8203c8df64dd0a566b228bae7f69156e109

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

@@ -6,31 +6,31 @@
                <div class="point-address" @click="handleShow(index)"></div>
                <div class="point-message" v-show="item.showMsg">
                    <div class="msg-box">
                        <div class="video-box">
                        <div class="video-box" :style="{backgroundImage: `url(${item.imageRul})`}">
                            <el-icon><VideoPlay /></el-icon>
                        </div>
                        <div class="info-box">
                            <div class="info-t">{{ item.name }}</div>
                            <div class="info-sw">水位：<span>{{ item.shuiwei }}</span>m</div>
                            <div class="info-ls">流速：<span>{{item.liushu}}</span>m/s</div>
                            <div class="info-ssls">瞬时流速：<span>{{ item.ssls }}</span>m/s</div>
                            <div class="info-t">{{ item.pointName }}</div>
                            <div class="info-sw">水位：<span>{{ item.waterLevel }}</span>m</div>
                            <div class="info-ls">流速：<span>{{item.newFlow}}</span>m/s</div>
                            <div class="info-ssls">瞬时流速：<span>{{ item.flowVelocity }}</span>m/s</div>
                            <div class="info-ljll">
                                累计流量：
                                <el-select
                                    v-model="selectll"
                                    v-model="selectll[index]"
                                    class="m-2"
                                    placeholder="Select"
                                    size="small"
                                    style="width: 240px"
                                >
                                    <el-option
                                        v-for="(item, idx) in item.liuliangOptions"
                                        v-for="(item, idx) in liuliangOptions"
                                        :key="idx"
                                        :label="item.label"
                                        :value="idx"
                                        :value="item.value"
                                    />
                                </el-select>
                                <span>{{ item.liuliangOptions[selectll].value }}</span>m/s
                                <span>{{ item[selectll[index]] }}</span>m/s
                            </div>
                        </div>
                    </div>
@@ -42,34 +42,46 @@


<script setup>
import {ref} from "vue";
import {ref, onMounted} from "vue";
import {getHomePonit} from '@/api/screen/home/index.js'

const selectll = ref(0)
// 标点配置
const config = [
    { left: '18%', top: '67%', showMsg: false },
    { left: '60%', top: '12.5%', showMsg: false },
]
const liuliangOptions = [
    { label: '总计流量', value: 'totalFlow' },
    { label: '日累计流量', value: 'dayFlow' },
    { label: '周累计流量', value: 'weekFlow' },
    { label: '月累计流量', value: 'monthFlow' },
    { label: '年累计流量', value: 'yearFlow' },
]

const pointList = reactive([
    { name: '新扎沟口流量监测点', liushu: 22, ssls: '38', shuiwei: 1000, device: 1, left: '18%', top: '67%', showMsg: false,
        liuliangOptions: [
            { label: '总计流量', value: 500 },
            { label: '日累计流量', value: 1000 },
            { label: '周累计流量', value: 10000 },
            { label: '月累计流量', value: 300000 },
            { label: '年累计流量', value: 3600000 },
        ]
    },
    { name: '电站尾水出口水温监测点', liushu: 22, ssls: '38', shuiwei: 1000, device: 2, left: '60%', top: '12.5%', showMsg: false,
        liuliangOptions: [
            { label: '总计流量', value: 500 },
            { label: '日累计流量', value: 1000 },
            { label: '周累计流量', value: 10000 },
            { label: '月累计流量', value: 300000 },
            { label: '年累计流量', value: 3600000 },
        ]
    },
])
const selectll = ref(['totalFlow', 'totalFlow'])
const pointList = ref([])


const getPoint = () => {
    getHomePonit().then(res => {
        let data = res.data
        if(data.length > 2) data = data.splice(0, 1)
        pointList.value = data.map((item, index) => {
            return {
                ...item,
                ...config[index]
            }
        })
    })
}

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

onMounted(() => {
    getPoint()
})

</script>

@@ -124,7 +136,6 @@
                    line-height: 138px;
                    text-align: center;
                    font-size: 38px;
                    background: #cccb40;
                }
                .info-box{
                    height: 100%;