|
|
@@ -32,7 +32,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <a-modal style="width: 26%; height: 300px" title="爆炸三角形" v-model:visible="modalVisible" :draggable="true" :footer="null">
|
|
|
+ <a-modal style="width: 600px; height: 300px" title="爆炸三角形" v-model:visible="modalVisible" :draggable="true" :footer="null">
|
|
|
<div class="blast-delta-container">
|
|
|
<BlastDelta :posMonitor="posMonitor" />
|
|
|
</div>
|
|
|
@@ -41,350 +41,350 @@
|
|
|
</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', // 设置标题距离顶部的距离
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
|
|
|
- textStyle: {
|
|
|
- color: '#ffffff', // 设置 tooltip 字体颜色为白色
|
|
|
- },
|
|
|
- axisPointer: {
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- backgroundColor: '#071c44',
|
|
|
+ const option = {
|
|
|
+ title: {
|
|
|
+ text: '色谱仪报表分析',
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff', // 设置标题颜色
|
|
|
},
|
|
|
+ left: 'center', // 水平居中
|
|
|
+ top: '0', // 设置标题距离顶部的距离
|
|
|
},
|
|
|
- },
|
|
|
- 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; // 截断长标签
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff', // 设置 tooltip 字体颜色为白色
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ backgroundColor: '#071c44',
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
- },
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- name: 'O₂/N₂',
|
|
|
- max: 100,
|
|
|
- splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
|
|
|
- axisLabel: {
|
|
|
- color: '#ffffff',
|
|
|
+ legend: {
|
|
|
+ top: '9%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffffff',
|
|
|
+ },
|
|
|
+ width: '80%', // 设置图例的宽度
|
|
|
+ orient: 'horizontal', // 水平布局
|
|
|
+ pageIconColor: '#ffffff', // 设置翻页图标颜色
|
|
|
+ pageTextStyle: {
|
|
|
+ color: '#ffffff', // 设置翻页文字颜色
|
|
|
},
|
|
|
},
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- name: '其他气体',
|
|
|
- splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: categories,
|
|
|
+ splitLine: { show: true, lineStyle: { color: 'rgba(28, 72, 105, 0.5)' } },
|
|
|
axisLabel: {
|
|
|
- color: '#ffffff', // 设置 y 轴字体颜色
|
|
|
+ interval: 0, // 显示所有标签
|
|
|
+ color: '#ffffff', // 设置 x 轴字体颜色
|
|
|
+ formatter: function (value: string) {
|
|
|
+ return value.length > 12 ? value.slice(0, 12) + '...' : value; // 截断长标签
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
- ],
|
|
|
- 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',
|
|
|
+ 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 轴字体颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ grid: {
|
|
|
+ top: '21%', // 设置 grid 距离顶部的距离，增加间隔
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
- ],
|
|
|
- };
|
|
|
- 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();
|
|
|
+ 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);
|
|
|
}
|
|
|
-}
|
|
|
-// 处理文件点击事件
|
|
|
-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(() => {
|
|
|
+ //获取所有文件列表
|
|
|
+ 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;
|
|
|
- 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%;
|
|
|
-}
|
|
|
+ .content-container {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
|
|
|
-.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;
|
|
|
+ .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;
|
|
|
color: #fff;
|
|
|
- margin-bottom: 20px;
|
|
|
}
|
|
|
- .explain {
|
|
|
- color: var(--vent-table-action-link);
|
|
|
- margin-top: 18px;
|
|
|
+ ::deep .progress-text {
|
|
|
+ color: #fff !important; /* 自定义百分比文字颜色 */
|
|
|
+ }
|
|
|
+ .blast-delta-container {
|
|
|
+ margin: 50px;
|
|
|
+ }
|
|
|
+ .yellow-progress .ant-progress-bg {
|
|
|
+ background-color: yellow !important;
|
|
|
}
|
|
|
-}
|
|
|
-.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>
|
hongrunxia
