feat:增加温度系统界面

web

2025-03-21 de1de0e73bd260cb1babe7b15c9e943a381009de

feat:增加温度系统界面

 index.html

@@ -17,10 +17,6 @@
      height: 100%;
      margin: 0;
      padding: 0;
        //控制初始字体大小
        @media(min-width: 1921px) and (max-width: 3840px) {
            font-size: 32px;
        }
    }

    .chromeframe {

 src/api/screen/warning/index.js

对比新文件
@@ -0,0 +1,27 @@
import {publicRequest} from '@/utils/request'


/**
 * 报警历史数据
 * @param data 搜索分页数据
 */
export const warnHistory = (data) => {
    return publicRequest({
        url: '/alarmHistory/search',
        method: 'post',
        data
    })
}

/**
 * 报警历史数据导出
 * @param data 搜索分页数据
 */
export const exportWarnHistory = (params) => {
    return publicRequest({
        url: '/alarmHistory/exportExcel',
        method: 'get',
        params,
        responseType: 'blob'
    })
}

 src/assets/styles/element-ui.css

文件已删除

 src/assets/styles/element-ui.min.css

文件已删除

 src/assets/styles/element-ui.scss

@@ -1,9 +1,6 @@
// cover some element-ui styles


.el-dialog{
  min-width:45vw;
}
.el-dialog__body{
  overflow-y: auto;
  max-height: 70vh;
@@ -58,7 +55,6 @@
.el-dialog {
  border-radius: 10px;
  background-color: rgb(244, 247, 250);
  min-height:40vh;
}

// refine element ui upload

 src/assets/styles/index.css

文件已删除

 src/assets/styles/index.min.css

文件已删除

 src/assets/styles/index.scss

@@ -6,6 +6,13 @@
@import './btn.scss';
@import './ruoyi.scss';

html{
  font-size: 16px;
  //控制初始字体大小
  @media(min-width: 1921px) and (max-width: 3840px) {
    font-size: 32px;
  }
}
body {
  height: 100%;
  margin: 0;
@@ -202,4 +209,4 @@
  .el-form-item{
    width: 46%;
  }
}
}

 src/assets/styles/ruoyi.css

文件已删除

 src/assets/styles/ruoyi.min.css

文件已删除

 src/assets/styles/variables.module.css

文件已删除

 src/assets/styles/variables.module.min.css

文件已删除

 src/components/Table/index.vue

@@ -14,6 +14,10 @@
import {onMounted, ref} from "vue";

const props = defineProps({
    searchData: {
        type: Object,
        default: () => {}
    },
    getList: {
        type: Function,
        default: () => {},
@@ -38,12 +42,13 @@
})
const loading = ref(false);

const getData = (data) => {
    const pagedata = { limit: state.limit, page: data.page}
// 默认第一页
const getData = (data={page:1}) => {
    const pagedata = { limit: state.limit, page: data.page, ...props.searchData }
    loading.value = true;
    props.getList(pagedata).then(res => {
        state.list = res.list
        state.total = res.total
        state.list = res.data.list
        state.total = res.data.total
    }).finally(() => {
        loading.value = false;
    })
@@ -51,6 +56,11 @@

onMounted(() =>{
    getData({ page: state.page })
})

// 将方法抛出去，外面可以调用
defineExpose({
    getData
})
</script>

@@ -94,17 +104,16 @@
                </el-table-column>
            </template>
        </el-table>
        <div class="pagination">
        <div class="pagination" v-show="state.total > 0">
            <div class="pagination-total">共{{state.total}}条</div>
            <pagination
                v-show="state.total > 0"
                layout="prev, pager, next, jumper"
                :total="state.total"
                :page="state.current"
                :limit="state.limit"
                @pagination="getData"
            />
            <!-- 页面右侧自定义插槽，可以加自定义按钮 -->
            <!-- 页码右侧自定义插槽，可以加自定义按钮 -->
            <slot name="pagination"></slot>
        </div>
    </div>
@@ -119,6 +128,9 @@
        color: #fff;
    }
}
:deep(.el-table--default .el-table__cell){
    padding: 12px 0;
}
:deep(.pagination-container){
    background-color: transparent;
    margin: 0;

 src/components/TopNav/index.vue

@@ -169,7 +169,7 @@
})
</script>

<style lang="scss">
<style lang="scss" scoped>
.topmenu-container.el-menu--horizontal > .el-menu-item {
  float: left;
  height: 50px !important;

 src/layout/components/AppMain.vue

@@ -51,7 +51,7 @@
}
</style>

<style lang="scss">
<style lang="scss" scoped>
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {

 src/layout/components/TagsView/index.vue

@@ -313,7 +313,7 @@
}
</style>

<style lang="scss">
<style lang="scss" scoped>
//reset element css of el-icon-close
.tags-view-wrapper {
  .tags-view-item {

 src/utils/index.js

@@ -472,4 +472,16 @@
export function isNumberStr(str) {
  return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
}

/**
 * blob文件流导出
 */
export function exportBlobFile(blob) {
  const link = document.createElement('a')
  const url = URL || window.webkitURL
  const href = url.createObjectURL(blob)
  link.href = href;
  link.download = '报警记录.xlsx'
  link.click()
}
 

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

@@ -9,28 +9,30 @@
])
const time = ref()
let tableHead = [
    { prop: 'code', label: '报警代码' },
    { prop: 'shebei', label: '报警设备', },
    { prop: 'content', label: '报警内容' },
    { prop: 'time', label: '报警时间' },
    { prop: 'sure', label: '报警确认', slot: true },
    { prop: 'code', label: '流速 (m/s)' },
    { prop: 'shebei', label: '瞬时流量 (m³/h)', },
    { prop: 'content', label: '累计流量 (m³)' },
    { prop: 'sure', label: '采集点' },
    { prop: 'time', label: '采集时间' },
]

const getTableData = () => {
    return new Promise(resolve => {
        let arr = {
            list: [
                { code: '201', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                { code: '202', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
                { code: '203', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                { code: '204', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                { code: '205', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                { code: '206', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                { code: '207', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                { code: '208', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
                { code: '209', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                { code: '2010', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
            ],
            data:{
                list: [
                    { code: '201', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '202', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
                    { code: '203', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                    { code: '204', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '205', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '206', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '207', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '208', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
                    { code: '209', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                    { code: '2010', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                ]
            },
            total: 30,
        }
        resolve(arr)
@@ -73,6 +75,7 @@
            <el-date-picker
                v-model="time"
                type="datetimerange"
                format="YYYY-MM-DD HH:mm:ss"
                size="large"
                style="width: 30rem"
                range-separator="至"

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

@@ -1,17 +1,28 @@
<script setup>
import {onMounted, ref} from "vue";
import {onMounted, ref, reactive} from "vue";
import * as echarts from 'echarts/core';
import Table from '@/components/Table/index.vue'
import { warnHistory, exportWarnHistory } from '@/api/screen/warning/index.js'
import { exportBlobFile } from '@/utils/index.js'

const tableRef = ref(null)
const timeType = ref(0)
const warnChartRef = ref()
const exportTime = ref()
const searchData = reactive({
    createTimeRange: ''
})

const openDialog = ref(false)
const dialogInfo = ref()

let warnCharts = null;
let tableHead = [
    { prop: 'code', label: '报警代码' },
    { prop: 'shebei', label: '报警设备', },
    { prop: 'content', label: '报警内容' },
    { prop: 'time', label: '报警时间' },
    { prop: 'sure', label: '报警确认', slot: true },
    { prop: 'facilityName', label: '报警设备', },
    { prop: 'description', label: '报警内容' },
    { prop: 'lastTimeView', label: '报警时间' },
    { prop: 'isConfirm', label: '报警确认', slot: true },
]

const initWarnChart = () => {
@@ -61,26 +72,28 @@
    }
}

const getTableData = () => {
    return new Promise(resolve => {
        let arr = {
            list: [
                { code: '201', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                { code: '202', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
                { code: '203', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                { code: '204', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                { code: '205', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                { code: '206', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                { code: '207', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                { code: '208', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
                { code: '209', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                { code: '2010', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
            ],
            total: 30,
        }
        resolve(arr)
const searchTable = () => {
    if(exportTime.value) {
        searchData.createTimeRange = exportTime.value[0] + '~' + exportTime.value[1]
    }
    tableRef.value.getData()
}

// 导出报警报表
const exportWarnTabl = () => {
    exportWarnHistory({ createTimeRange: searchData.createTimeRange }).then(res => {
        exportBlobFile(res)
    })
}

// 获取报警内容
const getWarnInfi = (data) => {
    dialogInfo.value = data
    openDialog.value = true
}

// 处理报警内容
const handleComfirm = () => {}

onMounted(() => {
    initWarnChart()
@@ -105,20 +118,77 @@
        <div class="warn-r item">
            <div class="item-t">
                <div class="name">报警记录</div>
                <div>
                    <el-date-picker
                        v-model="exportTime"
                        type="datetimerange"
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        style="width: 28rem"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                    />
                    <el-button type="primary" style="margin-left: 15px" @click="searchTable">搜索</el-button>
                </div>
            </div>
            <div class="warn-table">
                <Table :getList="getTableData" :headList="tableHead">
                    <template #sure="scope">
                        <div v-if="scope.row.sure === 1" style="color: #1ab394">已处理</div>
                        <div v-else-if="scope.row.sure === 2"  style="color: #e8ab04">未处理</div>
                        <div v-else style="color: #f30101">待确认</div>
                <Table :getList="warnHistory" :searchData="searchData" :headList="tableHead" ref="tableRef">
                    <template #isConfirm="scope">
                        <div v-if="scope.row.isConfirm === 200" style="color: #1ab394">已处理</div>
                        <div v-else-if="scope.row.isConfirm === 20"  style="color: #e8ab04" @click="getWarnInfi(scope.row)">未处理</div>
                        <div v-else style="color: #f30101" @click="getWarnInfi(scope.row)">待确认</div>
                    </template>
                    <template v-slot:pagination>
                        <el-button type="success" style="width: 6rem">导出</el-button>
                        <el-button type="success" style="width: 6rem" @click="exportWarnTabl">导出</el-button>
                    </template>
                </Table>
            </div>
        </div>
        <el-dialog
            v-model="openDialog"
            title="报警确认框"
            width="40rem"
            show-close
            class="warnDialog"
        >
            <div class="message">
                <div class="message-item">
                    <div class="title">报警代码:</div>
                    <div class="val">{{dialogInfo.code}}</div>
                </div>
                <div class="message-item">
                    <div class="title">报警设备:</div>
                    <div class="val">{{dialogInfo.facilityName}}</div>
                </div>
                <div class="message-item">
                    <div class="title">报警内容:</div>
                    <div class="val">{{dialogInfo.description}}</div>
                </div>
                <div class="message-line">
                    <div class="title">报警时间:</div>
                    <div class="val">{{dialogInfo.lastTime}}</div>
                </div>
                <div class="message-line">
                    <div class="title">报警确认:</div>
                    <div class="val">
                        <el-radio-group v-model="timeType">
                            <el-radio :value="1">已处理</el-radio>
                            <el-radio :value="2">已证实</el-radio>
                            <el-radio :value="3">误  报</el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="openDialog = false">取消</el-button>
                <el-button type="primary" @click="handleComfirm">
                  确定
                </el-button>
              </span>
            </template>
        </el-dialog>
    </div>
</template>

@@ -146,6 +216,9 @@
                font-size: 36px;
                color: #fff;
            }
            :deep(.el-date-editor){
                flex-grow: 0;
            }
            .select{
                :deep(.el-radio){
                    color: #fff;
@@ -170,4 +243,28 @@
        }
    }
}
.warnDialog{
    .message{
        display: flex;
        flex-wrap: wrap;
        .message-item{
            width: 50%;
            display: flex;
            align-items: center;
            padding: 10px 0;
            .val{
                margin-left: 10px;
            }
        }
        .message-line{
            width: 100%;
            padding: 10px 0;
            display: flex;
            align-items: center;
            .val{
                margin-left: 10px;
            }
        }
    }
}
</style>

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

@@ -3,11 +3,69 @@
</script>

<template>
    <div>
        图形分析
    <div class="graphic">
        <div class="graphic-menu">
            <div class="menu-t">监测点列表</div>
            <el-menu class="el-menu">
                <el-sub-menu index="1">
                    <template #title>
                        <span>可移动监测点</span>
                    </template>
                    <el-menu-item index="1-1">水电站流量监测点</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <span>固定位监测点</span>
                    </template>
                    <el-menu-item index="2-1">新扎口流量监测点</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </div>
    </div>
</template>

<style scoped lang="scss">
.graphic {
    height: 100%;
    display: flex;
    &-menu {
        flex-shrink: 0;
        width: 20%;
        height: 100%;
        padding: 10px 0;
        background: linear-gradient(135deg, #91BDDB 0%, #9EC2DB 99%);
        overflow-y: scroll;

        &::-webkit-scrollbar {
            display: none;
        }

        .menu-t {
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
            font-size: 26px;
            color: #fff;
            background: url("@/assets/images/flow/monitor-title-bg.png") no-repeat;
            background-size: 100% 100%;
        }

        .el-menu {
            background-color: transparent;
            border-right: none;

            :deep(.el-menu) {
                background-color: transparent;
            }

            :deep(.el-sub-menu__title:hover) {
                background-color: rgba(0, 0, 0, 0.06);
            }

            :deep(.el-menu-item.is-active) {
                color: #fff;
            }
        }
    }
}
</style>

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

@@ -1,13 +1,369 @@
 <script setup>
 import {ref} from "vue";
 import {getUserType} from '@/utils/auth.js'
 const userType = ref(getUserType())
 const monitorRef = ref()
 const searchVal = ref('')
 const selectType = ref(1);
 const typeOption = ref([
     { label: '水电站流量监测点', value: 1 },
     { label: '新扎口流量监测点', value: 2 },
 ])
 const video = ref()

 // 全屏操作
 const handleFullScreen = () => {
     monitorRef.value.requestFullscreen()
 }

</script>

<template>
    <div>
        实时监测
    <div class="monitor">
        <div class="monitor-menu">
            <div class="menu-t">监测点列表</div>
            <el-menu class="el-menu">
                <el-sub-menu index="1">
                    <template #title>
                        <span>可移动监测点</span>
                    </template>
                    <el-menu-item index="1-1">水电站流量监测点</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <span>固定位监测点</span>
                    </template>
                    <el-menu-item index="2-1">新扎口流量监测点</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </div>
        <div class="monitor-info">
            <div class="monitor-tool">
                <div class="tool-l">
                    <div class="name">监测点区域</div>
                    <el-select
                        v-model="selectType"
                        class="tool-select"
                        placeholder="Select"
                        style="width: 15rem"
                    >
                        <el-option
                            v-for="item in typeOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                    <el-input v-model="searchVal" style="width: 20rem" placeholder="请输入监测点名称" />
                    <el-button><el-icon><Search /></el-icon>搜索</el-button>
                    <el-button style="margin-left: 0" v-if="userType === '1'"><el-icon><Plus /></el-icon>新增</el-button>
                </div>
                <div class="tool-r" @click="handleFullScreen">
                    <img src="@/assets/images/flow/fullscreen.png" />
                    全屏
                </div>
            </div>
            <div class="monitor-box" ref="monitorRef">
                <div class="monitor-list">
                    <div class="item">
                        <div class="item-t">电站进水口水温监测点</div>
                        <div class="item-data">
                            <div class="data">
                                <div class="name">水温:</div>
                                <div class="val"><span>2</span>°C</div>
                            </div>
                            <div class="data">
                                <div class="name">水位:</div>
                                <div class="val"><span>2000</span>m</div>
                            </div>
                        </div>
                        <div class="item-status">
                            压力式水位水温计工作状况：
                            <span >设备运作正常</span>
                        </div>
                        <div class="item-set">
                            <div class="setbox">
                                <div class="name">里程设置：</div>
                                <el-input  />
                            </div>
                            <div class="setbox">
                                <div class="name">投放度设置：</div>
                                <el-input  />
                            </div>
                            <div class="setbox">
                                <div class="name">高程设置：</div>
                                <el-input  />
                            </div>
                            <div class="setbox">
                                <div class="name">水位下限设置：</div>
                                <el-input  />
                            </div>
                            <div class="setbox">
                                <div class="name">水温下限设置：</div>
                                <el-input  />
                            </div>
                            <div class="setbox">
                                <div class="name">水位计采集间隔设置：</div>
                                <el-select>
                                    <el-option>60s</el-option>
                                    <el-option>120s</el-option>
                                    <el-option>300s</el-option>
                                    <el-option>600s</el-option>
                                </el-select>
                            </div>
                            <div class="setbox">
                                <div class="name">记录上报间隔设置：</div>
                                <el-select>
                                    <el-option>60s</el-option>
                                    <el-option>120s</el-option>
                                    <el-option>300s</el-option>
                                    <el-option>600s</el-option>
                                </el-select>
                            </div>
                            <div class="setbox">
                                <div class="name">实时数据上报间隔设置：</div>
                                <el-select>
                                    <el-option>60s</el-option>
                                    <el-option>120s</el-option>
                                    <el-option>300s</el-option>
                                    <el-option>600s</el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="item-btn"><el-button size="large" type="success">批量应用</el-button></div>
                    </div>
                    <div class="item">
                        <div class="item-t">电站进水口水温监测点</div>
                        <div class="item-data">
                            <div class="data">
                                <div class="name">水温:</div>
                                <div class="val"><span>2</span>°C</div>
                            </div>
                            <div class="data">
                                <div class="name">水位:</div>
                                <div class="val"><span>2000</span>m</div>
                            </div>
                        </div>
                        <div class="item-status">
                            压力式水位水温计工作状况：
                            <span >设备运作正常</span>
                        </div>
                        <div class="item-set">
                            <div class="setbox">
                                <div class="name">里程设置：</div>
                                <el-input  />
                            </div>
                            <div class="setbox">
                                <div class="name">投放度设置：</div>
                                <el-input  />
                            </div>
                            <div class="setbox">
                                <div class="name">高程设置：</div>
                                <el-input  />
                            </div>
                            <div class="setbox">
                                <div class="name">水位下限设置：</div>
                                <el-input  />
                            </div>
                            <div class="setbox">
                                <div class="name">水温下限设置：</div>
                                <el-input  />
                            </div>
                            <div class="setbox">
                                <div class="name">水位计采集间隔设置：</div>
                                <el-select>
                                    <el-option>60s</el-option>
                                    <el-option>120s</el-option>
                                    <el-option>300s</el-option>
                                    <el-option>600s</el-option>
                                </el-select>
                            </div>
                            <div class="setbox">
                                <div class="name">记录上报间隔设置：</div>
                                <el-select>
                                    <el-option>60s</el-option>
                                    <el-option>120s</el-option>
                                    <el-option>300s</el-option>
                                    <el-option>600s</el-option>
                                </el-select>
                            </div>
                            <div class="setbox">
                                <div class="name">实时数据上报间隔设置：</div>
                                <el-select>
                                    <el-option>60s</el-option>
                                    <el-option>120s</el-option>
                                    <el-option>300s</el-option>
                                    <el-option>600s</el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="item-btn"><el-button size="large" type="success">批量应用</el-button></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.monitor {
    height: 100%;
    display: flex;
    &-menu {
        flex-shrink: 0;
        width: 20%;
        height: 100%;
        padding: 10px 0;
        background: linear-gradient(135deg, #91BDDB 0%, #9EC2DB 99%);
        overflow-y: scroll;

        &::-webkit-scrollbar {
            display: none;
        }

        .menu-t {
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
            font-size: 26px;
            color: #fff;
            background: url("@/assets/images/flow/monitor-title-bg.png") no-repeat;
            background-size: 100% 100%;
        }

        .el-menu {
            background-color: transparent;
            border-right: none;

            :deep(.el-menu) {
                background-color: transparent;
            }

            :deep(.el-sub-menu__title:hover) {
                background-color: rgba(0, 0, 0, 0.06);
            }

            :deep(.el-menu-item.is-active) {
                color: #fff;
            }
        }
    }
    .monitor-info{
        flex-shrink: 0;
        width: 80%;
        height: 100%;
        background: linear-gradient( 180deg, #91BDDB 0%, rgba(102, 102, 102, 0.5) 100%);
        .monitor-tool{
            width: 100%;
            height: 60px;
            padding: 0 30px;
            background: linear-gradient( 90deg, #91BDDB 0%, #DADFE3 100%);
            display: flex;
            align-items: center;
            justify-content: space-between;
            .tool-l{
                display: flex;
                align-items: center;
                gap: 1rem;
                .name{
                    font-size: 1.1rem;
                }
            }
            .tool-r{
                display: flex;
                align-items: center;
                img{
                    width: 25px;
                    margin-right: 10px;
                }
            }
        }
        .monitor-box{
            height: calc(100% - 60px);
            .monitor-list{
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 30px;
                .item{
                    width: 48%;
                    height: 96%;
                    background: rgba(23,108,229,0.3);
                    border: 1px solid #176CE5;
                    padding: 20px;
                    border-radius: 8px;
                    .item-t{
                        font-size: 36px;
                        color: #fff;
                        text-align: center;
                    }
                    .item-data{
                        height: 30%;
                        display: flex;
                        align-items: center;
                        .data{
                            width: 50%;
                            display: flex;
                            align-items: center;
                            color: #fff;
                            font-size: 22px;
                            .val{
                                span{
                                    display: inline-block;
                                    font-size: 30px;
                                    padding: 0 30px;
                                }
                            }
                        }
                    }
                    .item-status{
                        height: 8%;
                        font-size: 22px;
                        color: #fff;
                    }
                    .item-set{
                        display: flex;
                        flex-wrap: wrap;
                        align-content: center;
                        .setbox{
                            width: 50%;
                            margin-top: 40px;
                            padding: 0 10px;
                            display: flex;
                            align-items: center;
                            .name{
                                flex-shrink: 0;
                                color: #fff;
                            }
                            :deep(.el-input__wrapper){
                                background-color: transparent;
                                border-bottom: 1px solid #fff;
                                box-shadow: none;
                                border-radius: 0;
                            }
                            :deep(.el-select__wrapper){
                                background-color: transparent;
                                box-shadow: none;
                                border-radius: 0;
                                .el-select__placeholder.is-transparent{
                                    color: #FFF;
                                }
                                .el-select__suffix .el-select__caret{
                                    color: #fff;
                                }
                            }
                        }
                    }
                    .item-btn{
                        height: 10%;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                    }
                }
            }
        }
    }
}
</style>

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

@@ -1,13 +1,119 @@
<script setup>
import {ref} from "vue";
import Table from '@/components/Table/index.vue'

const selectType = ref(1);
const typeOption = ref([
    { label: '水电站流量监测点', value: 1 },
    { label: '新扎口流量监测点', value: 2 },
])
const time = ref()
let tableHead = [
    { prop: 'code', label: '流速 (m/s)' },
    { prop: 'shebei', label: '瞬时流量 (m³/h)', },
    { prop: 'content', label: '累计流量 (m³)' },
    { prop: 'sure', label: '采集点' },
    { prop: 'time', label: '采集时间' },
]

const getTableData = () => {
    return new Promise(resolve => {
        let arr = {
            data:{
                list: [
                    { code: '201', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '202', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
                    { code: '203', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                    { code: '204', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '205', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '206', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '207', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '208', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
                    { code: '209', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                    { code: '2010', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                ]
            },
            total: 30,
        }
        resolve(arr)
    })
}

</script>

<template>
    <div>
        报表管理
    <div class="report">
        <div class="report-tool">
            <el-select
                v-model="selectType"
                class="tool-select"
                size="large"
                placeholder="Select"
                style="width: 20rem"
            >
                <el-option
                    v-for="item in typeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <el-select
                v-model="selectType"
                class="tool-select"
                size="large"
                placeholder="Select"
                style="width: 20rem"
            >
                <el-option
                    v-for="item in typeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <el-date-picker
                v-model="time"
                type="datetimerange"
                format="YYYY-MM-DD HH:mm:ss"
                size="large"
                style="width: 30rem"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
            />
            <el-button type="success" size="large" style="width: 6rem">一键导出</el-button>
        </div>
        <div class="report-table">
            <Table :getList="getTableData" :headList="tableHead"></Table>
        </div>
    </div>
</template>

<style scoped lang="scss">

.report{
    height: 100%;
    background: linear-gradient( 180deg, #91BDDB 0%, rgba(102, 102, 102, 0.5) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    &-tool{
        padding: 10px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
        :deep(.el-date-editor){
            flex-grow: 0;
        }
    }
    &-table{
        width: 96%;
        height: 90%;
        background: rgba(23,108,229,0.3);
        border: 1px solid #176CE5;
        border-radius: 8px;
        padding: 20px;
    }
}
</style>

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

@@ -1,13 +1,357 @@
<script setup>
import {ref} from "vue";
import {getUserType} from '@/utils/auth.js'

const userType = ref(getUserType())
const monitorRef = ref()
const searchVal = ref('')
const selectNum = ref(6);
const numOption = ref([
    { label: '6个', value: 6 },
    { label: '2个', value: 2 },
    { label: '1个', value: 1 },
])

const shebeiData = ref([
    { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
    { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
    { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
    { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
    { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
    { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
    { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
    { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
])

// 全屏操作
const handleFullScreen = () => {
    monitorRef.value.requestFullscreen()
}

</script>

<template>
    <div>
        设备管理
    <div class="shebei">
        <div class="shebei-menu">
            <div class="menu-t">设备列表</div>
            <el-menu class="el-menu">
                <el-sub-menu index="1">
                    <template #title>
                        <span>雷达水位计</span>
                    </template>
                    <el-menu-item index="1-1">SWY001</el-menu-item>
                    <el-menu-item index="1-2">SWY002</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <span>雷达测速仪</span>
                    </template>
                    <el-menu-item index="2-1">CY001</el-menu-item>
                    <el-menu-item index="2-2">CY002</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="3">
                    <template #title>
                        <span>雷达流量计</span>
                    </template>
                    <el-menu-item index="3-1">LJL001</el-menu-item>
                    <el-menu-item index="3-2">LJL002</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </div>
        <div class="shebei-monitor">
            <div class="monitor-tool">
                <div class="tool-l">
                    <div class="name">展示数量</div>
                    <el-select
                        v-model="selectNum"
                        class="tool-select"
                        placeholder="Select"
                        style="width: 15rem"
                    >
                        <el-option
                            v-for="item in numOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                    <el-input v-model="searchVal" style="width: 20rem" placeholder="请输入监测点名称" />
                    <el-button><el-icon><Search /></el-icon>搜索</el-button>
                    <el-button style="margin-left: 0" v-if="userType === '1'"><el-icon><Plus /></el-icon>新增</el-button>
                </div>
                <div class="tool-r" @click="handleFullScreen">
                    <img src="@/assets/images/flow/fullscreen.png" />
                    全屏
                </div>
            </div>
            <div class="monitor-box" ref="monitorRef">
                <div class="list-six list" v-if="selectNum === 6">
                    <div class="item" v-for="(item, index) in shebeiData" :key="index">
                        <div class="item-t">
                            <div>{{item.name}}</div>
                            <div>{{item.code}}</div>
                        </div>
                        <div class="item-img">
                            <img v-if="item.image" :src="item.image" />
                        </div>
                        <div class="item-info">
                            <div class="online">设备在线状态： <span :style="{color: item.online ? '#56d12c' : '#bababa'}">{{item.online ? '在线' : '掉线'}}</span></div>
                            <div class="time">安装时间： <span>{{item.time}}</span></div>
                            <div class="address">安装位置： <span>{{item.address}}</span></div>
                        </div>
                    </div>
                </div>
                <div class="list-two list" v-else-if="selectNum === 2">
                    <div class="item" v-for="(item, index) in shebeiData" :key="index">
                        <div class="item-t">
                            <div>{{item.name}}</div>
                            <div>{{item.code}}</div>
                        </div>
                        <div class="item-img">
                            <img v-if="item.image" :src="item.image" />
                        </div>
                        <div class="item-info">
                            <div class="online">设备在线状态： <span :style="{color: item.online ? '#56d12c' : '#bababa'}">{{item.online ? '在线' : '掉线'}}</span></div>
                            <div class="time">安装时间： <span>{{item.time}}</span></div>
                            <div class="address">安装位置： <span>{{item.address}}</span></div>
                        </div>
                    </div>
                </div>
                <div class="list-one list" v-else-if="selectNum === 1">
                    <div class="item" v-for="(item, index) in shebeiData" :key="index">
                        <div class="item-t">
                            <div>{{item.name}}</div>
                            <div>{{item.code}}</div>
                        </div>
                        <div class="item-img">
                            <img v-if="item.image" :src="item.image" />
                        </div>
                        <div class="item-info">
                            <div class="online">设备在线状态： <span :style="{color: item.online ? '#56d12c' : '#bababa'}">{{item.online ? '在线' : '掉线'}}</span></div>
                            <div class="time">安装时间： <span>{{item.time}}</span></div>
                            <div class="address">安装位置： <span>{{item.address}}</span></div>
                        </div>
                    </div>
                </div>
                <div class="list-single" v-else></div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">

.shebei{
    height: 100%;
    display: flex;
    &-menu{
        flex-shrink: 0;
        width: 20%;
        height: 100%;
        padding: 10px 0;
        background: linear-gradient( 135deg, #91BDDB 0%, #9EC2DB 99%);
        overflow-y: scroll;
        &::-webkit-scrollbar {
            display: none;
        }
        .menu-t{
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
            font-size: 26px;
            color: #fff;
            background: url("@/assets/images/flow/monitor-title-bg.png") no-repeat;
            background-size: 100% 100%;
        }
        .el-menu{
            background-color: transparent;
            border-right: none;
            :deep(.el-menu){
                background-color: transparent;
            }
            :deep(.el-sub-menu__title:hover) {
                background-color: rgba(0, 0, 0, 0.06);
            }
            :deep(.el-menu-item.is-active) {
                color: #fff;
            }
        }
    }
    &-monitor{
        flex-shrink: 0;
        width: 80%;
        height: 100%;
        background: linear-gradient( 180deg, #91BDDB 0%, rgba(102, 102, 102, 0.5) 100%);
        .monitor-tool{
            width: 100%;
            height: 60px;
            padding: 0 30px;
            background: linear-gradient( 90deg, #91BDDB 0%, #DADFE3 100%);
            display: flex;
            align-items: center;
            justify-content: space-between;
            .tool-l{
                display: flex;
                align-items: center;
                gap: 1rem;
                .name{
                    font-size: 1.1rem;
                }
            }
            .tool-r{
                display: flex;
                align-items: center;
                img{
                    width: 25px;
                    margin-right: 10px;
                }
            }
        }
        .monitor-box{
            height: calc(100% - 60px);
            padding-top: 10px;
            .list{
                height: 100%;
                padding: 0 30px;
                overflow-y: scroll;
                &::-webkit-scrollbar {
                    display: none;
                }
                .item{
                    flex-shrink: 0;
                    background: rgba(23,108,229,0.3);
                    border: 1px solid #176CE5;
                    border-radius: 8px;
                }
            }
            .list-six{
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
                .item{
                    width: 32%;
                    height: 48%;
                    padding: 10px 20px;
                    .item-t{
                        height: 10%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-size: 28px;
                        color: #fff;
                    }
                    .item-img{
                        margin-top: 10px;
                        width: 100%;
                        height: 68%;
                        background-color: #000;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .item-info{
                        height: 18%;
                        display: flex;
                        flex-wrap: wrap;
                        color: #fff;
                        font-size: 1.2rem;
                        .online,
                        .time{
                            width: 50%;
                            padding: 6px 0;
                        }
                        .address{
                            width: 100%;
                        }
                    }
                }
            }
            .list-two{
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
                .item{
                    width: 49%;
                    height: 99%;
                    padding: 30px;
                    .item-t{
                        height: 10%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-size: 36px;
                        color: #fff;
                    }
                    .item-img{
                        margin-top: 10px;
                        width: 100%;
                        height: 68%;
                        background-color: #000;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .item-info{
                        display: flex;
                        flex-wrap: wrap;
                        color: #fff;
                        font-size: 1.5rem;
                        .online,
                        .time{
                            width: 50%;
                            padding: 20px 0;
                        }
                        .address{
                            width: 100%;
                        }
                    }
                }
            }
            .list-one{
                display: flex;
                flex-direction: column;
                align-items: center;
                .item{
                    width: 70%;
                    height: 99%;
                    padding: 30px;
                    margin-bottom: 30px;
                    .item-t{
                        height: 10%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-size: 36px;
                        color: #fff;
                    }
                    .item-img{
                        margin-top: 10px;
                        width: 100%;
                        height: 75%;
                        background-color: #000;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .item-info{
                        display: flex;
                        flex-wrap: wrap;
                        color: #fff;
                        font-size: 1.5rem;
                        .online,
                        .time{
                            width: 50%;
                            padding: 20px 0;
                        }
                        .address{
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}
</style>

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

@@ -1,13 +1,280 @@
<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts/core';

const wenduType = ref(3)
const wenduChartRef = ref()
let wenduCharts = null;
const wenduTimeValue = ref()
const shuiweiType = ref(3)
const shuiweiChartRef = ref()
let shuiweiCharts = null
const shuiweiTimeValue = ref()

const handleSelectType = (type) => {
    if(type === 'wendu') {
        wenduTimeValue.value = 0
    } else if (type === 'shuiwei') {
        shuiweiTimeValue.value = 0
    }
}

const initwenduChart = () => {
    if(wenduChartRef.value) {
        wenduCharts = echarts.init(wenduChartRef.value);
        const options = {
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                top: 80,
                left: 60,
                right: 60,
                bottom: 60
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['设备离线', '水位异常', '流量异常', '流速异常', '其他异常'],
                axisLabel: {
                    color: '#fff',
                    fontSize: '1.2rem'
                }
            },
            yAxis: {
                type: 'value',
                name: '℃',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: '1.2rem'
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: '1.2rem'
                }
            },
            series: [
                {
                    data: [36, 44, 38, 24, 63],
                    type: 'line',
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#00FFFF'  // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(0,255,255,0.2)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }
            ]
        }
        wenduCharts.setOption(options);
    }
}

const initshuiweiChart = () => {
    if(shuiweiChartRef.value) {
        shuiweiCharts = echarts.init(shuiweiChartRef.value);
        const options = {
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                top: 80,
                left: 60,
                right: 60,
                bottom: 60
            },
            xAxis: {
                type: 'category',
                data: ['设备离线', '水位异常', '流量异常', '流速异常', '其他异常'],
                axisLabel: {
                    color: '#fff',
                    fontSize: '1.2rem'
                }
            },
            yAxis: {
                type: 'value',
                name: 'm',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: '1.2rem'
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: '1.2rem'
                }
            },
            series: [
                {
                    data: [36, 44, 38, 24, 63],
                    type: 'bar',
                    itemStyle: {
                        color: '#BBCFFF'
                    }
                }
            ]
        }
        shuiweiCharts.setOption(options);
    }
}

onMounted(() => {
    initwenduChart()
    initshuiweiChart()
})
</script>

<template>
    <div>
        汇总统计
    <div class="statis">
        <div class="item">
            <div class="item-t">
                <div class="name">水温汇总统计</div>
                <div class="select">
                    <el-radio-group v-model="wenduType" @change="handleSelectType('wendu')">
                        <el-radio :value="1">日</el-radio>
                        <el-radio :value="2">月</el-radio>
                        <el-radio :value="3">年</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="charts" ref="wenduChartRef"></div>
            <div class="title">
                <el-date-picker
                    v-if="wenduType === 1"
                    v-model="wenduTimeValue"
                    type="date"
                    placeholder="请选择时间"
                />
                <el-date-picker
                    v-else-if="wenduType === 2"
                    v-model="wenduTimeValue"
                    type="month"
                    placeholder="请选择时间"
                />
                <el-date-picker
                    v-else
                    v-model="wenduTimeValue"
                    type="year"
                    placeholder="请选择时间"
                />
                <div>电站平均水温汇总</div>
            </div>
        </div>
        <div class="item">
            <div class="item-t">
                <div class="name">水位汇总统计</div>
                <div class="select">
                    <el-radio-group v-model="shuiweiType" @change="handleSelectType('shuiwei')">
                        <el-radio :value="1">日</el-radio>
                        <el-radio :value="2">月</el-radio>
                        <el-radio :value="3">年</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="charts" ref="shuiweiChartRef"></div>
            <div class="title">
                <el-date-picker
                    v-if="wenduType === 1"
                    v-model="shuiweiTimeValue"
                    type="date"
                    placeholder="请选择时间"
                />
                <el-date-picker
                    v-else-if="wenduType === 2"
                    v-model="shuiweiTimeValue"
                    type="month"
                    placeholder="请选择时间"
                />
                <el-date-picker
                    v-else
                    v-model="shuiweiTimeValue"
                    type="year"
                    placeholder="请选择时间"
                />
                <div>电站平均水位汇总</div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">

.statis{
    height: 100%;
    background: linear-gradient( 180deg, #91BDDB 0%, rgba(102, 102, 102, 0.5) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    .item{
        width: 48%;
        height: 96%;
        background: rgba(23,108,229,0.3);
        border: 1px solid #176CE5;
        border-radius: 8px;
        .item-t{
            height: 10%;
            padding: 0 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name{
                font-size: 36px;
                color: #fff;
            }
            .select{
                :deep(.el-radio){
                    color: #fff;
                }
                :deep(.el-radio__label){
                    font-size: 20px;
                }
                :deep(.el-radio__input.is-checked+.el-radio__label){
                    color: #00ff00;
                }
                :deep(.el-radio__input.is-checked .el-radio__inner){
                    background-color: #00ff00;
                }
            }
        }
        .charts{
            height: 80%;
        }
        .title{
            height: 10%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            color: #fff;
            :deep(.el-date-editor){
                width: 10rem;
            }
            :deep(.el-input__wrapper){
                background-color: transparent;
                box-shadow: none;
                border-radius: 0;
                .el-input__prefix{
                    color: #fff;
                    font-size: 1.2rem;
                }
                .el-input__inner{
                    color: #fff;
                    font-size: 1.2rem;
                    &::placeholder{
                        color: #fff;
                        font-size: 1.2rem;
                    }
                }
            }
        }
    }
}
</style>

 src/views/system/user/index.vue

@@ -341,7 +341,7 @@
    getUserType()
    getList();
    </script>
    <style lang="scss">
    <style lang="scss" scoped>
    .table-headImg{
        max-width: 100px;
        height: 50px;