|
|
@@ -113,6 +113,7 @@
|
|
|
<a-select-option value="1h">1小时</a-select-option>
|
|
|
</a-select>
|
|
|
</template>
|
|
|
+ <!-- <a-button type="primary" preIcon="ant-design:export-outlined" @click="downloadChart()"> 导出</a-button> -->
|
|
|
<Pagination
|
|
|
size="small"
|
|
|
v-model:current="currentPage"
|
|
|
@@ -131,6 +132,7 @@
|
|
|
style="margin-top: 20px"
|
|
|
:chartsColumns="chartsColumnList"
|
|
|
:regValues="standardValues"
|
|
|
+ :key="deviceId"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -142,6 +144,7 @@ import dayjs from 'dayjs';
|
|
|
import { defHttp } from '/@/utils/http/axios';
|
|
|
import { Select, Pagination } from 'ant-design-vue';
|
|
|
import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
|
|
|
+import { size } from 'lodash';
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'DeviceEcharts',
|
|
|
@@ -192,6 +195,12 @@ export default defineComponent({
|
|
|
const chartsType = ref('listMonitor');
|
|
|
const deviceId = ref('');
|
|
|
const options = ref([]);
|
|
|
+ const selectedDeviceName = computed(() => {
|
|
|
+ const device = options.value.find((o) => o.deviceID === deviceId.value);
|
|
|
+ const name = device?.strname || '设备数据图表';
|
|
|
+ console.log('当前选中设备名：', name); // 你可以看控制台是否正确
|
|
|
+ return name;
|
|
|
+ });
|
|
|
const historyParams = reactive({
|
|
|
ttime_begin: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss').toString(),
|
|
|
ttime_end: dayjs().format('YYYY-MM-DD HH:mm:ss').toString(),
|
|
|
@@ -205,7 +214,7 @@ export default defineComponent({
|
|
|
const detailDataSource = ref<any[]>([]);
|
|
|
const historyData = ref([]);
|
|
|
const currentPage = ref<number>(1);
|
|
|
- const pageSize = ref<number>(20);
|
|
|
+ const pageSize = ref<number>(300);
|
|
|
const total = ref(0);
|
|
|
interface RegValueItem {
|
|
|
type: string;
|
|
|
@@ -232,21 +241,40 @@ export default defineComponent({
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
- const echartsOption1 = {
|
|
|
+ const echartsOption1 = computed(() => ({
|
|
|
+ title: {
|
|
|
+ text: selectedDeviceName.value, // 动态标题
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ top: 5,
|
|
|
+ },
|
|
|
grid: {
|
|
|
top: '70px',
|
|
|
left: '10px',
|
|
|
- right: chartsColumnList.length * 15 + 'px',
|
|
|
- bottom: '45px',
|
|
|
+ right: '45px',
|
|
|
+ bottom: '25px',
|
|
|
containLabel: true,
|
|
|
},
|
|
|
toolbox: {
|
|
|
- feature: {},
|
|
|
+ show: true,
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {
|
|
|
+ name: selectedDeviceName.value + '历史数据图表',
|
|
|
+ type: 'png',
|
|
|
+ pixelRatio: 2,
|
|
|
+ backgroundColor: '#07223a',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ right: 10,
|
|
|
+ top: -5,
|
|
|
},
|
|
|
xAxis: {
|
|
|
interval: 0,
|
|
|
},
|
|
|
- };
|
|
|
+ }));
|
|
|
const echartsOption2 = {
|
|
|
grid: {
|
|
|
top: '70px',
|
|
|
@@ -259,7 +287,6 @@ export default defineComponent({
|
|
|
feature: {},
|
|
|
},
|
|
|
};
|
|
|
-
|
|
|
const onChange = (pageNumber: number) => {
|
|
|
console.log('Page: ', pageNumber);
|
|
|
};
|
|
|
@@ -403,6 +430,7 @@ export default defineComponent({
|
|
|
return {
|
|
|
chartsType,
|
|
|
deviceId,
|
|
|
+ selectedDeviceName,
|
|
|
resultDataSource,
|
|
|
historyParams,
|
|
|
options,
|
