修改指标越限明细样式

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] },
+    width: { type:  [String, Number]},
-    height: { type: [String, Number] },
+    height: { type:  [String, Number]},
-    timeKey: { 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
+            text: dialogText.value,
-        },
+            textStyle: {
-        legend: {
+                fontSize: 14,
-            itemWidth: 20,
+                rich: {
-            itemHeight: 20,
+                    lineName: {
-            itemStyle: { opacity: 0 }, //去圆点
+                        color: '#333',
-            right: 70
+                        fontSize: 14
-        },
+                    },
-        tooltip: {
+                    timeLabel: {
-            trigger: 'axis',
+                        color: '#333',
-            formatter: (params: any) => {
+                        fontSize: 14,
-                if (!params || params.length === 0) return ''
+                        padding: [0, 0, 0, 10]
-
+                    },
-                // 使用第一个项目的轴标签作为时间标题
+                    name: {
-                let tooltipText = params[0].axisValueLabel + '<br/>'
+                        color: '#333',
-
+                        fontSize: 14,
-                // 遍历所有项目并累加到tooltipText中
+                        padding: [0, 0, 0, 10]
-                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}'
                 }
             }
         },
-
+        xAxis: {
-        yAxis: [{}, {}],
+            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 values = item.value.split(',').map((v: string) => parseFloat(v) || 0)
-                    // 将传入的日期与时间拼接成完整的时间字符串
-                    const fullTime = `${row.time} ${time}`
-                    const value = parseFloat(item.value.split(',')[index]) || 0
-                    return [fullTime, value]
-                })
 
                 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)
     })

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 )`,
+                height: `calc(${prop.height}  - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`,
-                overflow: 'auto',
+                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
+                        <div class="details" v-html="getTextForDate(data.day)"></div>
-                            :style="{
-                                height: `calc(${prop.height} / 5 - 47px) `,
-                                overflow: 'auto'
-                            }"
-                            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 {

src/components/cockpit/indicatorDistribution/index.vue

@@ -10,22 +10,24 @@
                 </el-form-item>
             </template>
         </TableHeader>
-        <my-echart
+        <div   v-loading="tableStore.table.loading">
-            class="tall"
+            <my-echart
-            :options="echartList"
+                class="tall"
-            :style="{
+                :options="echartList"
-                width: prop.width,
+                :style="{
-                height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
+                    width: prop.width,
-            }"
+                    height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
-        />
+                }"
-        <my-echart
+            />
-            class="mt10"
+            <my-echart
-            :options="echartList1"
+                class="mt10"
-            :style="{
+                :options="echartList1"
-                width: prop.width,
+                :style="{
-                height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
+                    width: prop.width,
-            }"
+                    height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
-        />
+                }"
+            />
+        </div>
     </div>
 </template>
 <script setup lang="ts">

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 + ')'

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'

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">