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(); |