Commit 2e4b4c8cbdc12d8869bdd0f11d3b330e31a32638

Authored by fengtao
1 parent 3186e6e8

fix:修改报表配置

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