|
@@ -41,351 +41,351 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { ref, onMounted, reactive, shallowRef } from 'vue';
|
|
|
- import { columns } from './bundleSpy-table.data';
|
|
|
- import { getbundleSpyInfoList, getAllFileList } 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 'ant-design-vue/dist/antd.css'; // 引入样式
|
|
|
- let selectList = ref<any[]>([]);
|
|
|
+import { ref, onMounted, reactive, shallowRef } from 'vue';
|
|
|
+import { columns } from './bundleSpy-table.data';
|
|
|
+import { getbundleSpyInfoList, getAllFileList } 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 'ant-design-vue/dist/antd.css'; // 引入样式
|
|
|
+let selectList = ref<any[]>([]);
|
|
|
|
|
|
- let formSearch = reactive({
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 1000,
|
|
|
- fileId: '',
|
|
|
- fileName: '',
|
|
|
- });
|
|
|
- const latentCount = ref(0); // 缓慢氧化阶段(潜伏期)
|
|
|
- const selfHeatingCount = ref(0); // 加速氧化阶段(自热期)
|
|
|
- const combustionCount = 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({});
|
|
|
- //获取色谱仪报表
|
|
|
- async function getTableList(params: any) {
|
|
|
- let res = await getbundleSpyInfoList({ type: 'bundleSpy', ...params });
|
|
|
- const content = res.content;
|
|
|
- let contentArr = JSON.parse(content);
|
|
|
- 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;
|
|
|
- const total = contentArr.length;
|
|
|
- latentPercent.value = (latentCount.value / total) * 100;
|
|
|
- selfHeatingPercent.value = (selfHeatingCount.value / total) * 100;
|
|
|
- combustionPercent.value = (combustionCount.value / total) * 100;
|
|
|
- tableData.value = contentArr;
|
|
|
- updateChart(contentArr);
|
|
|
- }
|
|
|
- //跳转到爆炸三角形
|
|
|
- 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));
|
|
|
+let formSearch = reactive({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 1000,
|
|
|
+ fileId: '',
|
|
|
+ fileName: '',
|
|
|
+});
|
|
|
+const latentCount = ref(0); // 缓慢氧化阶段(潜伏期)
|
|
|
+const selfHeatingCount = ref(0); // 加速氧化阶段(自热期)
|
|
|
+const combustionCount = 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({});
|
|
|
+//获取色谱仪报表
|
|
|
+async function getTableList(params: any) {
|
|
|
+ let res = await getbundleSpyInfoList({ type: 'bundleSpy', ...params });
|
|
|
+ const content = res.content;
|
|
|
+ let contentArr = JSON.parse(content);
|
|
|
+ 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;
|
|
|
+ const total = contentArr.length;
|
|
|
+ latentPercent.value = (latentCount.value / total) * 100;
|
|
|
+ selfHeatingPercent.value = (selfHeatingCount.value / total) * 100;
|
|
|
+ combustionPercent.value = (combustionCount.value / total) * 100;
|
|
|
+ tableData.value = contentArr;
|
|
|
+ updateChart(contentArr);
|
|
|
+}
|
|
|
+//跳转到爆炸三角形
|
|
|
+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 option = {
|
|
|
- title: {
|
|
|
- text: '色谱仪报表分析',
|
|
|
- textStyle: {
|
|
|
- color: '#ffffff', // 设置标题颜色
|
|
|
- },
|
|
|
- left: 'center', // 水平居中
|
|
|
- top: '0', // 设置标题距离顶部的距离
|
|
|
+ const option = {
|
|
|
+ title: {
|
|
|
+ text: '色谱仪报表分析',
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff', // 设置标题颜色
|
|
|
},
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
|
|
|
- textStyle: {
|
|
|
- color: '#ffffff', // 设置 tooltip 字体颜色为白色
|
|
|
- },
|
|
|
- axisPointer: {
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- backgroundColor: '#071c44',
|
|
|
- },
|
|
|
- },
|
|
|
+ left: 'center', // 水平居中
|
|
|
+ top: '0', // 设置标题距离顶部的距离
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff', // 设置 tooltip 字体颜色为白色
|
|
|
},
|
|
|
- legend: {
|
|
|
- top: '9%',
|
|
|
- textStyle: {
|
|
|
- color: '#ffffffff',
|
|
|
+ axisPointer: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ backgroundColor: '#071c44',
|
|
|
},
|
|
|
- width: '80%', // 设置图例的宽度
|
|
|
- orient: 'horizontal', // 水平布局
|
|
|
- pageIconColor: '#ffffff', // 设置翻页图标颜色
|
|
|
- pageTextStyle: {
|
|
|
- color: '#ffffff', // 设置翻页文字颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '9%',
|
|
|
+ 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 轴字体颜色
|
|
|
},
|
|
|
- ],
|
|
|
- grid: {
|
|
|
- top: '21%', // 设置 grid 距离顶部的距离,增加间隔
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true,
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
- 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: 'C2H6平均值',
|
|
|
- data: c2h6AveValues,
|
|
|
- yAxisIndex: 1,
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
+ ],
|
|
|
+ grid: {
|
|
|
+ top: '21%', // 设置 grid 距离顶部的距离,增加间隔
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ 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: 'C2H6平均值',
|
|
|
+ data: c2h6AveValues,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+}
|
|
|
+//获取所有文件列表
|
|
|
+async function getAllFile() {
|
|
|
+ let res = await getAllFileList({ type: 'bundleSpy' });
|
|
|
+ selectList.value = res.records.map((item: any) => ({
|
|
|
+ fileId: item.fileId,
|
|
|
+ fileName: item.fileName,
|
|
|
+ }));
|
|
|
+ if (selectList.value.length > 0) {
|
|
|
+ formSearch.fileId = selectList.value[0].fileId;
|
|
|
+ getSearch();
|
|
|
}
|
|
|
- //获取所有文件列表
|
|
|
- async function getAllFile() {
|
|
|
- let res = await getAllFileList({ type: 'bundleSpy' });
|
|
|
- selectList.value = res.records.map((item: any) => ({
|
|
|
- fileId: item.fileId,
|
|
|
- fileName: item.fileName,
|
|
|
- }));
|
|
|
+}
|
|
|
+// 处理文件点击事件
|
|
|
+function handleFileClick(item: any) {
|
|
|
+ formSearch.fileId = item.fileId;
|
|
|
+ formSearch.fileName = item.fileName;
|
|
|
+ selectedFileId.value = item.fileId;
|
|
|
+ getSearch();
|
|
|
+}
|
|
|
+//查询
|
|
|
+function getSearch() {
|
|
|
+ const selectedFile = selectList.value.find((item) => item.fileId === formSearch.fileId);
|
|
|
+ const params = {
|
|
|
+ fileId: formSearch.fileId,
|
|
|
+ fileName: selectedFile ? selectedFile.fileName : '',
|
|
|
+ };
|
|
|
+ getTableList(params);
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ getTableList({ type: 'bundleSpy' });
|
|
|
+ getAllFile().then(() => {
|
|
|
if (selectList.value.length > 0) {
|
|
|
formSearch.fileId = selectList.value[0].fileId;
|
|
|
+ selectedFileId.value = selectList.value[0].fileId;
|
|
|
getSearch();
|
|
|
}
|
|
|
- }
|
|
|
- // 处理文件点击事件
|
|
|
- function handleFileClick(item: any) {
|
|
|
- formSearch.fileId = item.fileId;
|
|
|
- formSearch.fileName = item.fileName;
|
|
|
- selectedFileId.value = item.fileId;
|
|
|
- getSearch();
|
|
|
- }
|
|
|
- //查询
|
|
|
- function getSearch() {
|
|
|
- const selectedFile = selectList.value.find((item) => item.fileId === formSearch.fileId);
|
|
|
- const params = {
|
|
|
- fileId: formSearch.fileId,
|
|
|
- fileName: selectedFile ? selectedFile.fileName : '',
|
|
|
- };
|
|
|
- getTableList(params);
|
|
|
- }
|
|
|
- onMounted(() => {
|
|
|
- getTableList({ type: 'bundleSpy' });
|
|
|
- getAllFile().then(() => {
|
|
|
- if (selectList.value.length > 0) {
|
|
|
- formSearch.fileId = selectList.value[0].fileId;
|
|
|
- selectedFileId.value = selectList.value[0].fileId;
|
|
|
- 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 {
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+:deep(.zxm-select-selection-item) {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+.data-container {
|
|
|
+ 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>
|