Showing
6 changed files
with
119 additions
and
68 deletions
@@ -18,7 +18,6 @@ import { reportEditDetailPage } from '/@/api/report/reportManager'; | @@ -18,7 +18,6 @@ import { reportEditDetailPage } from '/@/api/report/reportManager'; | ||
18 | const heightNum = ref(800); | 18 | const heightNum = ref(800); |
19 | const tableData: any = ref([]); | 19 | const tableData: any = ref([]); |
20 | const [registerTable] = useTable({ | 20 | const [registerTable] = useTable({ |
21 | - title: '执行设备及属性', | ||
22 | columns: viewDeviceColumn, | 21 | columns: viewDeviceColumn, |
23 | showIndexColumn: false, | 22 | showIndexColumn: false, |
24 | clickToRowSelect: false, | 23 | clickToRowSelect: false, |
@@ -26,12 +26,14 @@ | @@ -26,12 +26,14 @@ | ||
26 | icon: 'clarity:note-edit-line', | 26 | icon: 'clarity:note-edit-line', |
27 | auth: 'api:yt:report:update', | 27 | auth: 'api:yt:report:update', |
28 | onClick: handleCreateOrEdit.bind(null, record), | 28 | onClick: handleCreateOrEdit.bind(null, record), |
29 | + ifShow: record.status === 0, | ||
29 | }, | 30 | }, |
30 | { | 31 | { |
31 | label: '删除', | 32 | label: '删除', |
32 | icon: 'ant-design:delete-outlined', | 33 | icon: 'ant-design:delete-outlined', |
33 | auth: 'api:yt:report:delete', | 34 | auth: 'api:yt:report:delete', |
34 | color: 'error', | 35 | color: 'error', |
36 | + ifShow: record.status === 0, | ||
35 | popConfirm: { | 37 | popConfirm: { |
36 | title: '是否确认删除', | 38 | title: '是否确认删除', |
37 | confirm: handleDeleteOrBatchDelete.bind(null, record), | 39 | confirm: handleDeleteOrBatchDelete.bind(null, record), |
1 | +.wrapper { | ||
2 | + margin: 60px; | ||
3 | + display: grid; | ||
4 | + justify-content: space-between; | ||
5 | + grid-template-columns: repeat(2, 400px); | ||
6 | + grid-gap: 40px; | ||
7 | + grid-template-rows: 400px 400px; | ||
8 | +} | ||
9 | + | ||
10 | +.inner { | ||
11 | + width: 400px; | ||
12 | + height: 400px; | ||
13 | +} | ||
14 | + | ||
15 | +.item { | ||
16 | + text-align: center; | ||
17 | + font-size: 200%; | ||
18 | + color: #fff; | ||
19 | +} |
@@ -2,21 +2,25 @@ | @@ -2,21 +2,25 @@ | ||
2 | <div> | 2 | <div> |
3 | <BasicModal | 3 | <BasicModal |
4 | v-bind="$attrs" | 4 | v-bind="$attrs" |
5 | - width="55rem" | 5 | + width="60rem" |
6 | :height="heightNum" | 6 | :height="heightNum" |
7 | @register="register" | 7 | @register="register" |
8 | title="报表趋势图" | 8 | title="报表趋势图" |
9 | - @cancel="handleCancel" | ||
10 | :showOkBtn="false" | 9 | :showOkBtn="false" |
11 | > | 10 | > |
12 | - <div ref="chartRef" :style="{ height, width }"></div> | 11 | + <div class="wrapper"> |
12 | + <div class="inner item" v-for="(item, index) in chartData" :key="index"> | ||
13 | + <p style="display: none">{{ item }}</p> | ||
14 | + <div :id="`chart${index}`" :style="{ height, width }"></div> | ||
15 | + </div> | ||
16 | + </div> | ||
13 | </BasicModal> | 17 | </BasicModal> |
14 | </div> | 18 | </div> |
15 | </template> | 19 | </template> |
16 | <script setup lang="ts"> | 20 | <script setup lang="ts"> |
17 | - import { ref, PropType, Ref, nextTick } from 'vue'; | 21 | + import { ref, PropType, nextTick } from 'vue'; |
18 | import { BasicModal, useModalInner } from '/@/components/Modal'; | 22 | import { BasicModal, useModalInner } from '/@/components/Modal'; |
19 | - import { useECharts } from '/@/hooks/web/useECharts'; | 23 | + import * as echarts from 'echarts'; |
20 | 24 | ||
21 | defineProps({ | 25 | defineProps({ |
22 | width: { | 26 | width: { |
@@ -25,67 +29,78 @@ | @@ -25,67 +29,78 @@ | ||
25 | }, | 29 | }, |
26 | height: { | 30 | height: { |
27 | type: String as PropType<string>, | 31 | type: String as PropType<string>, |
28 | - default: 'calc(100vh - 378px)', | 32 | + default: '400px', |
29 | }, | 33 | }, |
30 | }); | 34 | }); |
31 | defineEmits(['register']); | 35 | defineEmits(['register']); |
36 | + | ||
32 | const heightNum = ref(800); | 37 | const heightNum = ref(800); |
33 | - const chartRef = ref<HTMLDivElement | null>(null); | ||
34 | - const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); | 38 | + const chartData = ref([1, 2, 3, 4]); |
35 | const [register] = useModalInner((data) => { | 39 | const [register] = useModalInner((data) => { |
36 | console.log(data); | 40 | console.log(data); |
41 | + //TODO待服务端返回值 | ||
37 | nextTick(() => { | 42 | nextTick(() => { |
38 | - setOptions({ | ||
39 | - title: { | ||
40 | - text: '报表趋势图', | ||
41 | - }, | ||
42 | - tooltip: { | ||
43 | - trigger: 'axis', | ||
44 | - }, | ||
45 | - legend: { | ||
46 | - data: ['CO', 'CO2'], | ||
47 | - }, | ||
48 | - toolbox: {}, | ||
49 | - grid: { | ||
50 | - left: '3%', | ||
51 | - right: '4%', | ||
52 | - bottom: '3%', | ||
53 | - containLabel: true, | ||
54 | - }, | ||
55 | - xAxis: { | ||
56 | - type: 'category', | ||
57 | - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], | ||
58 | - boundaryGap: false, | ||
59 | - }, | ||
60 | - yAxis: { | ||
61 | - type: 'value', | ||
62 | - boundaryGap: false, | ||
63 | - }, | ||
64 | - series: [ | ||
65 | - { | ||
66 | - name: 'CO', | ||
67 | - type: 'line', | ||
68 | - stack: 'Total', | ||
69 | - data: [150, 230, 224, 218, 135, 147, 260], | 43 | + chartData.value.forEach((_, index) => { |
44 | + let myChart = echarts.init(document.getElementById(`chart${index}`) as HTMLElement); | ||
45 | + let myOption = { | ||
46 | + title: { | ||
47 | + text: '报表趋势图', | ||
48 | + subtext: `图${index + 1}`, | ||
49 | + left: 'left', | ||
50 | + }, | ||
51 | + tooltip: { | ||
52 | + trigger: 'axis', | ||
53 | + }, | ||
54 | + legend: { | ||
55 | + data: ['CO', 'CO2', 'Temp'], | ||
56 | + top: '20px', | ||
70 | }, | 57 | }, |
71 | - { | ||
72 | - name: 'CO2', | ||
73 | - type: 'line', | ||
74 | - stack: 'Total', | ||
75 | - data: [15, 23, 22, 28, 15, 17, 20], | 58 | + toolbox: {}, |
59 | + grid: { | ||
60 | + left: '3%', | ||
61 | + right: '4%', | ||
62 | + bottom: '3%', | ||
63 | + containLabel: true, | ||
76 | }, | 64 | }, |
77 | - ], | 65 | + xAxis: { |
66 | + type: 'category', | ||
67 | + data: ['1', '2', '3', '4', '5', '6', '7'], | ||
68 | + boundaryGap: false, | ||
69 | + }, | ||
70 | + yAxis: { | ||
71 | + type: 'value', | ||
72 | + boundaryGap: false, | ||
73 | + }, | ||
74 | + series: [ | ||
75 | + { | ||
76 | + name: 'CO', | ||
77 | + type: 'line', | ||
78 | + stack: 'Total', | ||
79 | + data: [150, 230, 224, 218, 135, 147, 260], | ||
80 | + }, | ||
81 | + { | ||
82 | + name: 'CO2', | ||
83 | + type: 'line', | ||
84 | + stack: 'Total', | ||
85 | + data: [15, 23, 22, 28, 15, 17, 20], | ||
86 | + }, | ||
87 | + { | ||
88 | + name: 'Temp', | ||
89 | + type: 'line', | ||
90 | + stack: 'Total', | ||
91 | + data: [15, 23, 22, 28, 15, 17, 20], | ||
92 | + }, | ||
93 | + ], | ||
94 | + }; | ||
95 | + myChart.setOption(myOption); | ||
96 | + //自适应 | ||
97 | + window.addEventListener('resize', () => { | ||
98 | + myChart.resize(); | ||
99 | + }); | ||
78 | }); | 100 | }); |
79 | }); | 101 | }); |
80 | }); | 102 | }); |
81 | - | ||
82 | - const handleCancel = () => {}; | ||
83 | </script> | 103 | </script> |
84 | -<style> | ||
85 | - .video-sty { | ||
86 | - width: 100%; | ||
87 | - display: flex; | ||
88 | - align-items: center; | ||
89 | - justify-content: center; | ||
90 | - } | 104 | +<style lang="less" scoped> |
105 | + @import url('./ReportPreviewModal.less'); | ||
91 | </style> | 106 | </style> |
@@ -30,6 +30,14 @@ export const columns: BasicColumn[] = [ | @@ -30,6 +30,14 @@ export const columns: BasicColumn[] = [ | ||
30 | }, | 30 | }, |
31 | }, | 31 | }, |
32 | { | 32 | { |
33 | + title: '执行状态', | ||
34 | + dataIndex: 'status', | ||
35 | + width: 120, | ||
36 | + format: (_text: string, record: Recordable) => { | ||
37 | + return record.status === 1 ? '成功' : record.status === 0 ? '失败' : '进行中'; | ||
38 | + }, | ||
39 | + }, | ||
40 | + { | ||
33 | title: '执行日期', | 41 | title: '执行日期', |
34 | dataIndex: 'executeTime', | 42 | dataIndex: 'executeTime', |
35 | width: 180, | 43 | width: 180, |
@@ -57,11 +65,11 @@ export const searchFormSchema: FormSchema[] = [ | @@ -57,11 +65,11 @@ export const searchFormSchema: FormSchema[] = [ | ||
57 | options: [ | 65 | options: [ |
58 | { | 66 | { |
59 | label: '进行中', | 67 | label: '进行中', |
60 | - value: 1, | 68 | + value: 2, |
61 | }, | 69 | }, |
62 | { | 70 | { |
63 | label: '成功', | 71 | label: '成功', |
64 | - value: 0, | 72 | + value: 1, |
65 | }, | 73 | }, |
66 | { | 74 | { |
67 | label: '失败', | 75 | label: '失败', |
@@ -3,7 +3,9 @@ | @@ -3,7 +3,9 @@ | ||
3 | <BasicTable :clickToRowSelect="false" @register="registerTable" :searchInfo="searchInfo"> | 3 | <BasicTable :clickToRowSelect="false" @register="registerTable" :searchInfo="searchInfo"> |
4 | <template #toolbar> | 4 | <template #toolbar> |
5 | <Authority value="api:yt:reportExport:export"> | 5 | <Authority value="api:yt:reportExport:export"> |
6 | - <a-button type="primary" @click="exportCharts"> 导出报表 </a-button> | 6 | + <Popconfirm title="您确定要导出报表数据吗?" ok-text="确定" cancel-text="取消" @confirm="exportCharts()"> |
7 | + <a-button type="primary"> 导出报表 </a-button> | ||
8 | + </Popconfirm> | ||
7 | </Authority> | 9 | </Authority> |
8 | <Authority value="api:yt:reportExport:delete"> | 10 | <Authority value="api:yt:reportExport:delete"> |
9 | <Popconfirm title="您确定要批量删除数据" ok-text="确定" cancel-text="取消" @confirm="handleDeleteOrBatchDelete(null)"> | 11 | <Popconfirm title="您确定要批量删除数据" ok-text="确定" cancel-text="取消" @confirm="handleDeleteOrBatchDelete(null)"> |
@@ -14,17 +16,12 @@ | @@ -14,17 +16,12 @@ | ||
14 | <template #action="{ record }"> | 16 | <template #action="{ record }"> |
15 | <TableAction :actions="[ | 17 | <TableAction :actions="[ |
16 | { | 18 | { |
17 | - label: '查看', | 19 | + label: '报表查看', |
18 | icon: 'clarity:note-edit-line', | 20 | icon: 'clarity:note-edit-line', |
19 | auth: 'api:yt:reportExport:get', | 21 | auth: 'api:yt:reportExport:get', |
20 | onClick: handleView.bind(null, record), | 22 | onClick: handleView.bind(null, record), |
21 | }, | 23 | }, |
22 | { | 24 | { |
23 | - label: '导出报表', | ||
24 | - icon: 'clarity:note-edit-line', | ||
25 | - auth: 'api:yt:reportExport:export', | ||
26 | - }, | ||
27 | - { | ||
28 | label: '删除', | 25 | label: '删除', |
29 | icon: 'ant-design:delete-outlined', | 26 | icon: 'ant-design:delete-outlined', |
30 | auth: 'api:yt:reportExport:delete', | 27 | auth: 'api:yt:reportExport:delete', |
@@ -51,15 +48,15 @@ import { Popconfirm } from 'ant-design-vue'; | @@ -51,15 +48,15 @@ import { Popconfirm } from 'ant-design-vue'; | ||
51 | import { useModal } from '/@/components/Modal'; | 48 | import { useModal } from '/@/components/Modal'; |
52 | import ReportPreviewModal from './ReportPreviewModal.vue'; | 49 | import ReportPreviewModal from './ReportPreviewModal.vue'; |
53 | import { | 50 | import { |
54 | - exportPage, | 51 | + // exportPage, |
55 | deleteExportManage | 52 | deleteExportManage |
56 | } from '/@/api/export/exportManager'; | 53 | } from '/@/api/export/exportManager'; |
57 | 54 | ||
58 | const searchInfo = reactive<Recordable>({}); | 55 | const searchInfo = reactive<Recordable>({}); |
59 | 56 | ||
60 | -const [registerTable, { reload, setProps }] = useTable({ | 57 | +const [registerTable, { reload, setProps, setTableData }] = useTable({ |
61 | title: '报表导出列表', | 58 | title: '报表导出列表', |
62 | - api: exportPage, | 59 | + // api: exportPage, |
63 | columns, | 60 | columns, |
64 | showIndexColumn: false, | 61 | showIndexColumn: false, |
65 | clickToRowSelect: false, | 62 | clickToRowSelect: false, |
@@ -92,6 +89,17 @@ const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatch | @@ -92,6 +89,17 @@ const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatch | ||
92 | 89 | ||
93 | nextTick(() => { | 90 | nextTick(() => { |
94 | setProps(selectionOptions); | 91 | setProps(selectionOptions); |
92 | + setTableData([ | ||
93 | + { | ||
94 | + reportConfigName: '1', | ||
95 | + organizationName: '2', | ||
96 | + dataCompare: 1, | ||
97 | + executeWay: 1, | ||
98 | + executeTime: 1, | ||
99 | + status: 2 | ||
100 | + } | ||
101 | + ]) | ||
102 | + | ||
95 | }); | 103 | }); |
96 | 104 | ||
97 | const [registerModal, { openModal }] = useModal(); | 105 | const [registerModal, { openModal }] = useModal(); |