fix:修改水温深度选择

web

2025-05-05 92e4c0f5deeba69d52603da02bea2ab7836bb9f6

fix:修改水温深度选择

 .env.development

@@ -9,4 +9,4 @@
VITE_APP_IMG_BASEURL='https://www.huiwuyuntong.com/water-hydropower-beta/upload'

#后端本地
  VITE_APP_PUBLIC_REQUEST_API = 'https://www.huiwuyuntong.com/water-hydropower-beta'
  VITE_APP_PUBLIC_REQUEST_API = 'http://192.168.0.67:8036'

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

@@ -178,7 +178,7 @@
                                </div>
                            </div>
                            <div class="info-btn">
                                <div class="fullScreen" @click="handleFullScreen(index)">
                                <div class="fullScreen" v-if="item.url" @click="handleFullScreen(index)">
                                    <img src="@/assets/images/flow/screenIconWhite.png" alt="" />
                                    全屏
                                </div>
@@ -340,15 +340,14 @@
                        .info-btn {
                            width: 15%;
                            padding: 1rem 0;
                            display: flex;
                            align-items: flex-end;
                            flex-direction: column;
                            justify-content: space-between;
                            position: relative;
                            :deep(.el-button) {
                                color: #fff;
                                background: rgba(94, 229, 92, 0.6);
                                border-radius: 4px 4px 4px 4px;
                                border: 1px solid rgba(94, 229, 92, 0.6);
                                position: absolute;
                                bottom: 1rem;
                            }
                            .fullScreen{
                                width: 100%;

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

@@ -7,12 +7,25 @@
import { getGraphicData } from '@/api/screen/graphic/index.js'
import { debounce } from '@/utils/tool.js'

const deepCOnfig = [
    { label: '10米', value: 10 },
    { label: '20米', value: 20 },
    { label: '30米', value: 30 },
    { label: '40米', value: 40 },
    { label: '50米', value: 50 },
    { label: '60米', value: 60 },
    { label: '70米', value: 70 },
    { label: '80米', value: 80 },
    { label: '90米', value: 90 },
    { label: '100米', value: 100 },
]

const menuList = ref([])
const timeType = ref(1) //时间类型 1日 2周 3月 4季 5年
const showTime = ref(moment().format('YYYY-MM-DD')); //展示时间
const timeValue = ref(moment().format('YYYY-MM-DD'))  //处理后得时间
const searchVal = ref()
const tempDeep = ref(50)
const graphicRef = ref(null)
const chartsRef = ref([])  //动态生成图表ref
const chartData = ref([])
@@ -77,8 +90,6 @@
        yAxis: {
            type: 'value',
            name: unit,
            max: 40,
            min: 0,
            nameTextStyle: {
                color: '#fff',
                fontSize: '1rem'
@@ -240,6 +251,7 @@
        pointId: point,
        pointName: searchVal.value,
        dataTime: timeValue.value,
        waterLevel: tempDeep.value
    }
    getGraphicData(data).then(async res => {
        chartData.value = res.data
@@ -298,7 +310,7 @@
                        v-model="showTime"
                        type="date"
                        placeholder="选择时间"
                        style="width: 15rem"
                        style="width: 12rem"
                        @change="getTime"
                    />
                    <el-date-picker
@@ -307,7 +319,7 @@
                        type="week"
                        format="YYYY年 ww[周]"
                        placeholder="选择时间"
                        style="width: 15rem"
                        style="width: 12rem"
                        @change="getTime"
                    />
                    <el-date-picker
@@ -315,7 +327,7 @@
                        v-model="showTime"
                        type="month"
                        placeholder="选择时间"
                        style="width: 15rem"
                        style="width: 12rem"
                        @change="getTime"
                    />
                    <Quarter
@@ -323,7 +335,7 @@
                        placeholder="选择时间"
                        :default-value="showTime"
                        clearable
                        style="width: 15rem"
                        style="width: 12rem"
                        @change="getTime"
                    />
                    <el-date-picker
@@ -331,9 +343,18 @@
                        v-model="showTime"
                        type="year"
                        placeholder="选择时间"
                        style="width: 15rem"
                        style="width: 12rem"
                        @change="getTime"
                    />
                    <div class="name">深度</div>
                    <el-select v-model="tempDeep" style="width: 10rem">
                        <el-option
                            v-for="item in deepCOnfig"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                    <el-input v-model="searchVal" style="width: 15rem" clearable placeholder="请输入监测点名称"/>
                    <el-button @click="() => getChartData()">
                        <el-icon>

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

@@ -11,6 +11,7 @@

const menuList = ref([])
const monitorList = ref([])
const selectDeep = ref([])
const monitorConfig = ref({})
const userType = ref(getUserType())
const monitorRef = ref()
@@ -47,7 +48,8 @@
    }
    pointApi().search(data).then(res => {
        //0-未报警， 1-下限报警， 2-上限报警
        monitorList.value = res.data.list.filter(el => el.parentId !== 0).map(item => {
        monitorList.value = res.data.list.filter(el => el.parentId !== 0).map((item, index) => {
            selectDeep.value[index] = item?.dataList[0].code
            return {
                ...item,
                errorType: Number(item.waterTemperature) < Number(item.lowWaterLevel) ? 1 : Number(item.waterTemperature) > Number(item.tallWaterLevel) ? 2 : 0
@@ -177,11 +179,25 @@
                        <div class="item-data">
                            <div class="data">
                                <div class="name">水温:</div>
                                <div class="val"><span>{{ item.waterTemperature }}</span>°C</div>
                                <div class="val"><span>{{ item?.dataList?.find(f => f.code === selectDeep[index]).value }}</span>°C</div>
                            </div>
                            <div class="data">
                                <div class="name">水位:</div>
                                <div class="val"><span>{{ item.waterLevel }}</span>m</div>
                                <div class="val">
                                    <el-select
                                        v-model="selectDeep[index]"
                                        class="val-select"
                                        placeholder="Select"
                                        style="width: 12rem"
                                    >
                                        <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="item-status">
@@ -214,11 +230,11 @@
                        <div class="item-btn">
                            <el-button size="large" type="success" @click="setMonitorData(item)">应用</el-button>
                        </div>
                        <div class="item-error" v-if="[1,2].includes(item.errorType)">
                            <img src="@/assets/images/warning.png" alt="" />
                            <div v-if="item.errorType === 1">水温达到下限值</div>
                            <div v-else-if="item.errorType === 2">水温达到上限值</div>
                        </div>
<!--                        <div class="item-error" v-if="[1,2].includes(item.errorType)">-->
<!--                            <img src="@/assets/images/warning.png" alt="" />-->
<!--                            <div v-if="item.errorType === 1">水温达到下限值</div>-->
<!--                            <div v-else-if="item.errorType === 2">水温达到上限值</div>-->
<!--                        </div>-->
                    </div>
                </div>
            </div>
@@ -384,11 +400,24 @@
                            font-size: 22px;

                            .val {
                                span {
                                span{
                                    display: inline-block;
                                    font-size: 30px;
                                    padding: 0 30px;
                                }
                                .val-select{
                                    padding: 0 30px;
                                    :deep(.el-select__wrapper){
                                        background-color: transparent;
                                        box-shadow: none;
                                        border-radius: 0;
                                        border-bottom: 1px solid #fff;
                                        font-size: 20px;
                                        .el-select__caret{
                                            color: #fff;
                                        }
                                    }
                                }
                            }
                        }
                    }

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

@@ -6,6 +6,19 @@
import moment from "moment";

const cascaderOption = { label: 'pointName', value: 'id', children: 'childrenList', expandTrigger: 'hover', emitPath: false }; //级联选择器配置
const deepCOnfig = [
    { label: '10米', value: 10 },
    { label: '20米', value: 20 },
    { label: '30米', value: 30 },
    { label: '40米', value: 40 },
    { label: '50米', value: 50 },
    { label: '60米', value: 60 },
    { label: '70米', value: 70 },
    { label: '80米', value: 80 },
    { label: '90米', value: 90 },
    { label: '100米', value: 100 },
]


const menuList = ref([])
const pointId = ref('')
@@ -21,7 +34,7 @@
    value: moment().format('YYYY-MM-DD'),
    data: []
})

const tempDeep = ref(50)
const wenduChartRef = ref()
const shuiweiChartRef = ref()
let wenduCharts = null;
@@ -198,7 +211,8 @@
    const data = {
        type: wendu.type,
        dataTime: wendu.value,
        pointId: pointId.value
        pointId: pointId.value,
        waterLevel: tempDeep.value
    }
    getStatisticsData(data).then(res => {
        wendu.data = res.data
@@ -240,7 +254,15 @@
            <div class="item-t">
                <div class="name">水温汇总统计</div>
                <div class="select">
                    <el-cascader size="large" v-model="pointId" :options="menuList" :show-all-levels="false" :props="cascaderOption" clearable @change="getTempData" />
                    <el-select v-model="tempDeep" style="width: 10rem">
                        <el-option
                            v-for="item in deepCOnfig"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                    <el-cascader v-model="pointId" :options="menuList" :show-all-levels="false" :props="cascaderOption" clearable @change="getTempData" />
                    <el-radio-group v-model="wendu.type" @change="handleSelectType('wendu')">
                        <el-radio :value="1">日</el-radio>
                        <el-radio :value="3">月</el-radio>
@@ -339,7 +361,20 @@
                color: #fff;
            }
            .select{
                :deep(.el-select) {
                    width: 8rem;
                    margin-right: 2rem;
                    .el-select__wrapper{
                        background-color: transparent;
                        box-shadow: none;
                        border: 1px solid #fff;
                    }
                    .el-select__placeholder{
                        color: #fff;
                    }
                }
                :deep(.el-cascader){
                    width: 12rem;
                    margin-right: 2rem;
                    .el-input__wrapper{
                        background-color: transparent;