From 5bed340320933c0d08a6c4516b3fbfe4088d0d2a Mon Sep 17 00:00:00 2001
From: guanj <guan0550>
Date: Tue, 18 Nov 2025 14:23:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8C=87=E6=A0=87=E8=B6=8A?=
 =?UTF-8?q?=E9=99=90=E6=98=8E=E7=BB=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/dailyTrendChart.vue            |  83 ++--
 .../cockpit/indicatorDetails/index.vue        |  32 +-
 .../cockpit/indicatorDistribution/index.vue   |  34 +-
 src/utils/pageBubble.ts                       | 218 ++++-----
 src/views/auth/userList/index.vue             | 428 +++++++++---------
 src/views/auth/userList/popupPwd.vue          | 198 ++++----
 6 files changed, 499 insertions(+), 494 deletions(-)

diff --git a/src/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue b/src/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue
index 6985ad4..c761d21 100644
--- 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)
     })
diff --git a/src/components/cockpit/indicatorDetails/index.vue b/src/components/cockpit/indicatorDetails/index.vue
index 3805335..d42b074 100644
--- 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 {
diff --git a/src/components/cockpit/indicatorDistribution/index.vue b/src/components/cockpit/indicatorDistribution/index.vue
index 7a9341b..ee702d0 100644
--- 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">
diff --git a/src/utils/pageBubble.ts b/src/utils/pageBubble.ts
index f024753..75a8dd0 100644
--- a/src/utils/pageBubble.ts
+++ b/src/utils/pageBubble.ts
@@ -1,104 +1,114 @@
-// 页面气泡效果
-
-const bubble: {
-    width: number
-    height: number
-    bubbleEl: any
-    canvas: any
-    ctx: any
-    circles: any[]
-    animate: boolean
-    requestId: any
-} = {
-    width: 0,
-    height: 0,
-    bubbleEl: null,
-    canvas: null,
-    ctx: {},
-    circles: [],
-    animate: true,
-    requestId: null,
-}
-
-export const init = function (): void {
-    bubble.width = window.innerWidth
-    bubble.height = window.innerHeight
-
-    bubble.bubbleEl = document.getElementById('bubble')
-    bubble.bubbleEl.style.height = bubble.height + 'px'
-
-    bubble.canvas = document.getElementById('bubble-canvas')
-    bubble.canvas.width = bubble.width
-    bubble.canvas.height = bubble.height
-    bubble.ctx = bubble.canvas.getContext('2d')
-
-    // create particles
-    bubble.circles = []
-    for (let x = 0; x < bubble.width * 0.5; x++) {
-        const c = new Circle()
-        bubble.circles.push(c)
-    }
-    animate()
-    addListeners()
-}
-
-function scrollCheck() {
-    bubble.animate = document.body.scrollTop > bubble.height ? false : true
-}
-
-function resize() {
-    bubble.width = window.innerWidth
-    bubble.height = window.innerHeight
-    bubble.bubbleEl.style.height = bubble.height + 'px'
-    bubble.canvas.width = bubble.width
-    bubble.canvas.height = bubble.height
-}
-
-function animate() {
-    if (bubble.animate) {
-        bubble.ctx.clearRect(0, 0, bubble.width, bubble.height)
-        for (const i in bubble.circles) {
-            bubble.circles[i].draw()
-        }
-    }
-    bubble.requestId = requestAnimationFrame(animate)
-}
-
-class Circle {
-    pos: {
-        x: number
-        y: number
-    }
-    alpha: number
-    scale: number
-    velocity: number
-    draw: () => void
-    constructor() {
-        this.pos = {
-            x: Math.random() * bubble.width,
-            y: bubble.height + Math.random() * 100,
-        }
-        this.alpha = 0.1 + Math.random() * 0.3
-        this.scale = 0.1 + Math.random() * 0.3
-        this.velocity = Math.random()
-        this.draw = function () {
-            this.pos.y -= this.velocity
-            this.alpha -= 0.0005
-            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 + ')'
-            bubble.ctx.fill()
-        }
-    }
-}
-
-function addListeners() {
-    window.addEventListener('scroll', scrollCheck)
-    window.addEventListener('resize', resize)
-}
-
-export function removeListeners() {
-    window.removeEventListener('scroll', scrollCheck)
-    window.removeEventListener('resize', resize)
-    cancelAnimationFrame(bubble.requestId)
-}
+// 页面气泡效果
+
+const bubble: {
+    width: number
+    height: number
+    bubbleEl: any
+    canvas: any
+    ctx: any
+    circles: any[]
+    animate: boolean
+    requestId: any
+} = {
+    width: 0,
+    height: 0,
+    bubbleEl: null,
+    canvas: null,
+    ctx: {},
+    circles: [],
+    animate: true,
+    requestId: null
+}
+
+export const init = function (): void {
+    bubble.width = window.innerWidth
+    bubble.height = window.innerHeight
+
+    bubble.bubbleEl = document.getElementById('bubble')
+    bubble.bubbleEl.style.height = bubble.height + 'px'
+
+    bubble.canvas = document.getElementById('bubble-canvas')
+    bubble.canvas.width = bubble.width
+    bubble.canvas.height = bubble.height
+    bubble.ctx = bubble.canvas.getContext('2d')
+
+    // create particles
+    bubble.circles = []
+    for (let x = 0; x < bubble.width * 0.5; x++) {
+        const c = new Circle()
+        bubble.circles.push(c)
+    }
+    animate()
+    addListeners()
+}
+
+function scrollCheck() {
+    bubble.animate = document.body.scrollTop > bubble.height ? false : true
+}
+
+function resize() {
+    bubble.width = window.innerWidth
+    bubble.height = window.innerHeight
+    bubble.bubbleEl.style.height = bubble.height + 'px'
+    bubble.canvas.width = bubble.width
+    bubble.canvas.height = bubble.height
+}
+
+function animate() {
+    if (bubble.animate) {
+        bubble.ctx.clearRect(0, 0, bubble.width, bubble.height)
+        for (const i in bubble.circles) {
+            bubble.circles[i].draw()
+        }
+    }
+    bubble.requestId = requestAnimationFrame(animate)
+}
+
+class Circle {
+    pos: {
+        x: number
+        y: number
+    }
+    alpha: number
+    scale: number
+    velocity: number
+    draw: () => void
+    constructor() {
+        this.pos = {
+            x: Math.random() * bubble.width,
+            y: bubble.height + Math.random() * 100
+        }
+        this.alpha = 0.1 + Math.random() * 0.3
+        this.scale = 0.1 + Math.random() * 0.3
+        this.velocity = Math.random()
+        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 + ')'
+            bubble.ctx.fill()
+        }
+    }
+}
+
+function addListeners() {
+    window.addEventListener('scroll', scrollCheck)
+    window.addEventListener('resize', resize)
+}
+
+export function removeListeners() {
+    window.removeEventListener('scroll', scrollCheck)
+    window.removeEventListener('resize', resize)
+    cancelAnimationFrame(bubble.requestId)
+}
diff --git a/src/views/auth/userList/index.vue b/src/views/auth/userList/index.vue
index 5e00cb8..54e9a01 100644
--- a/src/views/auth/userList/index.vue
+++ b/src/views/auth/userList/index.vue
@@ -1,214 +1,214 @@
-<template>
-    <div class="default-main">
-        <TableHeader>
-            <template v-slot:select>
-                <el-form-item label="用户状态">
-                    <el-select v-model.trim="tableStore.table.params.searchState" placeholder="选择用户状态">
-                        <el-option v-for="(item, index) in userState" :label="item.label" :key="index"
-                            :value="item.value"></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="用户类型:">
-                    <el-select v-model.trim="tableStore.table.params.casualUser" placeholder="选择用户类型">
-                        <el-option v-for="(item, index) in casualUser" :label="item.label" :key="index"
-                            :value="item.value"></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="关键字筛选:">
-                    <el-input maxlength="32" show-word-limit style="width: 240px"
-                        v-model.trim="tableStore.table.params.searchValue" clearable placeholder="仅根据用户名/登录名" />
-                </el-form-item>
-            </template>
-            <template v-slot:operation>
-                <el-button :icon="Plus" type="primary" @click="addUser">添加</el-button>
-            </template>
-        </TableHeader>
-        <Table ref="tableRef" />
-        <PopupEdit ref="popupEditRef"></PopupEdit>
-        <PopupPwd ref="popupPwdRef"></PopupPwd>
-    </div>
-</template>
-<script setup lang="ts">
-import { Plus } from '@element-plus/icons-vue'
-import { ref, onMounted, provide } from 'vue'
-import { ElMessageBox, ElMessage } from 'element-plus'
-import { activateUser, deluser, passwordConfirm } from '@/api/user-boot/user'
-import TableStore from '@/utils/tableStore'
-import Table from '@/components/table/index.vue'
-import TableHeader from '@/components/table/header/index.vue'
-import PopupEdit from './popupEdit.vue'
-import PopupPwd from './popupPwd.vue'
-
-defineOptions({
-    name: 'auth/userlist'
-})
-const popupEditRef = ref()
-const popupPwdRef = ref()
-const tableStore = new TableStore({
-    url: '/user-boot/user/list',
-    method: 'POST',
-    column: [
-        { title: '用户名称', field: 'name', minWidth: '130' },
-        { title: '登录名', field: 'loginName', minWidth: '130' },
-        { title: '角色', field: 'roleName', minWidth: '130' },
-        // { title: '部门', field: 'deptName', minWidth: '200' },
-        { title: '电话', field: 'phoneShow', minWidth: '100' },
-        { title: '注册时间', field: 'registerTime', minWidth: '130', sortable: true },
-        { title: '登录时间', field: 'loginTime', minWidth: '130', sortable: true },
-        { title: '类型', field: 'casualUserName', minWidth: '80' },
-        {
-            title: '状态',
-            field: 'state',
-            width: '100',
-            render: 'tag',
-            custom: {
-                0: 'danger',
-                1: 'success',
-                2: 'warning',
-                3: 'warning',
-                4: 'info',
-                5: 'danger'
-            },
-            replaceValue: {
-                0: '注销',
-                1: '正常',
-                2: '锁定',
-                3: '待审核',
-                4: '休眠',
-                5: '密码过期'
-            }
-        },
-        {
-            title: '操作',
-            width: '180',
-            render: 'buttons',
-            fixed: 'right',
-            buttons: [
-                {
-                    name: 'edit',
-                    title: '编辑',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton',
-                    disabled: row => {
-                        return row.state !== 1
-                    },
-                    click: row => {
-                        popupEditRef.value.open('编辑用户', row)
-                    }
-                },
-                {
-                    name: 'edit',
-                    title: '修改密码',
-                    type: 'primary',
-                    icon: 'el-icon-Lock',
-                    render: 'basicButton',
-                    disabled: row => {
-                        return row.state !== 1
-                    },
-                    click: row => {
-                        ElMessageBox.prompt('二次校验密码确认', '注销用户', {
-                            confirmButtonText: '确认',
-                            cancelButtonText: '取消',
-                            inputType: 'password'
-                        }).then(({ value }) => {
-                            passwordConfirm(value).then(res => {
-                                popupPwdRef.value.open(row.id)
-                            })
-                        })
-                    }
-                },
-                {
-                    name: 'edit',
-                    title: '激活',
-                    type: 'primary',
-                    icon: 'el-icon-Open',
-                    render: 'basicButton',
-                    disabled: row => {
-                        return row.state !== 2 && row.state !== 5 && row.state !== 0 && row.state !== 4
-                    },
-                    click: row => {
-                        activateUser({
-                            id: row.id
-                        }).then(() => {
-                            ElMessage.success('激活成功')
-                            tableStore.index()
-                        })
-                    }
-                },
-                {
-                    name: 'edit',
-                    title: '注销',
-                    type: 'danger',
-                    icon: 'el-icon-SwitchButton',
-                    render: 'basicButton',
-                    disabled: row => {
-                        return row.state !== 1 && row.state !== 3
-                    },
-                    click: row => {
-                        ElMessageBox.prompt('二次校验密码确认', '注销用户', {
-                            confirmButtonText: '确认',
-                            cancelButtonText: '取消',
-                            inputType: 'password'
-                        }).then(({ value }) => {
-                            passwordConfirm(value).then(res => {
-                                deluser({
-                                    id: row.id
-                                }).then(() => {
-                                    ElMessage.success('注销成功')
-                                    tableStore.index()
-                                })
-                            })
-                        })
-                    }
-                }
-            ]
-        }
-    ],
-
-    loadCallback: () => {
-        tableStore.table.data.forEach((item: any) => {
-            item.deptName = item.deptName || '/'
-            item.phoneShow = item.phone || '/'
-            item.roleName = item.role.length ? item.role : '/'
-            switch (item.casualUser) {
-                case 0:
-                    item.casualUserName = '临时用户'
-                    break
-                case 1:
-                    item.casualUserName = '长期用户'
-                    break
-                default:
-                    item.casualUserName = '/'
-                    break
-            }
-        })
-    }
-})
-
-provide('tableStore', tableStore)
-tableStore.table.params.searchState = 1
-tableStore.table.params.casualUser = -1
-tableStore.table.params.orderBy = ''
-const userState = [
-    { label: '全部', value: -1 },
-    { label: '注销', value: 0 },
-    { label: '正常', value: 1 },
-    { label: '锁定', value: 2 },
-    { label: '待审核', value: 3 },
-    { label: '休眠', value: 4 },
-    { label: '密码过期', value: 5 }
-]
-const casualUser = [
-    { label: '全部', value: -1 },
-    { label: '临时用户', value: 0 },
-    { label: '长期用户', value: 1 }
-]
-onMounted(() => {
-    tableStore.index()
-})
-
-const addUser = () => {
-    popupEditRef.value.open('新增用户')
-}
-</script>
+<template>
+    <div class="default-main">
+        <TableHeader>
+            <template v-slot:select>
+                <el-form-item label="用户状态">
+                    <el-select v-model.trim="tableStore.table.params.searchState" placeholder="选择用户状态">
+                        <el-option v-for="(item, index) in userState" :label="item.label" :key="index"
+                            :value="item.value"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="用户类型:">
+                    <el-select v-model.trim="tableStore.table.params.casualUser" placeholder="选择用户类型">
+                        <el-option v-for="(item, index) in casualUser" :label="item.label" :key="index"
+                            :value="item.value"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="关键字筛选:">
+                    <el-input maxlength="32" show-word-limit style="width: 240px"
+                        v-model.trim="tableStore.table.params.searchValue" clearable placeholder="仅根据用户名/登录名" />
+                </el-form-item>
+            </template>
+            <template v-slot:operation>
+                <el-button :icon="Plus" type="primary" @click="addUser">添加</el-button>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef" />
+        <PopupEdit ref="popupEditRef"></PopupEdit>
+        <PopupPwd ref="popupPwdRef"></PopupPwd>
+    </div>
+</template>
+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import { ref, onMounted, provide } from 'vue'
+import { ElMessageBox, ElMessage } from 'element-plus'
+import { activateUser, deluser, passwordConfirm } from '@/api/user-boot/user'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import PopupEdit from './popupEdit.vue'
+import PopupPwd from './popupPwd.vue'
+
+defineOptions({
+    name: 'auth/userlist'
+})
+const popupEditRef = ref()
+const popupPwdRef = ref()
+const tableStore = new TableStore({
+    url: '/user-boot/user/list',
+    method: 'POST',
+    column: [
+        { title: '用户名称', field: 'name', minWidth: '130' },
+        { title: '登录名', field: 'loginName', minWidth: '130' },
+        { title: '角色', field: 'roleName', minWidth: '130' },
+        // { title: '部门', field: 'deptName', minWidth: '200' },
+        { title: '电话', field: 'phoneShow', minWidth: '100' },
+        { title: '注册时间', field: 'registerTime', minWidth: '130', sortable: true },
+        { title: '登录时间', field: 'loginTime', minWidth: '130', sortable: true },
+        { title: '类型', field: 'casualUserName', minWidth: '80' },
+        {
+            title: '状态',
+            field: 'state',
+            width: '100',
+            render: 'tag',
+            custom: {
+                0: 'danger',
+                1: 'success',
+                2: 'warning',
+                3: 'warning',
+                4: 'info',
+                5: 'danger'
+            },
+            replaceValue: {
+                0: '注销',
+                1: '正常',
+                2: '锁定',
+                3: '待审核',
+                4: '休眠',
+                5: '密码过期'
+            }
+        },
+        {
+            title: '操作',
+            width: '180',
+            render: 'buttons',
+            fixed: 'right',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.state !== 1
+                    },
+                    click: row => {
+                        popupEditRef.value.open('编辑用户', row)
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '修改密码',
+                    type: 'primary',
+                    icon: 'el-icon-Lock',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.state !== 1
+                    },
+                    click: row => {
+                        ElMessageBox.prompt('二次校验密码确认', '修改密码', {
+                            confirmButtonText: '确认',
+                            cancelButtonText: '取消',
+                            inputType: 'password'
+                        }).then(({ value }) => {
+                            passwordConfirm(value).then(res => {
+                                popupPwdRef.value.open(row.id)
+                            })
+                        })
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '激活',
+                    type: 'primary',
+                    icon: 'el-icon-Open',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.state !== 2 && row.state !== 5 && row.state !== 0 && row.state !== 4
+                    },
+                    click: row => {
+                        activateUser({
+                            id: row.id
+                        }).then(() => {
+                            ElMessage.success('激活成功')
+                            tableStore.index()
+                        })
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '注销',
+                    type: 'danger',
+                    icon: 'el-icon-SwitchButton',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.state !== 1 && row.state !== 3
+                    },
+                    click: row => {
+                        ElMessageBox.prompt('二次校验密码确认', '注销用户', {
+                            confirmButtonText: '确认',
+                            cancelButtonText: '取消',
+                            inputType: 'password'
+                        }).then(({ value }) => {
+                            passwordConfirm(value).then(res => {
+                                deluser({
+                                    id: row.id
+                                }).then(() => {
+                                    ElMessage.success('注销成功')
+                                    tableStore.index()
+                                })
+                            })
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+
+    loadCallback: () => {
+        tableStore.table.data.forEach((item: any) => {
+            item.deptName = item.deptName || '/'
+            item.phoneShow = item.phone || '/'
+            item.roleName = item.role.length ? item.role : '/'
+            switch (item.casualUser) {
+                case 0:
+                    item.casualUserName = '临时用户'
+                    break
+                case 1:
+                    item.casualUserName = '长期用户'
+                    break
+                default:
+                    item.casualUserName = '/'
+                    break
+            }
+        })
+    }
+})
+
+provide('tableStore', tableStore)
+tableStore.table.params.searchState = 1
+tableStore.table.params.casualUser = -1
+tableStore.table.params.orderBy = ''
+const userState = [
+    { label: '全部', value: -1 },
+    { label: '注销', value: 0 },
+    { label: '正常', value: 1 },
+    { label: '锁定', value: 2 },
+    { label: '待审核', value: 3 },
+    { label: '休眠', value: 4 },
+    { label: '密码过期', value: 5 }
+]
+const casualUser = [
+    { label: '全部', value: -1 },
+    { label: '临时用户', value: 0 },
+    { label: '长期用户', value: 1 }
+]
+onMounted(() => {
+    tableStore.index()
+})
+
+const addUser = () => {
+    popupEditRef.value.open('新增用户')
+}
+</script>
diff --git a/src/views/auth/userList/popupPwd.vue b/src/views/auth/userList/popupPwd.vue
index c4e483d..58f5412 100644
--- a/src/views/auth/userList/popupPwd.vue
+++ b/src/views/auth/userList/popupPwd.vue
@@ -1,99 +1,99 @@
-<template>
-    <el-dialog width=“500px” 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">
-                    <el-input maxlength="32" show-word-limit v-model.trim="form.newPwd" type="password"
-                        placeholder="请输入新密码" show-password />
-                </el-form-item>
-                <el-form-item label="确认密码" prop="confirmPwd">
-                    <el-input maxlength="32" show-word-limit v-model.trim="form.confirmPwd" type="password"
-                        placeholder="请输入确认密码" show-password />
-                </el-form-item>
-            </el-form>
-        </el-scrollbar>
-
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="dialogVisible = false">取消</el-button>
-                <el-button type="primary" @click="submit">确认</el-button>
-            </span>
-        </template>
-    </el-dialog>
-</template>
-<script lang="ts" setup>
-import { ref, inject } from 'vue'
-import { reactive } from 'vue'
-import TableStore from '@/utils/tableStore'
-import { ElMessage } from 'element-plus'
-import { validatePwd } from '@/utils/common'
-import { passwordConfirm, updatePassword } from '@/api/user-boot/user'
-import { debug } from 'console'
-
-const formRef = ref()
-const tableStore = inject('tableStore') as TableStore
-const form = reactive({
-    id: '',
-    newPwd: '',
-    confirmPwd: '',
-    loginName: ''
-})
-const rules = {
-    newPwd: [
-        { required: true, message: '请输入密码', trigger: 'blur' },
-        {
-            min: 6,
-            max: 16,
-            message: '长度在 6 到 16 个字符',
-            trigger: 'blur'
-        },
-        { validator: validatePwd, trigger: 'blur' }
-    ],
-    confirmPwd: [
-        { required: true, message: '请确认密码', trigger: 'blur' },
-        {
-            min: 6,
-            max: 16,
-            message: '长度在 6 到 16 个字符',
-            trigger: 'blur'
-        },
-        {
-            validator: (rule: any, value: string, callback: any) => {
-                if (value === '') {
-                    callback(new Error('请再次输入密码'))
-                } else if (value !== form.newPwd) {
-                    callback(new Error('两次输入密码不一致!'))
-                } else {
-                    callback()
-                }
-            },
-            trigger: 'blur',
-            required: true
-        }
-    ]
-}
-const dialogVisible = ref(false)
-const title = ref('新增菜单')
-const open = (id: string, loginName: string) => {
-    form.id = id
-    form.loginName = loginName
-    form.newPwd = ''
-    form.confirmPwd = ''
-    dialogVisible.value = true
-}
-const submit = async () => {
-    formRef.value.validate((valid: boolean) => {
-        if (valid) {
-            updatePassword({
-                id: form.id,
-                newPassword: form.newPwd
-            }).then((res: any) => {
-                ElMessage.success('密码修改成功')
-                dialogVisible.value = false
-            })
-        }
-    })
-}
-
-defineExpose({ open })
-</script>
+<template>
+    <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">
+                    <el-input maxlength="32" show-word-limit v-model.trim="form.newPwd" type="password"
+                        placeholder="请输入新密码" show-password />
+                </el-form-item>
+                <el-form-item label="确认密码" prop="confirmPwd">
+                    <el-input maxlength="32" show-word-limit v-model.trim="form.confirmPwd" type="password"
+                        placeholder="请输入确认密码" show-password />
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+import TableStore from '@/utils/tableStore'
+import { ElMessage } from 'element-plus'
+import { validatePwd } from '@/utils/common'
+import { passwordConfirm, updatePassword } from '@/api/user-boot/user'
+import { debug } from 'console'
+
+const formRef = ref()
+const tableStore = inject('tableStore') as TableStore
+const form = reactive({
+    id: '',
+    newPwd: '',
+    confirmPwd: '',
+    loginName: ''
+})
+const rules = {
+    newPwd: [
+        { required: true, message: '请输入密码', trigger: 'blur' },
+        {
+            min: 6,
+            max: 16,
+            message: '长度在 6 到 16 个字符',
+            trigger: 'blur'
+        },
+        { validator: validatePwd, trigger: 'blur' }
+    ],
+    confirmPwd: [
+        { required: true, message: '请确认密码', trigger: 'blur' },
+        {
+            min: 6,
+            max: 16,
+            message: '长度在 6 到 16 个字符',
+            trigger: 'blur'
+        },
+        {
+            validator: (rule: any, value: string, callback: any) => {
+                if (value === '') {
+                    callback(new Error('请再次输入密码'))
+                } else if (value !== form.newPwd) {
+                    callback(new Error('两次输入密码不一致!'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'blur',
+            required: true
+        }
+    ]
+}
+const dialogVisible = ref(false)
+const title = ref('新增菜单')
+const open = (id: string, loginName: string) => {
+    form.id = id
+    form.loginName = loginName
+    form.newPwd = ''
+    form.confirmPwd = ''
+    dialogVisible.value = true
+}
+const submit = async () => {
+    formRef.value.validate((valid: boolean) => {
+        if (valid) {
+            updatePassword({
+                id: form.id,
+                newPassword: form.newPwd
+            }).then((res: any) => {
+                ElMessage.success('密码修改成功')
+                dialogVisible.value = false
+            })
+        }
+    })
+}
+
+defineExpose({ open })
+</script>