洪圣文暂降数据

src/utils/tableStore.ts

@@ -40,7 +40,7 @@ export default class TableStore {
         loadCallback: null,
         resetCallback: null,
         beforeSearchFun: null,
-        height: 0,
+        height: '',
         publicHeight: 0
     })
 

src/views/hsw/index.vue

@@ -2,19 +2,32 @@
     <div class="default-main">
         <!-- 表头 -->
         <!-- 表头 -->
-        <TableHeader date-picker>
+        <TableHeader date-picker area>
             <template v-slot:select>
-                <el-form-item label="关键词:">
+                <el-form-item>
-                    <el-input
+                    <el-select v-model="form.name" placeholder="Select">
-                        style="width: 240px"
+                        <el-option
-                        v-model="tableStore.table.params.searchValue"
+                            v-for="item in selectOptions"
-                        clearable
+                            :key="item.value"
-                        placeholder="仅根据用户名/登录名"
+                            :label="item.label"
-                    />
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-select v-model="form.name" placeholder="Select">
+                        <el-option
+                            v-for="item in selectOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
                 </el-form-item>
             </template>
             <template v-slot:operation>
-                <el-button :icon="Plus" type="primary" @click="addUser">添加</el-button>
+                <el-button :icon="Monitor" type="primary" @click="calculator">生产力免疫计算器</el-button>
+                <el-button :icon="Plus" type="primary" @click="exportExcel">导出</el-button>
                 <el-radio-group v-model="radio" class="ml10">
                     <el-radio-button label="暂降数据" />
                     <el-radio-button label="电压暂降事件统计" />
@@ -26,18 +39,18 @@
             <!-- 表格 -->
             <Table ref="tableRef" />
             <Transition name="el-fade-in-linear" mode="out-in">
-                <Sags3D v-if="radio == '电压暂降事件统计'" />
+                <Sags3D ref="sags3DRef" v-if="radio == '电压暂降事件统计'" />
             </Transition>
             <Transition name="el-fade-in-linear" mode="out-in">
-                <ToleranceCurve v-if="radio == '耐受曲线信息'" />
+                <ToleranceCurve ref="toleranceCurveRef" v-if="radio == '耐受曲线信息'" />
             </Transition>
         </div>
         <PopupCalculator ref="popupCalculator" />
     </div>
 </template>
 <script setup lang="ts">
-import { Plus } from '@element-plus/icons-vue'
+import { Plus, Monitor } from '@element-plus/icons-vue'
-import { ref, onMounted, provide, defineOptions } from 'vue'
+import { ref, onMounted, provide, defineOptions, reactive } from 'vue'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
@@ -51,20 +64,622 @@ defineOptions({
 })
 const radio = ref('暂降数据')
 const popupCalculator = ref()
+const sags3DRef = ref()
+const toleranceCurveRef = ref()
+const form = reactive({
+    name: ''
+})
 const tableStore = new TableStore({
     // 若页面表格高度需要调整，请修改publicHeight(内容区域除表格外其他内容的高度)
     url: '/user-boot/user/list',
     method: 'POST',
     column: [
         { title: '序号', type: 'seq', width: '80' },
-        { title: '事件编号', field: 'loginName', minWidth: '130' },
+        { title: '事件编号', field: 'eventNo', width: '80' },
-        { title: '供电线路', field: 'roleName', minWidth: '130' },
+        { title: '供电线路', field: 'linename', minWidth: '130' },
-        { title: '事件类型', field: 'deptName', minWidth: '200' },
+        { title: '事件类型', field: 'eventType', minWidth: '200' },
-        { title: '发生时间', field: 'phoneShow', minWidth: '100' },
+        { title: '发生时间', field: 'occurrenceTime', minWidth: '220', sortable: true },
-        { title: '暂降幅值(p.u.)', field: 'registerTime', minWidth: '130' },
+        { title: '暂降幅值(p.u.)', field: 'amplitude', minWidth: '130', sortable: true },
-        { title: '持续时间(ms)', field: 'loginTime', minWidth: '130' },
+        { title: '持续时间(ms)', field: 'durationTime', minWidth: '130', sortable: true },
-        { title: '预计损失(万元)', field: 'casualUserName', minWidth: '80' }
+        { title: '预计损失(万元)', field: 'forecastLoss', minWidth: '80', sortable: true }
-    ]
+    ],
+    beforeSearchFun: () => {
+        sags3DRef.value?.search()
+        toleranceCurveRef.value?.search()
+    },
+    loadCallback: () => {
+        // 加载数据
+        tableStore.table.data = [
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: 'e3856759ddfb44a49ed5b01a5654ac17',
+                eventNo: '21',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-12-09T16:48:31.000+0800',
+                offsetVoltage: '35.78',
+                amplitude: 0.3578,
+                durationTime: 580,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 150,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: '07417b830bc943e38c4bd474ab9571f6',
+                eventNo: '20',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-11-28T07:33:31.000+0800',
+                offsetVoltage: '81.75',
+                amplitude: 0.8175,
+                durationTime: 580,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 0,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: 'c322ca1e8f494cf7b06dc968d695dd54',
+                eventNo: '19',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-11-28T00:57:46.000+0800',
+                offsetVoltage: '22.71',
+                amplitude: 0.2271,
+                durationTime: 580,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 150,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: '1930fb4d761f4ae9bea9b75edfa4c313',
+                eventNo: '18',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-10-23T11:07:07.000+0800',
+                offsetVoltage: '56.97',
+                amplitude: 0.5697,
+                durationTime: 580,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 146.9287,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: '94ececef8ee9418da701277aa6d55836',
+                eventNo: '17',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-10-23T11:07:05.000+0800',
+                offsetVoltage: '54.65',
+                amplitude: 0.5465,
+                durationTime: 980,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 148.8127,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: '547f00db243c467b828e634b2faaddde',
+                eventNo: '16',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-10-23T11:07:04.000+0800',
+                offsetVoltage: '53.10',
+                amplitude: 0.531,
+                durationTime: 580,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 149.4611,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: '8ef074d4f689499280a7a44f2cfa15bf',
+                eventNo: '15',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-10-23T10:51:23.000+0800',
+                offsetVoltage: '50.39',
+                amplitude: 0.5039,
+                durationTime: 580,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 149.9212,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: '3290e8deda454a77836224997562f55e',
+                eventNo: '14',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-10-23T09:06:55.000+0800',
+                offsetVoltage: '39.18',
+                amplitude: 0.3918,
+                durationTime: 2580,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 150,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: 'c2926f9634f74afe9509b32b13737582',
+                eventNo: '13',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-10-15T16:48:37.000+0800',
+                offsetVoltage: '23.85',
+                amplitude: 0.2385,
+                durationTime: 1580,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 150,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: '24290530057c42c98180a2a57f477c6b',
+                eventNo: '12',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-10-13T02:14:23.000+0800',
+                offsetVoltage: '67.93',
+                amplitude: 0.6793,
+                durationTime: 580,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 100.9483,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: '9588e55bb4ce4c94b2f2c0d9de22780c',
+                eventNo: '11',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-09-20T19:23:53.000+0800',
+                offsetVoltage: '33.95',
+                amplitude: 0.3395,
+                durationTime: 580,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 150,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: '914ee55c2b89474bab68c69f147a0344',
+                eventNo: '10',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-09-14T20:50:12.000+0800',
+                offsetVoltage: '81.08',
+                amplitude: 0.8108,
+                durationTime: 580,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 0,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: '1ab529fc85104a1d849b2b009c39e3fa',
+                eventNo: '9',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-09-14T19:41:29.000+0800',
+                offsetVoltage: '81.39',
+                amplitude: 0.8139,
+                durationTime: 580,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 0,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: '5798f1d06457456cabb8d7e0e606e1e9',
+                eventNo: '8',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-08-14T10:09:20.000+0800',
+                offsetVoltage: '85.41',
+                amplitude: 0.8541,
+                durationTime: 580,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 0,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: '5feba1a0f45949f88d155f30c485edf7',
+                eventNo: '7',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-08-14T10:09:18.000+0800',
+                offsetVoltage: '87.66',
+                amplitude: 0.8766,
+                durationTime: 780,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 0,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: 'abb64e44e2074d159b7fa9133d7c794d',
+                eventNo: '6',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-08-13T03:57:13.000+0800',
+                offsetVoltage: '68.78',
+                amplitude: 0.6878,
+                durationTime: 580,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 92.8897,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: '5dcd5a69b76a460e8dae6703715eb902',
+                eventNo: '5',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-08-12T15:52:43.000+0800',
+                offsetVoltage: '76.68',
+                amplitude: 0.7668,
+                durationTime: 780,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 0,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: '3716d02a70c3463aaeb0ddb2dae296d4',
+                eventNo: '4',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-08-10T07:46:58.000+0800',
+                offsetVoltage: '55.06',
+                amplitude: 0.5506,
+                durationTime: 580,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 148.5711,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: '2ed5708f941b43039a43a80e8bde8012',
+                eventNo: '3',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-08-10T06:55:05.000+0800',
+                offsetVoltage: '46.89',
+                amplitude: 0.4689,
+                durationTime: 580,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 149.9999,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: '2b5837a5b9c14f5ebc49c1e7462e6b42',
+                eventNo: '2',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-07-19T12:52:21.000+0800',
+                offsetVoltage: '81.37',
+                amplitude: 0.8137,
+                durationTime: 1380,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 0,
+                loadLossRate: null,
+                fresh: 0
+            },
+            {
+                searchValue: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                params: {},
+                id: 'f33a7b60ec5840f392aa8e49f931a751',
+                eventNo: '1',
+                monitorId: null,
+                monitorNodeId: null,
+                monitorNodeName: null,
+                lineId: null,
+                linename: '进线-26',
+                eventType: '电压暂降',
+                occurrenceTime: '2019-07-19T12:49:03.000+0800',
+                offsetVoltage: '83.85',
+                amplitude: 0.8385,
+                durationTime: 580,
+                phase: '未知相别',
+                analyse: null,
+                fileId: null,
+                enable: 0,
+                forecastLoss: 0,
+                loadLossRate: null,
+                fresh: 0
+            }
+        ]
+    }
 })
 // 注入到子组件
 provide('tableStore', tableStore)
@@ -79,8 +694,41 @@ onMounted(() => {
 })
 
 // 弹框
-const addUser = () => {
+const exportExcel = () => {
-    popupCalculator.value.open('新增用户')
+    tableStore.table.ref!.exportData({
+        filename: '文件名字', // 文件名字
+        sheetName: 'Sheet1',
+        type: 'xlsx', //导出文件类型 xlsx 和 csv
+        useStyle: true,
+        data: tableStore.table.data // 数据源 // 过滤那个字段导出
+    })
 }
+// 计算器
+const calculator = () => {
+    popupCalculator.value.open()
+}
+
+const selectOptions = [
+    {
+        value: 'Option1',
+        label: 'Option1'
+    },
+    {
+        value: 'Option2',
+        label: 'Option2'
+    },
+    {
+        value: 'Option3',
+        label: 'Option3'
+    },
+    {
+        value: 'Option4',
+        label: 'Option4'
+    },
+    {
+        value: 'Option5',
+        label: 'Option5'
+    }
+]
 </script>
 <style></style>

src/views/hsw/popupCalculator.vue

@@ -1,24 +1,65 @@
 <template>
-    <el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
+    <el-dialog class="popup-calculator" v-model="dialogVisible" :title="title" width="540px">
-        <el-scrollbar>
+        <div style="width: 480px; margin: 20px auto">
-            <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
+            <div style="display: flex">
-                <el-form-item label="角色名称">
+                <el-select v-model="form.name" placeholder="Select" style="flex: 1">
-                    <el-input v-model="form.name" placeholder="请输入菜单名称" />
+                    <el-option
-                </el-form-item>
+                        v-for="item in selectOptions"
-                <el-form-item label="角色编码">
+                        :key="item.value"
-                    <el-input v-model="form.code" placeholder="请输入菜单名称" />
+                        :label="item.label"
-                </el-form-item>
+                        :value="item.value"
-                <el-form-item label="角色描述">
+                    />
-                    <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
+                </el-select>
-                </el-form-item>
+                <el-select v-model="form.name" placeholder="Select" style="flex: 1" class="ml10">
-            </el-form>
+                    <el-option
-        </el-scrollbar>
+                        v-for="item in selectOptions"
-        <template #footer>
+                        :key="item.value"
-            <span class="dialog-footer">
+                        :label="item.label"
-                <el-button @click="dialogVisible = false">取消</el-button>
+                        :value="item.value"
-                <el-button type="primary" @click="submit">确认</el-button>
+                    />
-            </span>
+                </el-select>
-        </template>
+            </div>
+            <div class="result-first">
+                <div class="result-first-left">
+                    <img class="result-first-left-icon" src="/src/assets/money.png" />
+                    <div class="result-first-left-value mt10">
+                        <span style="font-size: 16px; color: var(--el-color-primary)">10</span>
+                        万元
+                    </div>
+                    <div class="result-first-left-label mt10">此次暂降经济损失</div>
+                </div>
+                <div class="result-first-chart">
+                    <MyEchart :options="chartsOptions1"></MyEchart>
+                </div>
+                <div class="result-first-chart">
+                    <MyEchart :options="chartsOptions2"></MyEchart>
+                </div>
+            </div>
+            <div class="result-second">
+                <div class="result-second-item">
+                    <div class="result-second-item-label">生产线故障率：</div>
+                    <div class="result-second-item">0%</div>
+                </div>
+                <div class="result-second-item mt10">
+                    <div class="result-second-item-label">电气设备故障率：</div>
+                    <div class="result-second-item">0%</div>
+                </div>
+            </div>
+            <div class="result-start mt10">
+                <div class="result-start-title">暂降事件</div>
+                <div class="result-start-content">
+                    <el-form label-width="100px" label-position="left">
+                        <el-form-item label="暂降幅值p.u.">
+                            <el-input-number v-model="form.num" controls-position="right" />
+                        </el-form-item>
+                        <el-form-item label="持续时间ms">
+                            <el-input-number v-model="form.num" controls-position="right" />
+                        </el-form-item>
+                    </el-form>
+                    <el-button type="primary" class="ml10 result-start-content-btn">立即评估</el-button>
+                </div>
+            </div>
+        </div>
     </el-dialog>
 </template>
 <script lang="ts" setup>
@@ -26,52 +67,223 @@ import { ref, inject } from 'vue'
 import { reactive } from 'vue'
 import { ElMessage } from 'element-plus'
 import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { color } from '../../components/echarts/color'
 
 const dialogVisible = ref(false)
-const title = ref('')
+const title = ref('生产线免疫力计算器')
 const tableStore = inject('tableStore') as TableStore
+const chartsOptions1 = ref({
+    xAxis: null,
+    yAxis: null,
+    dataZoom: null,
+    series: [
+        {
+            type: 'gauge',
+            startAngle: 90,
+            endAngle: -270,
+            pointer: {
+                show: false
+            },
+            progress: {
+                show: true,
+                overlap: false,
+                roundCap: true,
+                clip: false,
+                itemStyle: {
+                    borderWidth: 1,
+                    color: '#00d17d'
+                }
+            },
+            axisLine: {
+                lineStyle: {
+                    width: 10
+                }
+            },
+            splitLine: {
+                show: false,
+                distance: 0,
+                length: 10
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                show: false,
+                distance: 50
+            },
+            data: [
+                {
+                    value: 100,
+                    title: {
+                        offsetCenter: ['0%', '-30%']
+                    },
+                    detail: {
+                        valueAnimation: true,
+                        offsetCenter: ['0%', '-10%']
+                    }
+                }
+            ],
+            detail: {
+                overflow: 'break',
+                color: '#00d17d',
+                fontSize: 12,
+                width: 100,
+                formatter: '生产线免疫力({value}%)'
+            }
+        }
+    ]
+})
+const chartsOptions2 = ref({
+    xAxis: null,
+    yAxis: null,
+    dataZoom: null,
+    series: [
+        {
+            type: 'gauge',
+            startAngle: 90,
+            endAngle: -270,
+            pointer: {
+                show: false
+            },
+            progress: {
+                show: true,
+                overlap: false,
+                roundCap: true,
+                clip: false,
+                itemStyle: {
+                    borderWidth: 1,
+                    color: '#0099fa'
+                }
+            },
+            axisLine: {
+                lineStyle: {
+                    width: 10
+                }
+            },
+            splitLine: {
+                show: false,
+                distance: 0,
+                length: 10
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                show: false,
+                distance: 50
+            },
+            data: [
+                {
+                    value: 20,
+                    title: {
+                        offsetCenter: ['0%', '-30%']
+                    },
+                    detail: {
+                        valueAnimation: true,
+                        offsetCenter: ['0%', '10%']
+                    }
+                }
+            ],
+            title: {
+                fontSize: 14
+            },
+            detail: {
+                overflow: 'break',
+                color: '#0099fa',
+                fontSize: 12,
+                width: 100,
+                formatter: '电气设备免疫力({value}%)'
+            }
+        }
+    ]
+})
 const formRef = ref()
 // 注意不要和表单ref的命名冲突
 const form = reactive<anyObj>({
-    code: '',
     name: '',
-    remark: '',
+    num: 1
-    id: ''
 })
-const rules = {
+
-    name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
+const open = () => {
-    code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
+    dialogVisible.value = true
 }
 
-const open = (text: string, data?: anyObj) => {
+const selectOptions = [
-    title.value = text
+    {
-    dialogVisible.value = true
+        value: 'Option1',
-    if (data) {
+        label: 'Option1'
-        // 表单赋值
+    },
-        for (let key in form) {
+    {
-            form[key] = data[key]
+        value: 'Option2',
-        }
+        label: 'Option2'
-    } else {
+    },
-        // 在此处恢复默认表单
+    {
-        for (let key in form) {
+        value: 'Option3',
-            form[key] = ''
+        label: 'Option3'
-        }
+    },
+    {
+        value: 'Option4',
+        label: 'Option4'
+    },
+    {
+        value: 'Option5',
+        label: 'Option5'
     }
-}
+]
-const submit = () => {
-    formRef.value.validate(async (valid: boolean) => {
-        if (valid) {
-            if (form.id) {
-                // await update(form)
-            } else {
-                // await create(form)
-            }
-            ElMessage.success('保存成功')
-            tableStore.index()
-            dialogVisible.value = false
-        }
-    })
-}
 
 defineExpose({ open })
 </script>
+
+<style lang="scss">
+.result-first {
+    height: 160px;
+    display: flex;
+    justify-content: space-between;
+    .result-first-left {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        width: 160px;
+    }
+    .result-first-chart {
+        width: 160px;
+        height: 100%;
+    }
+}
+.result-second {
+    .result-second-item {
+        padding: 0 10px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background: var(--el-color-primary-light-9);
+        color: var(--el-color-primary);
+    }
+}
+
+.result-start {
+    padding: 10px;
+    background: var(--el-color-primary-light-5);
+    color: #fff;
+    .result-start-content {
+        padding-top: 10px;
+        display: flex;
+        .el-form-item {
+            margin-bottom: 10px;
+        }
+        .el-form-item__label {
+            color: #fff;
+        }
+        .result-start-content-btn {
+            height: 74px;
+            flex: 1;
+            background: var(--el-color-primary);
+            color: #fff;
+        }
+    }
+}
+</style>

src/views/hsw/sags3D.vue

@@ -1,7 +1,16 @@
 <template>
     <SecondSheet>
         <div style="height: 100%; overflow: hidden">
+            <div class="switch-tab">
+                <el-radio-group v-model="radio" size="small">
+                    <el-radio-button label="三维图" />
+                    <el-radio-button label="表格" />
+                </el-radio-group>
+            </div>
             <Table ref="tableRef" height="auto" isGroup />
+            <SecondSheet v-if="radio === '三维图'">
+                <MyEchart :options="options" v-if="options"></MyEchart>
+            </SecondSheet>
         </div>
     </SecondSheet>
 </template>
@@ -11,7 +20,12 @@ import { ref, onMounted, provide, defineOptions } from 'vue'
 import SecondSheet from '@/components/secondSheet/index.vue'
 import Table from '@/components/table/index.vue'
 import TableStore from '@/utils/tableStore'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { log } from 'console'
 
+const radio = ref('三维图')
+const options = ref()
+const apiData = ref()
 const tableStore = new TableStore({
     showPage: false,
     // 若页面表格高度需要调整，请修改publicHeight(内容区域除表格外其他内容的高度)
@@ -21,34 +35,262 @@ const tableStore = new TableStore({
         {
             title: '电压暂降频次统计表',
             children: [
-                { title: '暂降福度', field: 'loginName', width: '130' },
+                { title: '暂降福度', field: 'amplitude', width: '130' },
                 {
                     title: '持续时间',
                     field: 'loginName',
-                    children: [
+                    children: []
-                        { title: '0.01-0.02', field: 'loginName' },
-                        { title: '0.02-0.05', field: 'loginName' },
-                        { title: '0.05-0.07', field: 'loginName' },
-                        { title: '0.07-0.10', field: 'loginName' },
-                        { title: '0.10-1.00', field: 'loginName' },
-                    ]
                 }
             ]
         }
-    ]
+    ],
+    loadCallback: () => {
+        tableStore.table.data = {
+            lineIds: [1, 5],
+            type: 1,
+            beginDate: '2019-01-01',
+            endDate: '2024-12-31',
+            amplitudes: ['0.8~0.9', '0.7~0.8', '0.6~0.7', '0.5~0.6', '0.4~0.5', '0.1~0.4'],
+            durations: ['0.01~0.02', '0.02~0.05', '0.05~0.07', '0.07~0.10', '0.10~1.00'],
+            values: [
+                ['0.8~0.9', '0.01~0.02', '0'],
+                ['0.8~0.9', '0.02~0.05', '0'],
+                ['0.8~0.9', '0.05~0.07', '0'],
+                ['0.8~0.9', '0.07~0.10', '0'],
+                ['0.8~0.9', '0.10~1.00', '6'],
+                ['0.7~0.8', '0.01~0.02', '0'],
+                ['0.7~0.8', '0.02~0.05', '0'],
+                ['0.7~0.8', '0.05~0.07', '0'],
+                ['0.7~0.8', '0.07~0.10', '0'],
+                ['0.7~0.8', '0.10~1.00', '1'],
+                ['0.6~0.7', '0.01~0.02', '0'],
+                ['0.6~0.7', '0.02~0.05', '0'],
+                ['0.6~0.7', '0.05~0.07', '0'],
+                ['0.6~0.7', '0.07~0.10', '0'],
+                ['0.6~0.7', '0.10~1.00', '2'],
+                ['0.5~0.6', '0.01~0.02', '0'],
+                ['0.5~0.6', '0.02~0.05', '0'],
+                ['0.5~0.6', '0.05~0.07', '0'],
+                ['0.5~0.6', '0.07~0.10', '0'],
+                ['0.5~0.6', '0.10~1.00', '5'],
+                ['0.4~0.5', '0.01~0.02', '0'],
+                ['0.4~0.5', '0.02~0.05', '0'],
+                ['0.4~0.5', '0.05~0.07', '0'],
+                ['0.4~0.5', '0.07~0.10', '0'],
+                ['0.4~0.5', '0.10~1.00', '1'],
+                ['0.1~0.4', '0.01~0.02', '0'],
+                ['0.1~0.4', '0.02~0.05', '0'],
+                ['0.1~0.4', '0.05~0.07', '0'],
+                ['0.1~0.4', '0.07~0.10', '0'],
+                ['0.1~0.4', '0.10~1.00', '3']
+            ],
+            table: {
+                total: 6,
+                rows: [
+                    {
+                        searchValue: null,
+                        createBy: null,
+                        createTime: null,
+                        updateBy: null,
+                        updateTime: null,
+                        remark: null,
+                        params: {},
+                        amplitude: '0.8~0.9',
+                        d005_007s: '0',
+                        d001_002s: '0',
+                        d002_005s: '0',
+                        d010_100s: '6',
+                        d007_010s: '0'
+                    },
+                    {
+                        searchValue: null,
+                        createBy: null,
+                        createTime: null,
+                        updateBy: null,
+                        updateTime: null,
+                        remark: null,
+                        params: {},
+                        amplitude: '0.7~0.8',
+                        d005_007s: '0',
+                        d001_002s: '0',
+                        d002_005s: '0',
+                        d010_100s: '1',
+                        d007_010s: '0'
+                    },
+                    {
+                        searchValue: null,
+                        createBy: null,
+                        createTime: null,
+                        updateBy: null,
+                        updateTime: null,
+                        remark: null,
+                        params: {},
+                        amplitude: '0.6~0.7',
+                        d005_007s: '0',
+                        d001_002s: '0',
+                        d002_005s: '0',
+                        d010_100s: '2',
+                        d007_010s: '0'
+                    },
+                    {
+                        searchValue: null,
+                        createBy: null,
+                        createTime: null,
+                        updateBy: null,
+                        updateTime: null,
+                        remark: null,
+                        params: {},
+                        amplitude: '0.5~0.6',
+                        d005_007s: '0',
+                        d001_002s: '0',
+                        d002_005s: '0',
+                        d010_100s: '5',
+                        d007_010s: '0'
+                    },
+                    {
+                        searchValue: null,
+                        createBy: null,
+                        createTime: null,
+                        updateBy: null,
+                        updateTime: null,
+                        remark: null,
+                        params: {},
+                        amplitude: '0.4~0.5',
+                        d005_007s: '0',
+                        d001_002s: '0',
+                        d002_005s: '0',
+                        d010_100s: '1',
+                        d007_010s: '0'
+                    },
+                    {
+                        searchValue: null,
+                        createBy: null,
+                        createTime: null,
+                        updateBy: null,
+                        updateTime: null,
+                        remark: null,
+                        params: {},
+                        amplitude: '0.1~0.4',
+                        d005_007s: '0',
+                        d001_002s: '0',
+                        d002_005s: '0',
+                        d010_100s: '3',
+                        d007_010s: '0'
+                    }
+                ],
+                code: 200,
+                msg: '查询成功'
+            }
+        }
+        apiData.value = tableStore.table.data
+        tableStore.table.column![0].children![1].children!.push(
+            ...(apiData.value.durations.map((item: string) => {
+                return {
+                    title: item,
+                    field: `d${item.replaceAll('.', '').replaceAll('~', '_')}s`
+                }
+            }) as any[])
+        )
+        tableStore.table.data = apiData.value.table.rows
+        initEchart()
+    }
 })
 // 注入到子组件
 provide('tableStore', tableStore)
 
-// 默认参数 参数多的话可以使用Object.assign方法
-tableStore.table.params.pageSize = 9999
-tableStore.table.params.searchState = 1
-tableStore.table.params.searchValue = ''
-tableStore.table.params.casualUser = -1
-tableStore.table.params.orderBy = ''
-
 onMounted(() => {
-    // 加载数据
+    search()
-    tableStore.index()
 })
+const initEchart = () => {
+    options.value = {
+        options: {
+            xAxis: null,
+            yAxis: null,
+            dataZoom: null,
+            backgroundColor: '#fff',
+            tooltip: {
+                trigger: 'axis'
+            },
+            title: {
+                text: '暂降密度图',
+                x: 'center'
+            },
+            xAxis3D: {
+                name: '暂降福度(p.u.)',
+                type: 'category',
+                data: apiData.value.amplitudes
+            },
+            yAxis3D: {
+                name: '持续时间(s)',
+                type: 'category',
+                data: apiData.value.durations
+            },
+            zAxis3D: {
+                name: '次数',
+                type: 'value'
+            },
+            grid3D: {
+                boxWidth: 200,
+                boxDepth: 80,
+                viewControl: {
+                    projection: 'perspective',
+                    distance: 250
+                },
+                light: {
+                    main: {
+                        intensity: 1.2,
+                        shadow: true
+                    },
+                    ambient: {
+                        intensity: 0.3
+                    }
+                }
+            },
+            series: [
+                {
+                    type: 'bar3D',
+                    data: apiData.value.values.map((item: [string, string, string]) => {
+                        return [
+                            apiData.value.amplitudes.indexOf(item[0]),
+                            apiData.value.durations.indexOf(item[1]),
+                            item[2]
+                        ]
+                    }),
+                    shading: 'lambert',
+                    label: {
+                        fontSize: 16,
+                        borderWidth: 1
+                    },
+                    emphasis: {
+                        label: {
+                            fontSize: 20,
+                            color: '#900'
+                        },
+                        itemStyle: {
+                            color: '#900'
+                        }
+                    }
+                }
+            ]
+        }
+    }
+}
+const search = () => {
+    // 从父组件tableStore获取参数
+    tableStore.table.params.pageSize = 9999
+    tableStore.table.params.searchState = 1
+    tableStore.table.params.searchValue = ''
+    tableStore.table.params.casualUser = -1
+    tableStore.table.params.orderBy = ''
+    tableStore.index()
+}
+defineExpose({ search })
 </script>
+<style lang="scss">
+.switch-tab {
+    position: absolute;
+    right: 16px;
+    top: 4px;
+    z-index: 11;
+}
+</style>

src/views/hsw/toleranceCurve.vue

@@ -1,7 +1,159 @@
 <template>
-    <SecondSheet>12</SecondSheet>
+    <SecondSheet>
+        <div class="tolerance-curve">
+            <el-form label-width="auto" :inline="true">
+                <el-form-item>
+                    <el-select v-model="form.name" placeholder="Select">
+                        <el-option
+                            v-for="item in selectOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-select v-model="form.name" placeholder="Select">
+                        <el-option
+                            v-for="item in selectOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-select v-model="form.name" placeholder="Select">
+                        <el-option
+                            v-for="item in selectOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <div style="display: flex; flex: 1">
+                <el-form label-width="auto" label-position="top">
+                    <el-form-item label="耐受曲线">
+                        <el-select v-model="form.name" placeholder="Select">
+                            <el-option
+                                v-for="item in selectOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="耐受能力（膝点坐标）">
+                        <el-select v-model="form.name" placeholder="Select">
+                            <el-option
+                                v-for="item in selectOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="上限曲线膝点">
+                        <div>
+                            <div>
+                                <el-input-number v-model="form.num" controls-position="right" />
+                                <span class="ml10" style="color: #333">p.u.</span>
+                            </div>
+                            <div class="mt10">
+                                <el-input-number v-model="form.num" controls-position="right" />
+                                <span class="ml10" style="color: #333">ms</span>
+                            </div>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="下限曲线膝点">
+                        <div>
+                            <div>
+                                <el-input-number v-model="form.num" controls-position="right" />
+                                <span class="ml10" style="color: #333">p.u.</span>
+                            </div>
+                            <div class="mt10">
+                                <el-input-number v-model="form.num" controls-position="right" />
+                                <span class="ml10" style="color: #333">ms</span>
+                            </div>
+                        </div>
+                    </el-form-item>
+                </el-form>
+                <div style="flex: 1" class="ml10">
+                    <MyEchart :options="options" v-if="options"></MyEchart>
+                </div>
+            </div>
+        </div>
+    </SecondSheet>
 </template>
 
-<script>
+<script lang="ts" setup>
 import SecondSheet from '@/components/secondSheet/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { reactive, ref } from 'vue'
+const options = ref({
+    xAxis: {
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+        type: 'value'
+    },
+    series: [
+        {
+            data: [150, 230, 224, 218, 135, 147, 260],
+            type: 'line'
+        },
+        {
+            data: [50, 30, 124, 318, 175, 127, 160],
+            type: 'line'
+        }
+    ],
+    options: {
+        dataZoom: null
+    }
+})
+const form = reactive({
+    name: '',
+    num: 1
+})
+const selectOptions = [
+    {
+        value: 'Option1',
+        label: 'Option1'
+    },
+    {
+        value: 'Option2',
+        label: 'Option2'
+    },
+    {
+        value: 'Option3',
+        label: 'Option3'
+    },
+    {
+        value: 'Option4',
+        label: 'Option4'
+    },
+    {
+        value: 'Option5',
+        label: 'Option5'
+    }
+]
+const search = () => {
+    // 从父组件tableStore获取参数
+}
+defineExpose({ search })
 </script>
+
+<style lang="scss">
+.tolerance-curve {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    height: 100%;
+    overflow: hidden;
+    padding: 10px;
+    border: 1px solid var(--el-border-color);
+}
+</style>