|
|
@@ -43,704 +43,713 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { ref, onMounted, computed, reactive, shallowRef } from 'vue';
|
|
|
- import {
|
|
|
- columns,
|
|
|
- Hjtcolumns,
|
|
|
- Bdcolumns,
|
|
|
- Bltcolumns,
|
|
|
- Sgtcolumns,
|
|
|
- Yjlcolumns,
|
|
|
- Cctrkcolumns,
|
|
|
- Wlmlcolumns,
|
|
|
- Jinjiecolumns,
|
|
|
- Hlgcolumns,
|
|
|
- Ltcolumns,
|
|
|
- } from './bundleSpy-table.data';
|
|
|
- import { getbundleSpyInfoList, getAllFileList, getAllFileListById } from './bundleSpy-table.api';
|
|
|
- import customHeader from '/@/components/vent/customHeader.vue';
|
|
|
- import * as echarts from 'echarts';
|
|
|
- import BlastDelta from './modal/blastDelta.vue';
|
|
|
- import { Progress } from 'ant-design-vue';
|
|
|
- import { useGlobSetting } from '/@/hooks/setting';
|
|
|
- // import 'ant-design-vue/dist/antd.css'; // 引入样式
|
|
|
- let selectList = ref<any[]>([]);
|
|
|
+import { ref, onMounted, computed, reactive, shallowRef } from 'vue';
|
|
|
+import {
|
|
|
+ columns,
|
|
|
+ Hjtcolumns,
|
|
|
+ Bdcolumns,
|
|
|
+ Bltcolumns,
|
|
|
+ Sgtcolumns,
|
|
|
+ Yjlcolumns,
|
|
|
+ Cctrkcolumns,
|
|
|
+ Wlmlcolumns,
|
|
|
+ Jinjiecolumns,
|
|
|
+ Hlgcolumns,
|
|
|
+ Ltcolumns,
|
|
|
+ Betcolumns,
|
|
|
+ Betcolumns2,
|
|
|
+} from './bundleSpy-table.data';
|
|
|
+import { getbundleSpyInfoList, getAllFileList, getAllFileListById } from './bundleSpy-table.api';
|
|
|
+import customHeader from '/@/components/vent/customHeader.vue';
|
|
|
+import * as echarts from 'echarts';
|
|
|
+import BlastDelta from './modal/blastDelta.vue';
|
|
|
+import { Progress } from 'ant-design-vue';
|
|
|
+import { useGlobSetting } from '/@/hooks/setting';
|
|
|
+// import 'ant-design-vue/dist/antd.css'; // 引入样式
|
|
|
+let selectList = ref<any[]>([]);
|
|
|
|
|
|
- let formSearch = reactive({
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 1000,
|
|
|
- id: '',
|
|
|
- fileName: '',
|
|
|
- });
|
|
|
- const total = ref(0);
|
|
|
- const { sysOrgCode } = useGlobSetting();
|
|
|
- const qfqCount = ref(0); // 潜伏期
|
|
|
- const latentCount = ref(0); // 缓慢氧化阶段(潜伏期)
|
|
|
- const selfHeatingCount = ref(0); // 加速氧化阶段(自热期)
|
|
|
- const combustionCount = ref(0); // 剧烈氧化阶段(燃烧期)
|
|
|
- const qfqPercent = ref(0); // 潜伏期(潜伏期)
|
|
|
- const latentPercent = ref(0); // 缓慢氧化阶段(潜伏期)
|
|
|
- const selfHeatingPercent = ref(0); // 加速氧化阶段(自热期)
|
|
|
- const combustionPercent = ref(0); // 剧烈氧化阶段(燃烧期)
|
|
|
- let tableData = ref<any[]>([]);
|
|
|
- let selectedFileId = ref<string | null>(null);
|
|
|
- let modalVisible = ref(false);
|
|
|
- const posMonitor = shallowRef({});
|
|
|
- const computedColumns = computed(() => {
|
|
|
- switch (sysOrgCode) {
|
|
|
- case 'sdmtjtdltmkhjtj':
|
|
|
- return Hjtcolumns; // 活鸡兔对应的列配置
|
|
|
- case 'sdmtjtBdmk':
|
|
|
- return Bdcolumns; // 保德对应的列配置
|
|
|
- case 'sdmtjtbltmk':
|
|
|
- return Bltcolumns; // 补连塔对应的列配置
|
|
|
- case 'sdmtjtsgtmk':
|
|
|
- return Sgtcolumns; // 石圪台对应的列配置
|
|
|
- case 'sdmtjtyjlmk':
|
|
|
- return Yjlcolumns; // 榆家梁对应的列配置
|
|
|
- case 'sdmtjtcctrk':
|
|
|
- return Cctrkcolumns; // 寸草塔二矿对应的列配置
|
|
|
- case 'sdmtjtwlmlmk':
|
|
|
- return Wlmlcolumns; // 乌兰木伦对应的列配置
|
|
|
- case 'sdmtjtjjmk':
|
|
|
- return Jinjiecolumns; // 锦界对应的列配置
|
|
|
- case 'sdmtjthlgmk':
|
|
|
- return Hlgcolumns; // 哈拉沟对应的列配置
|
|
|
- case 'sdmtjtltmk':
|
|
|
- return Ltcolumns; // 柳塔煤矿对应的列配置
|
|
|
- default:
|
|
|
- return columns; // 默认情况下返回的列配置
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- //获取色谱仪报表
|
|
|
- async function getTableList(params: any) {
|
|
|
- let res = await getbundleSpyInfoList({ type: 'bundleSpy', ...params });
|
|
|
- const content = res.content;
|
|
|
- let contentArr = JSON.parse(content);
|
|
|
- // const contentNewArr = computed(() => {
|
|
|
- // return contentArr.map((item) => {
|
|
|
- // let internalFireWarnLevel = '';
|
|
|
+let formSearch = reactive({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 1000,
|
|
|
+ id: '',
|
|
|
+ fileName: '',
|
|
|
+});
|
|
|
+const total = ref(0);
|
|
|
+const { sysOrgCode } = useGlobSetting();
|
|
|
+const qfqCount = ref(0); // 潜伏期
|
|
|
+const latentCount = ref(0); // 缓慢氧化阶段(潜伏期)
|
|
|
+const selfHeatingCount = ref(0); // 加速氧化阶段(自热期)
|
|
|
+const combustionCount = ref(0); // 剧烈氧化阶段(燃烧期)
|
|
|
+const qfqPercent = ref(0); // 潜伏期(潜伏期)
|
|
|
+const latentPercent = ref(0); // 缓慢氧化阶段(潜伏期)
|
|
|
+const selfHeatingPercent = ref(0); // 加速氧化阶段(自热期)
|
|
|
+const combustionPercent = ref(0); // 剧烈氧化阶段(燃烧期)
|
|
|
+let tableData = ref<any[]>([]);
|
|
|
+const reportVersion = ref<string | number | null>(null);
|
|
|
+// 后端可能返回数字 2 / 2.0 或字符串 '2.0'，统一按数值判断
|
|
|
+const isReportV2 = computed(() => Number(reportVersion.value) >= 2);
|
|
|
+let selectedFileId = ref<string | null>(null);
|
|
|
+let modalVisible = ref(false);
|
|
|
+const posMonitor = shallowRef({});
|
|
|
+const computedColumns = computed(() => {
|
|
|
+ switch (sysOrgCode) {
|
|
|
+ case 'sdmtjtdltmkhjtj':
|
|
|
+ return Hjtcolumns; // 活鸡兔对应的列配置
|
|
|
+ case 'sdmtjtBdmk':
|
|
|
+ return Bdcolumns; // 保德对应的列配置
|
|
|
+ case 'sdmtjtbltmk':
|
|
|
+ return Bltcolumns; // 补连塔对应的列配置
|
|
|
+ case 'sdmtjtsgtmk':
|
|
|
+ return Sgtcolumns; // 石圪台对应的列配置
|
|
|
+ case 'sdmtjtyjlmk':
|
|
|
+ return Yjlcolumns; // 榆家梁对应的列配置
|
|
|
+ case 'sdmtjtcctrk':
|
|
|
+ return Cctrkcolumns; // 寸草塔二矿对应的列配置
|
|
|
+ case 'sdmtjtwlmlmk':
|
|
|
+ return Wlmlcolumns; // 乌兰木伦对应的列配置
|
|
|
+ case 'sdmtjtjjmk':
|
|
|
+ return Jinjiecolumns; // 锦界对应的列配置
|
|
|
+ case 'sdmtjthlgmk':
|
|
|
+ return Hlgcolumns; // 哈拉沟对应的列配置
|
|
|
+ case 'sdmtjtltmk':
|
|
|
+ return Ltcolumns; // 柳塔煤矿对应的列配置
|
|
|
+ case 'sdmtjtbetmk':
|
|
|
+ return isReportV2.value ? Betcolumns2 : Betcolumns; // 布尔台对应的列配置（2.0 版报表字段不同）
|
|
|
+ default:
|
|
|
+ return columns; // 默认情况下返回的列配置
|
|
|
+ }
|
|
|
+});
|
|
|
|
|
|
- // const co = item.co_ave;
|
|
|
- // const co2 = item.co2_ave;
|
|
|
- // const c2h4 = item.c2h4_ave;
|
|
|
- // const c2h2 = item.c2h2_ave;
|
|
|
- // const coRatio = co / co2;
|
|
|
+//获取色谱仪报表
|
|
|
+async function getTableList(params: any) {
|
|
|
+ let res = await getbundleSpyInfoList({ type: 'bundleSpy', ...params });
|
|
|
+ reportVersion.value = res.reportVersion ?? null;
|
|
|
+ const content = res.content;
|
|
|
+ let contentArr = JSON.parse(content);
|
|
|
+ // const contentNewArr = computed(() => {
|
|
|
+ // return contentArr.map((item) => {
|
|
|
+ // let internalFireWarnLevel = '';
|
|
|
|
|
|
- // if (co >= 0 && co <= 13.75) {
|
|
|
- // internalFireWarnLevel = '潜伏期阶段';
|
|
|
- // } else if (co > 13.75 && co < 67.2 && coRatio < 0.095) {
|
|
|
- // internalFireWarnLevel = '缓慢氧化升温阶段';
|
|
|
- // } else if ((co >= 67.2 && co < 1606.3) || (coRatio >= 0.095 && coRatio < 0.322) || c2h4 < 2) {
|
|
|
- // internalFireWarnLevel = '加速氧化阶段';
|
|
|
- // } else if (co >= 1606.3 || coRatio >= 0.322 || c2h4 >= 2 || c2h2 > 0) {
|
|
|
- // internalFireWarnLevel = '剧烈氧化阶段';
|
|
|
- // }
|
|
|
+ // const co = item.co_ave;
|
|
|
+ // const co2 = item.co2_ave;
|
|
|
+ // const c2h4 = item.c2h4_ave;
|
|
|
+ // const c2h2 = item.c2h2_ave;
|
|
|
+ // const coRatio = co / co2;
|
|
|
|
|
|
- // return { ...item, internalFireWarnLevel };
|
|
|
- // });
|
|
|
- // });
|
|
|
- total.value = contentArr.length;
|
|
|
- qfqCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '潜伏期阶段').length;
|
|
|
- latentCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '缓慢氧化升温阶段').length;
|
|
|
- selfHeatingCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '加速氧化升温阶段').length;
|
|
|
- combustionCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '剧烈氧化升温阶段').length;
|
|
|
- qfqPercent.value = (qfqCount.value / total.value) * 100;
|
|
|
- latentPercent.value = (latentCount.value / total.value) * 100;
|
|
|
- selfHeatingPercent.value = (selfHeatingCount.value / total.value) * 100;
|
|
|
- combustionPercent.value = (combustionCount.value / total.value) * 100;
|
|
|
- tableData.value = contentArr;
|
|
|
- updateChart(contentArr);
|
|
|
- }
|
|
|
- async function getTableListById(params: any) {
|
|
|
- let res = await getAllFileListById({ ...params });
|
|
|
- const content = res.content;
|
|
|
- let contentArr = JSON.parse(content);
|
|
|
- total.value = contentArr.length;
|
|
|
- qfqCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '潜伏期阶段').length;
|
|
|
- latentCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '缓慢氧化升温阶段').length;
|
|
|
- selfHeatingCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '加速氧化升温阶段').length;
|
|
|
- combustionCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '剧烈氧化升温阶段').length;
|
|
|
- qfqPercent.value = (qfqCount.value / total.value) * 100;
|
|
|
- latentPercent.value = (latentCount.value / total.value) * 100;
|
|
|
- selfHeatingPercent.value = (selfHeatingCount.value / total.value) * 100;
|
|
|
- combustionPercent.value = (combustionCount.value / total.value) * 100;
|
|
|
- tableData.value = contentArr;
|
|
|
- updateChart(contentArr);
|
|
|
- }
|
|
|
+ // if (co >= 0 && co <= 13.75) {
|
|
|
+ // internalFireWarnLevel = '潜伏期阶段';
|
|
|
+ // } else if (co > 13.75 && co < 67.2 && coRatio < 0.095) {
|
|
|
+ // internalFireWarnLevel = '缓慢氧化升温阶段';
|
|
|
+ // } else if ((co >= 67.2 && co < 1606.3) || (coRatio >= 0.095 && coRatio < 0.322) || c2h4 < 2) {
|
|
|
+ // internalFireWarnLevel = '加速氧化阶段';
|
|
|
+ // } else if (co >= 1606.3 || coRatio >= 0.322 || c2h4 >= 2 || c2h2 > 0) {
|
|
|
+ // internalFireWarnLevel = '剧烈氧化阶段';
|
|
|
+ // }
|
|
|
|
|
|
- //跳转到爆炸三角形
|
|
|
- function toDetail(record: any) {
|
|
|
- posMonitor.value = record;
|
|
|
- console.log(posMonitor.value);
|
|
|
- modalVisible.value = true;
|
|
|
- }
|
|
|
- //折线图
|
|
|
- function updateChart(data: any) {
|
|
|
- const chartDom = document.getElementById('lineChart');
|
|
|
- const myChart = echarts.init(chartDom);
|
|
|
- const categories = data.map((item: any) => item.jcdd);
|
|
|
- const c2h2AveValues = data.map((item: any) => parseFloat(item.c2h2_ave));
|
|
|
- const c2h4AveValues = data.map((item: any) => parseFloat(item.c2h4_ave));
|
|
|
- const ch4AveValues = data.map((item: any) => parseFloat(item.ch4_ave));
|
|
|
- const co2AveValues = data.map((item: any) => parseFloat(item.co2_ave));
|
|
|
- const coAveValues = data.map((item: any) => parseFloat(item.co_ave));
|
|
|
- const o2AveValues = data.map((item: any) => parseFloat(item.o2_ave));
|
|
|
- const n2AveValues = data.map((item: any) => parseFloat(item.n2_ave));
|
|
|
- const c2h6AveValues = data.map((item: any) => parseFloat(item.c2h6_ave));
|
|
|
- const c3h8AveValues = data.map((item: any) => parseFloat(item.c3h8_ave));
|
|
|
- const ch4AveBqValues = data.map((item: any) => parseFloat(item.ch4_ave_bq));
|
|
|
- const o2AveBqValues = data.map((item: any) => parseFloat(item.o2_ave_bq));
|
|
|
+ // return { ...item, internalFireWarnLevel };
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ total.value = contentArr.length;
|
|
|
+ qfqCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '潜伏期阶段').length;
|
|
|
+ latentCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '缓慢氧化升温阶段').length;
|
|
|
+ selfHeatingCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '加速氧化升温阶段').length;
|
|
|
+ combustionCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '剧烈氧化升温阶段').length;
|
|
|
+ qfqPercent.value = (qfqCount.value / total.value) * 100;
|
|
|
+ latentPercent.value = (latentCount.value / total.value) * 100;
|
|
|
+ selfHeatingPercent.value = (selfHeatingCount.value / total.value) * 100;
|
|
|
+ combustionPercent.value = (combustionCount.value / total.value) * 100;
|
|
|
+ tableData.value = contentArr;
|
|
|
+ updateChart(contentArr);
|
|
|
+}
|
|
|
+async function getTableListById(params: any) {
|
|
|
+ let res = await getAllFileListById({ ...params });
|
|
|
+ reportVersion.value = res.reportVersion ?? null;
|
|
|
+ const content = res.content;
|
|
|
+ let contentArr = JSON.parse(content);
|
|
|
+ total.value = contentArr.length;
|
|
|
+ qfqCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '潜伏期阶段').length;
|
|
|
+ latentCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '缓慢氧化升温阶段').length;
|
|
|
+ selfHeatingCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '加速氧化升温阶段').length;
|
|
|
+ combustionCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '剧烈氧化升温阶段').length;
|
|
|
+ qfqPercent.value = (qfqCount.value / total.value) * 100;
|
|
|
+ latentPercent.value = (latentCount.value / total.value) * 100;
|
|
|
+ selfHeatingPercent.value = (selfHeatingCount.value / total.value) * 100;
|
|
|
+ combustionPercent.value = (combustionCount.value / total.value) * 100;
|
|
|
+ tableData.value = contentArr;
|
|
|
+ updateChart(contentArr);
|
|
|
+}
|
|
|
|
|
|
- const getSeriesConfig = (sysOrgCode) => {
|
|
|
- switch (sysOrgCode) {
|
|
|
- case 'sdmtjtdltmkhjtj':
|
|
|
- return [
|
|
|
- {
|
|
|
- name: 'CH₄闭内',
|
|
|
- data: ch4AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'O₂闭内',
|
|
|
- data: ch4AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'CO₂闭内',
|
|
|
- data: co2AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'CO闭内',
|
|
|
- data: coAveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'CH₄闭前',
|
|
|
- data: ch4AveBqValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'O₂闭前',
|
|
|
- data: o2AveBqValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- ];
|
|
|
- case 'sdmtjtBdmk':
|
|
|
- return [
|
|
|
- {
|
|
|
- name: 'O₂',
|
|
|
- data: o2AveValues,
|
|
|
- yAxisIndex: 0,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'N₂',
|
|
|
- data: n2AveValues,
|
|
|
- yAxisIndex: 0,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
+//跳转到爆炸三角形
|
|
|
+function toDetail(record: any) {
|
|
|
+ posMonitor.value = record;
|
|
|
+ console.log(posMonitor.value);
|
|
|
+ modalVisible.value = true;
|
|
|
+}
|
|
|
+//折线图
|
|
|
+function updateChart(data: any) {
|
|
|
+ const chartDom = document.getElementById('lineChart');
|
|
|
+ const myChart = echarts.init(chartDom);
|
|
|
+ const categories = data.map((item: any) => item.jcdd);
|
|
|
+ const c2h2AveValues = data.map((item: any) => parseFloat(item.c2h2_ave));
|
|
|
+ const c2h4AveValues = data.map((item: any) => parseFloat(item.c2h4_ave));
|
|
|
+ const ch4AveValues = data.map((item: any) => parseFloat(item.ch4_ave));
|
|
|
+ const co2AveValues = data.map((item: any) => parseFloat(item.co2_ave));
|
|
|
+ const coAveValues = data.map((item: any) => parseFloat(item.co_ave));
|
|
|
+ const o2AveValues = data.map((item: any) => parseFloat(item.o2_ave));
|
|
|
+ const n2AveValues = data.map((item: any) => parseFloat(item.n2_ave));
|
|
|
+ const c2h6AveValues = data.map((item: any) => parseFloat(item.c2h6_ave));
|
|
|
+ const c3h8AveValues = data.map((item: any) => parseFloat(item.c3h8_ave));
|
|
|
+ const ch4AveBqValues = data.map((item: any) => parseFloat(item.ch4_ave_bq));
|
|
|
+ const o2AveBqValues = data.map((item: any) => parseFloat(item.o2_ave_bq));
|
|
|
|
|
|
- {
|
|
|
- name: 'CO',
|
|
|
- data: coAveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'CO₂',
|
|
|
- data: co2AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'CH₄',
|
|
|
- data: ch4AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'C₂H₆',
|
|
|
- data: c2h6AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'C3H8',
|
|
|
- data: c3h8AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'C₂H₄',
|
|
|
- data: c2h4AveValues,
|
|
|
- type: 'bar',
|
|
|
- yAxisIndex: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'C₂H₂',
|
|
|
- data: c2h2AveValues,
|
|
|
- type: 'bar',
|
|
|
- yAxisIndex: 1,
|
|
|
- },
|
|
|
- ];
|
|
|
- case 'sdmtjtyjlmk':
|
|
|
- return [
|
|
|
- {
|
|
|
- name: 'O₂',
|
|
|
- data: o2AveValues,
|
|
|
- yAxisIndex: 0,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'N₂',
|
|
|
- data: n2AveValues,
|
|
|
- yAxisIndex: 0,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
+ const getSeriesConfig = (sysOrgCode) => {
|
|
|
+ switch (sysOrgCode) {
|
|
|
+ case 'sdmtjtdltmkhjtj':
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ name: 'CH₄闭内',
|
|
|
+ data: ch4AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'O₂闭内',
|
|
|
+ data: ch4AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'CO₂闭内',
|
|
|
+ data: co2AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'CO闭内',
|
|
|
+ data: coAveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'CH₄闭前',
|
|
|
+ data: ch4AveBqValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'O₂闭前',
|
|
|
+ data: o2AveBqValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ case 'sdmtjtBdmk':
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ name: 'O₂',
|
|
|
+ data: o2AveValues,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'N₂',
|
|
|
+ data: n2AveValues,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
|
|
|
- {
|
|
|
- name: 'CO',
|
|
|
- data: coAveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'CO₂',
|
|
|
- data: co2AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'CH₄',
|
|
|
- data: ch4AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'C₂H₆',
|
|
|
- data: c2h6AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'C₂H₄',
|
|
|
- data: c2h4AveValues,
|
|
|
- type: 'bar',
|
|
|
- yAxisIndex: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'C₂H₂',
|
|
|
- data: c2h2AveValues,
|
|
|
- type: 'bar',
|
|
|
- yAxisIndex: 1,
|
|
|
- },
|
|
|
- ];
|
|
|
- case 'sdmtjtcctrk':
|
|
|
- return [
|
|
|
- {
|
|
|
- name: 'CH₄闭内',
|
|
|
- data: ch4AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'O₂闭内',
|
|
|
- data: ch4AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'CO₂闭内',
|
|
|
- data: co2AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'CO闭内',
|
|
|
- data: coAveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'CH₄闭前',
|
|
|
- data: ch4AveBqValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'O₂闭前',
|
|
|
- data: o2AveBqValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- ];
|
|
|
- case 'sdmtjtltmk':
|
|
|
- case 'sdmtjtwlmlmk':
|
|
|
- case 'sdmtjthlgmk':
|
|
|
- return [
|
|
|
- {
|
|
|
- name: 'O₂',
|
|
|
- data: o2AveValues,
|
|
|
- yAxisIndex: 0,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'N₂',
|
|
|
- data: n2AveValues,
|
|
|
- yAxisIndex: 0,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
+ {
|
|
|
+ name: 'CO',
|
|
|
+ data: coAveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'CO₂',
|
|
|
+ data: co2AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'CH₄',
|
|
|
+ data: ch4AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'C₂H₆',
|
|
|
+ data: c2h6AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'C3H8',
|
|
|
+ data: c3h8AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'C₂H₄',
|
|
|
+ data: c2h4AveValues,
|
|
|
+ type: 'bar',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'C₂H₂',
|
|
|
+ data: c2h2AveValues,
|
|
|
+ type: 'bar',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ case 'sdmtjtyjlmk':
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ name: 'O₂',
|
|
|
+ data: o2AveValues,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'N₂',
|
|
|
+ data: n2AveValues,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
|
|
|
- {
|
|
|
- name: 'CO',
|
|
|
- data: coAveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'CO₂',
|
|
|
- data: co2AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'CH₄',
|
|
|
- data: ch4AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'C₂H₆',
|
|
|
- data: c2h6AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'C₂H₄',
|
|
|
- data: c2h4AveValues,
|
|
|
- type: 'bar',
|
|
|
- yAxisIndex: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'C₂H₂',
|
|
|
- data: c2h2AveValues,
|
|
|
- type: 'bar',
|
|
|
- yAxisIndex: 1,
|
|
|
- },
|
|
|
- ];
|
|
|
- default:
|
|
|
- return [
|
|
|
- {
|
|
|
- name: 'C₂H₂',
|
|
|
- data: c2h2AveValues,
|
|
|
- type: 'bar',
|
|
|
- yAxisIndex: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'C₂H₄',
|
|
|
- data: c2h4AveValues,
|
|
|
- type: 'bar',
|
|
|
- yAxisIndex: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'CH₄',
|
|
|
- data: ch4AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'CO₂',
|
|
|
- data: co2AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'CO',
|
|
|
- data: coAveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'O₂',
|
|
|
- data: o2AveValues,
|
|
|
- yAxisIndex: 0,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'N₂',
|
|
|
- data: n2AveValues,
|
|
|
- yAxisIndex: 0,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'C₂H₆',
|
|
|
- data: c2h6AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- ];
|
|
|
- }
|
|
|
- };
|
|
|
+ {
|
|
|
+ name: 'CO',
|
|
|
+ data: coAveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'CO₂',
|
|
|
+ data: co2AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'CH₄',
|
|
|
+ data: ch4AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'C₂H₆',
|
|
|
+ data: c2h6AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'C₂H₄',
|
|
|
+ data: c2h4AveValues,
|
|
|
+ type: 'bar',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'C₂H₂',
|
|
|
+ data: c2h2AveValues,
|
|
|
+ type: 'bar',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ case 'sdmtjtcctrk':
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ name: 'CH₄闭内',
|
|
|
+ data: ch4AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'O₂闭内',
|
|
|
+ data: ch4AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'CO₂闭内',
|
|
|
+ data: co2AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'CO闭内',
|
|
|
+ data: coAveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'CH₄闭前',
|
|
|
+ data: ch4AveBqValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'O₂闭前',
|
|
|
+ data: o2AveBqValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ case 'sdmtjtltmk':
|
|
|
+ case 'sdmtjtwlmlmk':
|
|
|
+ case 'sdmtjthlgmk':
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ name: 'O₂',
|
|
|
+ data: o2AveValues,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'N₂',
|
|
|
+ data: n2AveValues,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
|
|
|
- const seriesConfig = getSeriesConfig(sysOrgCode);
|
|
|
- const option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
|
|
|
- textStyle: {
|
|
|
- color: '#ffffff', // 设置 tooltip 字体颜色为白色
|
|
|
- },
|
|
|
- axisPointer: {
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- backgroundColor: '#071c44',
|
|
|
+ {
|
|
|
+ name: 'CO',
|
|
|
+ data: coAveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
},
|
|
|
- },
|
|
|
+ {
|
|
|
+ name: 'CO₂',
|
|
|
+ data: co2AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'CH₄',
|
|
|
+ data: ch4AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'C₂H₆',
|
|
|
+ data: c2h6AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'C₂H₄',
|
|
|
+ data: c2h4AveValues,
|
|
|
+ type: 'bar',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'C₂H₂',
|
|
|
+ data: c2h2AveValues,
|
|
|
+ type: 'bar',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ default:
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ name: 'C₂H₂',
|
|
|
+ data: c2h2AveValues,
|
|
|
+ type: 'bar',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'C₂H₄',
|
|
|
+ data: c2h4AveValues,
|
|
|
+ type: 'bar',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'CH₄',
|
|
|
+ data: ch4AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'CO₂',
|
|
|
+ data: co2AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'CO',
|
|
|
+ data: coAveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'O₂',
|
|
|
+ data: o2AveValues,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'N₂',
|
|
|
+ data: n2AveValues,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'C₂H₆',
|
|
|
+ data: c2h6AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const seriesConfig = getSeriesConfig(sysOrgCode);
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff', // 设置 tooltip 字体颜色为白色
|
|
|
},
|
|
|
- legend: {
|
|
|
- // top: '5%',
|
|
|
- textStyle: {
|
|
|
- color: '#ffffffff',
|
|
|
+ axisPointer: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ backgroundColor: '#071c44',
|
|
|
},
|
|
|
- width: '80%', // 设置图例的宽度
|
|
|
- orient: 'horizontal', // 水平布局
|
|
|
- pageIconColor: '#ffffff', // 设置翻页图标颜色
|
|
|
- pageTextStyle: {
|
|
|
- color: '#ffffff', // 设置翻页文字颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: 0, // 固定图例在图表顶部，避免默认布局下落到图表底部
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffffff',
|
|
|
+ },
|
|
|
+ width: '80%', // 设置图例的宽度
|
|
|
+ orient: 'horizontal', // 水平布局
|
|
|
+ pageIconColor: '#ffffff', // 设置翻页图标颜色
|
|
|
+ pageTextStyle: {
|
|
|
+ color: '#ffffff', // 设置翻页文字颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: categories,
|
|
|
+ splitLine: { show: true, lineStyle: { color: 'rgba(28, 72, 105, 0.5)' } },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0, // 显示所有标签
|
|
|
+ color: '#ffffff', // 设置 x 轴字体颜色
|
|
|
+ formatter: function (value: string) {
|
|
|
+ return value.length > 12 ? value.slice(0, 12) + '...' : value; // 截断长标签
|
|
|
},
|
|
|
},
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: categories,
|
|
|
- splitLine: { show: true, lineStyle: { color: 'rgba(28, 72, 105, 0.5)' } },
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: 'O₂/N₂',
|
|
|
+ max: 100,
|
|
|
+ splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
|
|
|
axisLabel: {
|
|
|
- interval: 0, // 显示所有标签
|
|
|
- color: '#ffffff', // 设置 x 轴字体颜色
|
|
|
- formatter: function (value: string) {
|
|
|
- return value.length > 12 ? value.slice(0, 12) + '...' : value; // 截断长标签
|
|
|
- },
|
|
|
+ color: '#ffffff',
|
|
|
},
|
|
|
},
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- name: 'O₂/N₂',
|
|
|
- max: 100,
|
|
|
- splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
|
|
|
- axisLabel: {
|
|
|
- color: '#ffffff',
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- name: '其他气体',
|
|
|
- splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
|
|
|
- axisLabel: {
|
|
|
- color: '#ffffff', // 设置 y 轴字体颜色
|
|
|
- },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '其他气体',
|
|
|
+ splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#ffffff', // 设置 y 轴字体颜色
|
|
|
},
|
|
|
- ],
|
|
|
- dataZoom: [
|
|
|
- {
|
|
|
- type: 'slider', // 会创建一个滑块来选择要显示的区域
|
|
|
- start: 0, // 初始选中范围的起始百分比
|
|
|
- end: (5 / categories.length) * 100, // 初始选中范围的结束百分比，根据数据条数调整
|
|
|
- minSpan: (5 / categories.length) * 100, // 最小选中范围，根据数据条数调整
|
|
|
- maxSpan: (5 / categories.length) * 100, // 最大选中范围，根据数据条数调整
|
|
|
- show: true,
|
|
|
- height: 10, // 设置滑块高度
|
|
|
- bottom: 1, // 设置滑块距离容器底部的距离
|
|
|
- borderColor: 'transparent', // 设置边框颜色为透明
|
|
|
- backgroundColor: '#F6F7FB', // 设置背景颜色
|
|
|
- handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z', // 设置手柄图标为圆形
|
|
|
- handleColor: '#C2D2FF', // 设置手柄颜色
|
|
|
- handleSize: 13, // 设置手柄大小
|
|
|
- handleStyle: {
|
|
|
- borderColor: '#C2D2FF', // 设置手柄边框颜色
|
|
|
- },
|
|
|
- fillerColor: '#C2D2FF', // 设置选中范围的填充颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: 'slider', // 会创建一个滑块来选择要显示的区域
|
|
|
+ start: 0, // 初始选中范围的起始百分比
|
|
|
+ end: (5 / categories.length) * 100, // 初始选中范围的结束百分比，根据数据条数调整
|
|
|
+ minSpan: (5 / categories.length) * 100, // 最小选中范围，根据数据条数调整
|
|
|
+ maxSpan: (5 / categories.length) * 100, // 最大选中范围，根据数据条数调整
|
|
|
+ show: true,
|
|
|
+ height: 10, // 设置滑块高度
|
|
|
+ bottom: 1, // 设置滑块距离容器底部的距离
|
|
|
+ borderColor: 'transparent', // 设置边框颜色为透明
|
|
|
+ backgroundColor: '#F6F7FB', // 设置背景颜色
|
|
|
+ handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z', // 设置手柄图标为圆形
|
|
|
+ handleColor: '#C2D2FF', // 设置手柄颜色
|
|
|
+ handleSize: 13, // 设置手柄大小
|
|
|
+ handleStyle: {
|
|
|
+ borderColor: '#C2D2FF', // 设置手柄边框颜色
|
|
|
},
|
|
|
- ],
|
|
|
- grid: {
|
|
|
- top: '21%', // 设置 grid 距离顶部的距离，增加间隔
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true,
|
|
|
+ fillerColor: '#C2D2FF', // 设置选中范围的填充颜色
|
|
|
},
|
|
|
- series: seriesConfig,
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
+ ],
|
|
|
+ grid: {
|
|
|
+ top: '21%', // 设置 grid 距离顶部的距离，增加间隔
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ series: seriesConfig,
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+}
|
|
|
+//获取所有文件列表
|
|
|
+async function getAllFile() {
|
|
|
+ let res = await getAllFileList({ type: 'bundleSpy' });
|
|
|
+ selectList.value = res.records.map((item: any) => ({
|
|
|
+ id: item.id,
|
|
|
+ fileName: item.fileName,
|
|
|
+ }));
|
|
|
+ if (selectList.value.length > 0) {
|
|
|
+ formSearch.id = selectList.value[0].id;
|
|
|
+ getSearch();
|
|
|
}
|
|
|
- //获取所有文件列表
|
|
|
- async function getAllFile() {
|
|
|
- let res = await getAllFileList({ type: 'bundleSpy' });
|
|
|
- selectList.value = res.records.map((item: any) => ({
|
|
|
- id: item.id,
|
|
|
- fileName: item.fileName,
|
|
|
- }));
|
|
|
+}
|
|
|
+// 处理文件点击事件
|
|
|
+function handleFileClick(item: any) {
|
|
|
+ formSearch.id = item.id;
|
|
|
+ formSearch.fileName = item.fileName;
|
|
|
+ selectedFileId.value = item.id;
|
|
|
+ getSearch();
|
|
|
+}
|
|
|
+//查询
|
|
|
+function getSearch() {
|
|
|
+ // const selectedFile = selectList.value.find((item) => item.id === formSearch.id);
|
|
|
+ const params = {
|
|
|
+ id: formSearch.id,
|
|
|
+ // fileName: selectedFile ? selectedFile.fileName : '',
|
|
|
+ };
|
|
|
+ getTableListById(params);
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ getTableList({ type: 'bundleSpy' });
|
|
|
+ getAllFile().then(() => {
|
|
|
if (selectList.value.length > 0) {
|
|
|
formSearch.id = selectList.value[0].id;
|
|
|
+ selectedFileId.value = selectList.value[0].id;
|
|
|
getSearch();
|
|
|
}
|
|
|
- }
|
|
|
- // 处理文件点击事件
|
|
|
- function handleFileClick(item: any) {
|
|
|
- formSearch.id = item.id;
|
|
|
- formSearch.fileName = item.fileName;
|
|
|
- selectedFileId.value = item.id;
|
|
|
- getSearch();
|
|
|
- }
|
|
|
- //查询
|
|
|
- function getSearch() {
|
|
|
- // const selectedFile = selectList.value.find((item) => item.id === formSearch.id);
|
|
|
- const params = {
|
|
|
- id: formSearch.id,
|
|
|
- // fileName: selectedFile ? selectedFile.fileName : '',
|
|
|
- };
|
|
|
- getTableListById(params);
|
|
|
- }
|
|
|
- onMounted(() => {
|
|
|
- getTableList({ type: 'bundleSpy' });
|
|
|
- getAllFile().then(() => {
|
|
|
- if (selectList.value.length > 0) {
|
|
|
- formSearch.id = selectList.value[0].id;
|
|
|
- selectedFileId.value = selectList.value[0].id;
|
|
|
- getSearch();
|
|
|
- }
|
|
|
- });
|
|
|
});
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- @import '/@/design/theme.less';
|
|
|
+@import '/@/design/theme.less';
|
|
|
|
|
|
- .content-container {
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding-top: 54px;
|
|
|
- }
|
|
|
+.content-container {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding-top: 54px;
|
|
|
+}
|
|
|
|
|
|
- .file-list {
|
|
|
- width: 20%;
|
|
|
- padding: 10px;
|
|
|
- margin-right: 10px;
|
|
|
- margin-bottom: 50px;
|
|
|
- border: 1px solid #99e8ff66;
|
|
|
- background: #27546e1a;
|
|
|
- box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
|
|
|
- -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
|
|
|
- -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
|
|
|
- }
|
|
|
+.file-list {
|
|
|
+ width: 20%;
|
|
|
+ padding: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 50px;
|
|
|
+ border: 1px solid #99e8ff66;
|
|
|
+ background: #27546e1a;
|
|
|
+ box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
|
|
|
+ -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
|
|
|
+ -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
|
|
|
+}
|
|
|
|
|
|
- .file-list ul {
|
|
|
- list-style: none;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
+.file-list ul {
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
|
|
|
- .file-list li {
|
|
|
- color: #fff;
|
|
|
- padding: 5px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+.file-list li {
|
|
|
+ color: #fff;
|
|
|
+ padding: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
|
|
|
- .file-list li:hover,
|
|
|
- .file-list li.selected {
|
|
|
- background: #1c4869;
|
|
|
- }
|
|
|
+.file-list li:hover,
|
|
|
+.file-list li.selected {
|
|
|
+ background: #1c4869;
|
|
|
+}
|
|
|
|
|
|
- .table-container {
|
|
|
- margin-top: 10px;
|
|
|
- width: 80%;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
+.table-container {
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 80%;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
|
|
|
- .dustMonitor {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 10px 10px 15px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
+.dustMonitor {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 10px 10px 15px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
|
|
|
- :deep(.zxm-table-thead > tr > th:last-child) {
|
|
|
- border-right: 1px solid #91e9fe !important;
|
|
|
- }
|
|
|
+:deep(.zxm-table-thead > tr > th:last-child) {
|
|
|
+ border-right: 1px solid #91e9fe !important;
|
|
|
+}
|
|
|
|
|
|
- :deep(.zxm-picker-input > input) {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+:deep(.zxm-picker-input > input) {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
|
|
|
- :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
|
|
|
- border: 1px solid var(--vent-form-item-border) !important;
|
|
|
- background-color: #ffffff00 !important;
|
|
|
- }
|
|
|
+:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
|
|
|
+ border: 1px solid var(--vent-form-item-border) !important;
|
|
|
+ background-color: #ffffff00 !important;
|
|
|
+}
|
|
|
|
|
|
- :deep(.zxm-select-selection-item) {
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
- .data-container {
|
|
|
- margin-top: 40px;
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+:deep(.zxm-select-selection-item) {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+.data-container {
|
|
|
+ margin-top: 40px;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
|
|
|
- .line-chart {
|
|
|
- flex: 3; /* 占据 3/4 的空间 */
|
|
|
- width: 100%;
|
|
|
- height: 400px;
|
|
|
- }
|
|
|
- .data-content {
|
|
|
- flex: 1; /* 占据 1/4 的空间 */
|
|
|
- height: 400px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column; /* 垂直排列进度条 */
|
|
|
- // align-items: center; /* 水平居中 */
|
|
|
- margin: 10px;
|
|
|
- .title {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 600;
|
|
|
- color: #fff;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
- .explain {
|
|
|
- color: var(--vent-table-action-link);
|
|
|
- margin-top: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
- .progress {
|
|
|
- width: 100%;
|
|
|
- height: 20px;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- .progress-label {
|
|
|
- margin-top: 20px;
|
|
|
- text-align: left;
|
|
|
- margin-bottom: 5px;
|
|
|
+.line-chart {
|
|
|
+ flex: 3; /* 占据 3/4 的空间 */
|
|
|
+ width: 100%;
|
|
|
+ height: 400px;
|
|
|
+}
|
|
|
+.data-content {
|
|
|
+ flex: 1; /* 占据 1/4 的空间 */
|
|
|
+ height: 400px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column; /* 垂直排列进度条 */
|
|
|
+ // align-items: center; /* 水平居中 */
|
|
|
+ margin: 10px;
|
|
|
+ .title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
color: #fff;
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
|
- ::deep .progress-text {
|
|
|
- color: #fff !important; /* 自定义百分比文字颜色 */
|
|
|
- }
|
|
|
- .blast-delta-container {
|
|
|
- margin: 50px;
|
|
|
- }
|
|
|
- .yellow-progress .ant-progress-bg {
|
|
|
- background-color: yellow !important;
|
|
|
+ .explain {
|
|
|
+ color: var(--vent-table-action-link);
|
|
|
+ margin-top: 18px;
|
|
|
}
|
|
|
+}
|
|
|
+.progress {
|
|
|
+ width: 100%;
|
|
|
+ height: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.progress-label {
|
|
|
+ margin-top: 20px;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+::deep .progress-text {
|
|
|
+ color: #fff !important; /* 自定义百分比文字颜色 */
|
|
|
+}
|
|
|
+.blast-delta-container {
|
|
|
+ margin: 50px;
|
|
|
+}
|
|
|
+.yellow-progress .ant-progress-bg {
|
|
|
+ background-color: yellow !important;
|
|
|
+}
|
|
|
|
|
|
- :deep(.zxm-table-thead > tr > th:last-child) {
|
|
|
- border-right: 1px solid #91e9fe !important;
|
|
|
- }
|
|
|
+:deep(.zxm-table-thead > tr > th:last-child) {
|
|
|
+ border-right: 1px solid #91e9fe !important;
|
|
|
+}
|
|
|
</style>
|
