修改指标越限明细样式

2025-11-18 14:23:06 +08:00
parent 2048da5e52
commit 5bed340320
6 changed files with 499 additions and 494 deletions
--- a/src/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue
+++ b/src/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue
@@ -15,13 +15,13 @@ import { mainHeight } from '@/utils/layout'
 import { limitExtentDayData } from '@/api/harmonic-boot/cockpit/cockpit'

 const prop = defineProps({
-    width: { type: [String, Number] },
-    height: { type: [String, Number] },
-    timeKey: { type: [String, Number] },
+    width: { type:  [String, Number]},
+    height: { type:  [String, Number]},
+    timeKey: { type:  [String, Number]},
    timeValue: { type: Object }
 })

-const pageHeight = mainHeight(0, 2)
+const pageHeight = ref(mainHeight(332))

 const dialogVisible: any = ref(false)

@@ -36,44 +36,35 @@ const echartList = ref()
 const init = () => {
    echartList.value = {
        title: {
-            text: dialogText.value
-        },
-        legend: {
-            itemWidth: 20,
-            itemHeight: 20,
-            itemStyle: { opacity: 0 }, //去圆点
-            right: 70
-        },
-        tooltip: {
-            trigger: 'axis',
-            formatter: (params: any) => {
-                if (!params || params.length === 0) return ''
-
-                // 使用第一个项目的轴标签作为时间标题
-                let tooltipText = params[0].axisValueLabel + '<br/>'
-
-                // 遍历所有项目并累加到tooltipText中
-                params.forEach((item: any) => {
-                    // 将数值格式化为保留两位小数
-                    const formattedValue = Math.round(item.value[1] * 100) / 100
-                    tooltipText += `${item.marker} ${item.seriesName}: ${formattedValue}<br/>`
-                })
-
-                return tooltipText
-            }
-        },
-        xAxis: {
-            type: 'time',
-            axisLabel: {
-                formatter: {
-                    day: '{MM}-{dd}',
-                    month: '{MM}',
-                    year: '{yyyy}'
+            text: dialogText.value,
+            textStyle: {
+                fontSize: 14,
+                rich: {
+                    lineName: {
+                        color: '#333',
+                        fontSize: 14
+                    },
+                    timeLabel: {
+                        color: '#333',
+                        fontSize: 14,
+                        padding: [0, 0, 0, 10]
+                    },
+                    name: {
+                        color: '#333',
+                        fontSize: 14,
+                        padding: [0, 0, 0, 10]
+                    }
                }
            }
        },
-
-        yAxis: [{}, {}],
+        xAxis: {
+            type: 'category',
+            data: []
+        },
+        yAxis: {
+            type: 'value',
+            name: '数值'
+        },
        grid: {
            left: '1%',
            right: '45px',
@@ -121,17 +112,12 @@ const initData = async (row: any) => {

            // 处理每条相位数据
            const seriesData = res.data.map((item: any) => {
-                const values = xAxisData.map((time: string, index: number) => {
-                    // 将传入的日期与时间拼接成完整的时间字符串
-                    const fullTime = `${row.time} ${time}`
-                    const value = parseFloat(item.value.split(',')[index]) || 0
-                    return [fullTime, value]
-                })
+                const values = item.value.split(',').map((v: string) => parseFloat(v) || 0)

                return {
                    name: `${item.phasic}相`,
                    type: 'line',
-                    showSymbol: false,
+                    showSymbol: true,
                    smooth: true,
                    data: values,
                    itemStyle: {
@@ -144,17 +130,18 @@ const initData = async (row: any) => {
            })

            // 更新图表配置
+            echartList.value.xAxis.data = xAxisData
            echartList.value.options.series = seriesData
-            // 注意：使用时间轴时不需要设置 xAxis.data
        }
    })
 }
+
 onMounted(() => {})

 const open = async (row: any) => {
    dialogVisible.value = true
    dialogTitle.value = row.name + '日趋势图'
-    dialogText.value = `监测点:${row.lineName}    时间:${row.time}    指标:${row.name}`
+    dialogText.value = `{lineName|${row.lineName}}{timeLabel|${row.time}}{name|${row.name}日趋势图}`
    nextTick(() => {
        initData(row)
    })
--- a/src/components/cockpit/indicatorDetails/index.vue
+++ b/src/components/cockpit/indicatorDetails/index.vue
@@ -5,12 +5,19 @@
        <el-calendar
            v-model="value"
            :style="{
-                height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`,
-                overflow: 'auto',
+                height: `calc(${prop.height}  - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`,
+                overflow: 'auto'
            }"
+            v-loading="tableStore.table.loading"
        >
            <template #date-cell="{ data }">
-                <div style="height: 100%; padding: 8px" :style="{ background: setBackground(data.day) }">
+                <div
+                    style="padding: 8px"
+                    :style="{
+                        background: setBackground(data.day),
+                        height: `calc((${prop.height} - 100px - ${headerHeight}px + ${fullscreen ? 0 : 56}px) / 5 )`
+                    }"
+                >
                    <p :class="data.isSelected ? 'is-selected' : ''">
                        {{ data.day.split('-').slice(2).join('-') }}
                    </p>
@@ -18,13 +25,7 @@
                        <template #content>
                            <span v-html="getTextForDate(data.day)"></span>
                        </template>
-                        <div
-                            :style="{
-                                height: `calc(${prop.height} / 5 - 47px) `,
-                                overflow: 'auto'
-                            }"
-                            v-html="getTextForDate(data.day)"
-                        ></div>
+                        <div class="details" v-html="getTextForDate(data.day)"></div>
                    </el-tooltip>
                </div>
            </template>
@@ -36,7 +37,6 @@ import { ref, onMounted, provide, reactive, watch, h } from 'vue'
 import TableStore from '@/utils/tableStore'
 import TableHeader from '@/components/table/header/index.vue'
 import { dayjs } from 'element-plus'
-import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow'

 const prop = defineProps({
    w: { type: [String, Number] },
@@ -92,6 +92,7 @@ const tableStore: any = new TableStore({
        tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
    },
    loadCallback: () => {
+        value.value = tableStore.table.params.searchBeginTime
        // 将后端返回的数据整合到 list 中
        //     tableStore.table.data = [
        //     {
@@ -188,20 +189,25 @@ const addMenu = () => {}
 </script>
 <style lang="scss" scoped>
 :deep(.el-calendar) {
-    .el-calendar__header {
+    .el-calendar__button-group {
        display: none;
    }
    .el-calendar__body {
        padding: 0px !important;
-        height: 100%;
+        height: calc(100% - 46px);
        .el-calendar-table {
            height: 100%;
        }
    }
    .el-calendar-day {
+        // height: calc(912px / 5 );
        height: 100%;
        padding: 0px;
        overflow: hidden;
+        .details {
+            height: calc(100% - 20px);
+            overflow-y: auto;
+        }
    }
    .el-calendar-table__row {
        .next {
--- a/src/components/cockpit/indicatorDistribution/index.vue
+++ b/src/components/cockpit/indicatorDistribution/index.vue
@@ -10,22 +10,24 @@
                </el-form-item>
            </template>
        </TableHeader>
-        <my-echart
-            class="tall"
-            :options="echartList"
-            :style="{
-                width: prop.width,
-                height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
-            }"
-        />
-        <my-echart
-            class="mt10"
-            :options="echartList1"
-            :style="{
-                width: prop.width,
-                height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
-            }"
-        />
+        <div   v-loading="tableStore.table.loading">
+            <my-echart
+                class="tall"
+                :options="echartList"
+                :style="{
+                    width: prop.width,
+                    height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
+                }"
+            />
+            <my-echart
+                class="mt10"
+                :options="echartList1"
+                :style="{
+                    width: prop.width,
+                    height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
+                }"
+            />
+        </div>
    </div>
 </template>
 <script setup lang="ts">
--- a/src/utils/pageBubble.ts
+++ b/src/utils/pageBubble.ts
@@ -17,7 +17,7 @@ const bubble: {
    ctx: {},
    circles: [],
    animate: true,
-    requestId: null,
+    requestId: null
 }

 export const init = function (): void {
@@ -76,7 +76,7 @@ class Circle {
    constructor() {
        this.pos = {
            x: Math.random() * bubble.width,
-            y: bubble.height + Math.random() * 100,
+            y: bubble.height + Math.random() * 100
        }
        this.alpha = 0.1 + Math.random() * 0.3
        this.scale = 0.1 + Math.random() * 0.3
@@ -84,6 +84,16 @@ class Circle {
        this.draw = function () {
            this.pos.y -= this.velocity
            this.alpha -= 0.0005
+            // 当气泡超出顶部或透明度为 0 时，重置位置和属性
+            if (this.pos.y < -10 || this.alpha < 0) {
+                this.pos = {
+                    x: Math.random() * bubble.width,
+                    y: bubble.height + Math.random() * 100
+                }
+                this.alpha = 0.1 + Math.random() * 0.35
+                this.scale = 0.1 + Math.random() * 0.35
+                this.velocity = Math.random()
+            }
            bubble.ctx.beginPath()
            bubble.ctx.arc(this.pos.x, this.pos.y, this.scale * 10, 0, 2 * Math.PI, false)
            bubble.ctx.fillStyle = 'rgba(255,255,255,' + this.alpha + ')'
--- a/src/views/auth/userList/index.vue
+++ b/src/views/auth/userList/index.vue
@@ -107,7 +107,7 @@ const tableStore = new TableStore({
                        return row.state !== 1
                    },
                    click: row => {
-                        ElMessageBox.prompt('二次校验密码确认', '注销用户', {
+                        ElMessageBox.prompt('二次校验密码确认', '修改密码', {
                            confirmButtonText: '确认',
                            cancelButtonText: '取消',
                            inputType: 'password'
--- a/src/views/auth/userList/popupPwd.vue
+++ b/src/views/auth/userList/popupPwd.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog width=“500px” v-model.trim="dialogVisible" title="修改密码">
+    <el-dialog width='500px' draggable v-model.trim="dialogVisible" title="修改密码">
        <el-scrollbar>
            <el-form :inline="false" :model="form" label-width="120px" class="form-one" :rules="rules" ref="formRef">
                <el-form-item label="新密码" prop="newPwd">