|
|
@@ -45,7 +45,8 @@
|
|
|
v-model:id="shownChart"
|
|
|
/> -->
|
|
|
<a-select v-model:value="selectData" style="width: 250px" @change="changeSelect">
|
|
|
- <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{ file.label }}</a-select-option>
|
|
|
+ <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{ file.label
|
|
|
+ }}</a-select-option>
|
|
|
</a-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -69,628 +70,611 @@
|
|
|
</div>
|
|
|
<div class="echart-box">
|
|
|
<PredictionCurve v-if="shownChart === 'default'" :chart="curveConfig" />
|
|
|
- <echartLine1 v-if="shownChart === 'predict'" :echartDataSg="echartDataSg" :maxY="maxY1" :lengedDataName="echartDataSg.lengedDataName" />
|
|
|
+ <echartLine1 v-if="shownChart === 'predict'" :echartDataSg="echartDataSg" :maxY="maxY1"
|
|
|
+ :lengedDataName="echartDataSg.lengedDataName" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { ref, reactive, watch, defineProps } from 'vue';
|
|
|
- import imgUrl from '/@/assets/images/fire/pie.png';
|
|
|
- import echartLine from './echartLine.vue';
|
|
|
- import echartLine1 from './echartLine1.vue';
|
|
|
- import PredictionCurve from './predictionCurve.vue';
|
|
|
- import { topList, contentList } from '../common.data';
|
|
|
- import BaseTab from '../../../gas/components/tab/baseTab.vue';
|
|
|
- import { monitorData } from '../../nitrogen/nitrogen.data';
|
|
|
-
|
|
|
- let props = defineProps({
|
|
|
- listData: Object,
|
|
|
+import { ref, reactive, watch, defineProps } from 'vue';
|
|
|
+import imgUrl from '/@/assets/images/fire/pie.png';
|
|
|
+import echartLine from './echartLine.vue';
|
|
|
+import echartLine1 from './echartLine1.vue';
|
|
|
+import PredictionCurve from './predictionCurve.vue';
|
|
|
+import { topList, contentList } from '../common.data';
|
|
|
+import BaseTab from '../../../gas/components/tab/baseTab.vue';
|
|
|
+
|
|
|
+let props = defineProps({
|
|
|
+ listData: Object,
|
|
|
+});
|
|
|
+const shownChart = ref('default');
|
|
|
+let selectSj = ref<any[]>([]);
|
|
|
+let selectData = ref('');
|
|
|
+let selectList = reactive<any[]>([]);
|
|
|
+let maxY1 = ref<any>(0);
|
|
|
+let maxY = ref(100);
|
|
|
+let echartDw = ref('(°C)');
|
|
|
+//光钎测温-图表数据
|
|
|
+let echartDataGq = reactive<any>({
|
|
|
+ curData: {
|
|
|
+ lengedData: '实时温度',
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ maxData: {
|
|
|
+ lengedData: '最大温度',
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ minData: {
|
|
|
+ lengedData: '最小温度',
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ avgData: {
|
|
|
+ lengedData: '平均温度',
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ xData: [],
|
|
|
+});
|
|
|
+//束管监测-图表数据
|
|
|
+let echartDataSg = reactive({
|
|
|
+ xData: [],
|
|
|
+ lengedDataName: '(%)',
|
|
|
+ yData: [],
|
|
|
+ lengedData: 'O₂',
|
|
|
+});
|
|
|
+let echartDataSgList = reactive<any[]>([]);
|
|
|
+
|
|
|
+function getmaxY() {
|
|
|
+ maxY1.value = echartDataSg.yData.reduce((acr, cur) => {
|
|
|
+ return acr > cur ? acr : cur;
|
|
|
});
|
|
|
- const shownChart = ref('default');
|
|
|
- let selectSj = ref<any[]>([]);
|
|
|
- let selectData = ref('');
|
|
|
- let selectList = reactive<any[]>([]);
|
|
|
- let maxY1 = ref<any>(0);
|
|
|
- let maxY = ref(100);
|
|
|
- let echartDw = ref('(°C)');
|
|
|
- //光钎测温-图表数据
|
|
|
- let echartDataGq = reactive<any>({
|
|
|
- curData: {
|
|
|
- lengedData: '实时温度',
|
|
|
- data: [],
|
|
|
- },
|
|
|
- maxData: {
|
|
|
- lengedData: '最大温度',
|
|
|
- data: [],
|
|
|
- },
|
|
|
- minData: {
|
|
|
- lengedData: '最小温度',
|
|
|
- data: [],
|
|
|
- },
|
|
|
- avgData: {
|
|
|
- lengedData: '平均温度',
|
|
|
- data: [],
|
|
|
- },
|
|
|
- xData: [],
|
|
|
- });
|
|
|
- //束管监测-图表数据
|
|
|
- let echartDataSg = reactive({
|
|
|
- xData: [],
|
|
|
- lengedDataName: '(%)',
|
|
|
- // curData: {
|
|
|
- // lengedData: '实时温度',
|
|
|
- // data: [],
|
|
|
- // },
|
|
|
- // maxData: {
|
|
|
- // lengedData: '最大温度',
|
|
|
- // data: [],
|
|
|
- // },
|
|
|
- // minData: {
|
|
|
- // lengedData: '最小温度',
|
|
|
- // data: [],
|
|
|
- // },
|
|
|
- // avgData: {
|
|
|
- // lengedData: '平均温度',
|
|
|
- // data: [],
|
|
|
- // },
|
|
|
- yData: [],
|
|
|
- lengedData: 'O₂',
|
|
|
- });
|
|
|
- let echartDataSgList = reactive<any[]>([]);
|
|
|
+ maxY1.value =
|
|
|
+ maxY1.value.toString().indexOf('.') == -1 ? maxY1.value.toString() : maxY1.value.toString().substring(0, maxY1.value.toString().indexOf('.'));
|
|
|
+ if (maxY1.value.length < 2 && Number(maxY1.value) < 1) {
|
|
|
+ maxY1.value = 1;
|
|
|
+ } else if (maxY1.value.length < 2 && Number(maxY1.value) >= 1) {
|
|
|
+ maxY1.value = 10;
|
|
|
+ } else if (maxY1.value.length < 3) {
|
|
|
+ maxY1.value = (Number(maxY1.value[0]) + 1) * 10;
|
|
|
+ } else if (maxY1.value.length < 4) {
|
|
|
+ maxY1.value = (Number(maxY1.value[0]) + 1) * 100;
|
|
|
+ } else if (maxY1.value.length < 5) {
|
|
|
+ maxY1.value = (Number(maxY1.value[0]) + 1) * 1000;
|
|
|
+ } else if (maxY1.value.length < 6) {
|
|
|
+ maxY1.value = (Number(maxY1.value[0]) + 1) * 10000;
|
|
|
+ }
|
|
|
+}
|
|
|
+//束管实时数据选项点击
|
|
|
+function getSgClick(items) {
|
|
|
+ echartDataSg.xData.length = 0;
|
|
|
+ echartDataSg.yData.length = 0;
|
|
|
+ echartDataSg.lengedData = items.title;
|
|
|
+ echartDataSg.lengedDataName = items.dw;
|
|
|
+
|
|
|
+ const data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
|
|
|
+ switch (items.title) {
|
|
|
+ case 'O₂':
|
|
|
+ echartDataSgList.forEach((el) => {
|
|
|
+ echartDataSg.xData.push(el.time);
|
|
|
+ echartDataSg.yData.push(el.o2val);
|
|
|
+ });
|
|
|
|
|
|
- function getmaxY() {
|
|
|
- maxY1.value = echartDataSg.yData.reduce((acr, cur) => {
|
|
|
- return acr > cur ? acr : cur;
|
|
|
- });
|
|
|
- maxY1.value =
|
|
|
- maxY1.value.toString().indexOf('.') == -1 ? maxY1.value.toString() : maxY1.value.toString().substring(0, maxY1.value.toString().indexOf('.'));
|
|
|
- if (maxY1.value.length < 2 && Number(maxY1.value) < 1) {
|
|
|
- maxY1.value = 1;
|
|
|
- } else if (maxY1.value.length < 2 && Number(maxY1.value) >= 1) {
|
|
|
- maxY1.value = 10;
|
|
|
- } else if (maxY1.value.length < 3) {
|
|
|
- maxY1.value = (Number(maxY1.value[0]) + 1) * 10;
|
|
|
- } else if (maxY1.value.length < 4) {
|
|
|
- maxY1.value = (Number(maxY1.value[0]) + 1) * 100;
|
|
|
- } else if (maxY1.value.length < 5) {
|
|
|
- maxY1.value = (Number(maxY1.value[0]) + 1) * 1000;
|
|
|
- } else if (maxY1.value.length < 6) {
|
|
|
- maxY1.value = (Number(maxY1.value[0]) + 1) * 10000;
|
|
|
- }
|
|
|
+ curveConfig.value = {
|
|
|
+ id: 'o2',
|
|
|
+ label: 'O₂',
|
|
|
+ time: echartDataSg.xData,
|
|
|
+ data: [
|
|
|
+ // 氧气预测曲线
|
|
|
+ data.avgParam?.avg_o2_value || 0,
|
|
|
+ data.avgParam?.max_o2_value || 0,
|
|
|
+ data.avgParam?.min_o2_value || 0,
|
|
|
+ // data.readData?.o2val,
|
|
|
+ ],
|
|
|
+ monitorData: echartDataSg.yData,
|
|
|
+ };
|
|
|
+ getmaxY();
|
|
|
+ break;
|
|
|
+ case 'C₂H₄':
|
|
|
+ echartDataSgList.forEach((el) => {
|
|
|
+ echartDataSg.xData.push(el.time);
|
|
|
+ echartDataSg.yData.push(el.ch2val);
|
|
|
+ });
|
|
|
+ curveConfig.value = {
|
|
|
+ id: 'ch2',
|
|
|
+ label: 'C₂H₄',
|
|
|
+ time: echartDataSg.xData,
|
|
|
+ data: [
|
|
|
+ // 预测曲线
|
|
|
+ data.avgParam?.avg_c2h4_value || 0,
|
|
|
+ data.avgParam?.max_c2h4_value || 0,
|
|
|
+ data.avgParam?.min_c2h4_value || 0,
|
|
|
+ // data.readData?.ch2val,
|
|
|
+ ],
|
|
|
+ monitorData: echartDataSg.yData,
|
|
|
+ };
|
|
|
+ getmaxY();
|
|
|
+ break;
|
|
|
+ case 'CO':
|
|
|
+ echartDataSgList.forEach((el) => {
|
|
|
+ echartDataSg.xData.push(el.time);
|
|
|
+ echartDataSg.yData.push(el.coval);
|
|
|
+ });
|
|
|
+ curveConfig.value = {
|
|
|
+ id: 'co',
|
|
|
+ label: 'CO',
|
|
|
+ time: echartDataSg.xData,
|
|
|
+ data: [
|
|
|
+ // 预测曲线
|
|
|
+ data.avgParam?.avg_co_value || 0,
|
|
|
+ data.avgParam?.max_co_value || 0,
|
|
|
+ data.avgParam?.min_co_value || 0,
|
|
|
+ // data.readData?.coval,
|
|
|
+ ],
|
|
|
+ monitorData: echartDataSg.yData,
|
|
|
+ };
|
|
|
+ getmaxY();
|
|
|
+ break;
|
|
|
+ case 'CH₄':
|
|
|
+ echartDataSgList.forEach((el) => {
|
|
|
+ echartDataSg.xData.push(el.time);
|
|
|
+ echartDataSg.yData.push(el.gasval);
|
|
|
+ });
|
|
|
+ curveConfig.value = {
|
|
|
+ id: 'ch4',
|
|
|
+ label: 'CH₄',
|
|
|
+ time: echartDataSg.xData,
|
|
|
+ data: [
|
|
|
+ // 预测曲线
|
|
|
+ data.avgParam?.avg_ch4_value || 0,
|
|
|
+ data.avgParam?.max_ch4_value || 0,
|
|
|
+ data.avgParam?.min_ch4_value || 0,
|
|
|
+ // data.readData?.chval,
|
|
|
+ ],
|
|
|
+ monitorData: echartDataSg.yData,
|
|
|
+ };
|
|
|
+ getmaxY();
|
|
|
+ break;
|
|
|
+ case 'CO₂':
|
|
|
+ echartDataSgList.forEach((el) => {
|
|
|
+ echartDataSg.xData.push(el.time);
|
|
|
+ echartDataSg.yData.push(el.co2val);
|
|
|
+ });
|
|
|
+ curveConfig.value = {
|
|
|
+ id: 'co2',
|
|
|
+ label: 'CO₂',
|
|
|
+ time: echartDataSg.xData,
|
|
|
+ data: [
|
|
|
+ // 预测曲线
|
|
|
+ data.avgParam?.avg_co2_value || 0,
|
|
|
+ data.avgParam?.max_co2_value || 0,
|
|
|
+ data.avgParam?.min_co2_value || 0,
|
|
|
+ // data.readData?.co2val,
|
|
|
+ ],
|
|
|
+ monitorData: echartDataSg.yData,
|
|
|
+ };
|
|
|
+ getmaxY();
|
|
|
+ break;
|
|
|
+ case 'C₂H₂':
|
|
|
+ echartDataSgList.forEach((el) => {
|
|
|
+ echartDataSg.xData.push(el.time);
|
|
|
+ echartDataSg.yData.push(el.chval);
|
|
|
+ });
|
|
|
+ curveConfig.value = {
|
|
|
+ id: 'gas',
|
|
|
+ label: 'C₂H₂',
|
|
|
+ time: echartDataSg.xData,
|
|
|
+ data: [
|
|
|
+ // 预测曲线
|
|
|
+ data.avgParam?.avg_c2h2_value || 0,
|
|
|
+ data.avgParam?.max_c2h2_value || 0,
|
|
|
+ data.avgParam?.min_c2h2_value || 0,
|
|
|
+ // data.readData?.gasval,
|
|
|
+ ],
|
|
|
+ monitorData: echartDataSg.yData,
|
|
|
+ };
|
|
|
+ getmaxY();
|
|
|
+ break;
|
|
|
}
|
|
|
- //束管实时数据选项点击
|
|
|
- function getSgClick(items) {
|
|
|
+}
|
|
|
+function changeSelect(val) {
|
|
|
+ selectData.value = val;
|
|
|
+ let data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
|
|
|
+ contentList[0].list[0].value = data.readData.o2val;
|
|
|
+ contentList[0].list[1].value = data.readData.ch2val;
|
|
|
+ contentList[1].list[0].value = data.readData.coval;
|
|
|
+ contentList[1].list[1].value = data.readData.gasval;
|
|
|
+ contentList[2].list[0].value = data.readData.co2val;
|
|
|
+ contentList[2].list[1].value = data.readData.chval;
|
|
|
+ contentList.forEach((el) => {
|
|
|
+ el.list.forEach((v) => {
|
|
|
+ v.time = data.readTime.substring(0, data.readTime.lastIndexOf(':'));
|
|
|
+ });
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+/** 预测曲线的配置，数据分别为平均、最大、最小、当前值 */
|
|
|
+const curveConfig = ref<any>({ id: '0', label: '', time: new Date(), data: [0, 0, 0, 0] });
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => props.listData,
|
|
|
+ (val: any, val1) => {
|
|
|
+ echartDataGq.xData.length = 0;
|
|
|
+ echartDataGq.curData.data.length = 0;
|
|
|
+ echartDataGq.maxData.data.length = 0;
|
|
|
+ echartDataGq.minData.data.length = 0;
|
|
|
+ echartDataGq.avgData.data.length = 0;
|
|
|
+ echartDataSgList.length = 0;
|
|
|
echartDataSg.xData.length = 0;
|
|
|
echartDataSg.yData.length = 0;
|
|
|
- echartDataSg.lengedData = items.title;
|
|
|
- echartDataSg.lengedDataName = items.dw;
|
|
|
-
|
|
|
- const data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
|
|
|
- switch (items.title) {
|
|
|
- case 'O₂':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg.xData.push(el.time);
|
|
|
- echartDataSg.yData.push(el.o2val);
|
|
|
- });
|
|
|
-
|
|
|
- curveConfig.value = {
|
|
|
- id: 'o2',
|
|
|
- label: 'O₂',
|
|
|
- time: echartDataSg.xData,
|
|
|
- data: [
|
|
|
- // 氧气预测曲线
|
|
|
- data.avgParam?.avg_o2_value || 0,
|
|
|
- data.avgParam?.max_o2_value || 0,
|
|
|
- data.avgParam?.min_o2_value || 0,
|
|
|
- // data.readData?.o2val,
|
|
|
- ],
|
|
|
- monitorData: echartDataSg.yData,
|
|
|
- };
|
|
|
- getmaxY();
|
|
|
- break;
|
|
|
- case 'C₂H₄':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg.xData.push(el.time);
|
|
|
- echartDataSg.yData.push(el.ch2val);
|
|
|
- });
|
|
|
- curveConfig.value = {
|
|
|
- id: 'ch2',
|
|
|
- label: 'C₂H₄',
|
|
|
- time: echartDataSg.xData,
|
|
|
- data: [
|
|
|
- // 预测曲线
|
|
|
- data.avgParam?.avg_c2h4_value || 0,
|
|
|
- data.avgParam?.max_c2h4_value || 0,
|
|
|
- data.avgParam?.min_c2h4_value || 0,
|
|
|
- // data.readData?.ch2val,
|
|
|
- ],
|
|
|
- monitorData: echartDataSg.yData,
|
|
|
- };
|
|
|
- getmaxY();
|
|
|
- break;
|
|
|
- case 'CO':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg.xData.push(el.time);
|
|
|
- echartDataSg.yData.push(el.coval);
|
|
|
- });
|
|
|
- curveConfig.value = {
|
|
|
- id: 'co',
|
|
|
- label: 'CO',
|
|
|
- time: echartDataSg.xData,
|
|
|
- data: [
|
|
|
- // 预测曲线
|
|
|
- data.avgParam?.avg_co_value || 0,
|
|
|
- data.avgParam?.max_co_value || 0,
|
|
|
- data.avgParam?.min_co_value || 0,
|
|
|
- // data.readData?.coval,
|
|
|
- ],
|
|
|
- monitorData: echartDataSg.yData,
|
|
|
- };
|
|
|
- getmaxY();
|
|
|
- break;
|
|
|
- case 'CH₄':
|
|
|
- debugger;
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg.xData.push(el.time);
|
|
|
- echartDataSg.yData.push(el.gasval);
|
|
|
- });
|
|
|
- curveConfig.value = {
|
|
|
- id: 'ch4',
|
|
|
- label: 'CH₄',
|
|
|
- time: echartDataSg.xData,
|
|
|
- data: [
|
|
|
- // 预测曲线
|
|
|
- data.avgParam?.avg_ch4_value || 0,
|
|
|
- data.avgParam?.max_ch4_value || 0,
|
|
|
- data.avgParam?.min_ch4_value || 0,
|
|
|
- // data.readData?.chval,
|
|
|
- ],
|
|
|
- monitorData: echartDataSg.yData,
|
|
|
- };
|
|
|
- getmaxY();
|
|
|
- break;
|
|
|
- case 'CO₂':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg.xData.push(el.time);
|
|
|
- echartDataSg.yData.push(el.co2val);
|
|
|
- });
|
|
|
- curveConfig.value = {
|
|
|
- id: 'co2',
|
|
|
- label: 'CO₂',
|
|
|
- time: echartDataSg.xData,
|
|
|
- data: [
|
|
|
- // 预测曲线
|
|
|
- data.avgParam?.avg_co2_value || 0,
|
|
|
- data.avgParam?.max_co2_value || 0,
|
|
|
- data.avgParam?.min_co2_value || 0,
|
|
|
- // data.readData?.co2val,
|
|
|
- ],
|
|
|
- monitorData: echartDataSg.yData,
|
|
|
- };
|
|
|
- getmaxY();
|
|
|
- break;
|
|
|
- case 'C₂H₂':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg.xData.push(el.time);
|
|
|
- echartDataSg.yData.push(el.chval);
|
|
|
- });
|
|
|
- curveConfig.value = {
|
|
|
- id: 'gas',
|
|
|
- label: 'C₂H₂',
|
|
|
- time: echartDataSg.xData,
|
|
|
- data: [
|
|
|
- // 预测曲线
|
|
|
- data.avgParam?.avg_c2h2_value || 0,
|
|
|
- data.avgParam?.max_c2h2_value || 0,
|
|
|
- data.avgParam?.min_c2h2_value || 0,
|
|
|
- // data.readData?.gasval,
|
|
|
- ],
|
|
|
- monitorData: echartDataSg.yData,
|
|
|
- };
|
|
|
- getmaxY();
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- function changeSelect(val) {
|
|
|
- selectData.value = val;
|
|
|
- let data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
|
|
|
- contentList[0].list[0].value = data.readData.o2val;
|
|
|
- contentList[0].list[1].value = data.readData.ch2val;
|
|
|
- contentList[1].list[0].value = data.readData.coval;
|
|
|
- contentList[1].list[1].value = data.readData.gasval;
|
|
|
- contentList[2].list[0].value = data.readData.co2val;
|
|
|
- contentList[2].list[1].value = data.readData.chval;
|
|
|
- contentList.forEach((el) => {
|
|
|
- el.list.forEach((v) => {
|
|
|
- v.time = data.readTime.substring(0, data.readTime.lastIndexOf(':'));
|
|
|
+ selectList.length = 0;
|
|
|
+ if (JSON.stringify(val) === '{}') return;
|
|
|
+
|
|
|
+ if (val.fiber.length != 0) {
|
|
|
+ const fiber: any = val.fiber[0];
|
|
|
+ topList[0].value = fiber.readData.fmax;
|
|
|
+ topList[1].value = fiber.readData.fmin;
|
|
|
+ topList[2].value = fiber.readData.favg;
|
|
|
+ topList[3].text = fiber.warnFlag ? '报警' : '正常';
|
|
|
+ const arr: any[] = JSON.parse(fiber.readData.fibreTemperature);
|
|
|
+ arr.forEach((el) => {
|
|
|
+ echartDataGq.xData.push(el.pos);
|
|
|
+ echartDataGq.curData.data.push(el.value);
|
|
|
+ echartDataGq.maxData.data.push(fiber.avgParam?.max_temperature_value || 0);
|
|
|
+ echartDataGq.minData.data.push(fiber.avgParam?.min_temperature_value || 0);
|
|
|
+ echartDataGq.avgData.data.push(fiber.avgParam?.avg_temperature_value || 0);
|
|
|
});
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- /** 预测曲线的配置，数据分别为平均、最大、最小、当前值 */
|
|
|
- const curveConfig = ref<any>({ id: '0', label: '', time: new Date(), data: [0, 0, 0, 0] });
|
|
|
-
|
|
|
- watch(
|
|
|
- () => props.listData,
|
|
|
- (val: any, val1) => {
|
|
|
- echartDataGq.xData.length = 0;
|
|
|
- echartDataGq.curData.data.length = 0;
|
|
|
- echartDataGq.maxData.data.length = 0;
|
|
|
- echartDataGq.minData.data.length = 0;
|
|
|
- echartDataGq.avgData.data.length = 0;
|
|
|
- echartDataSgList.length = 0;
|
|
|
- echartDataSg.xData.length = 0;
|
|
|
- echartDataSg.yData.length = 0;
|
|
|
- selectList.length = 0;
|
|
|
- if (JSON.stringify(val) === '{}') return;
|
|
|
-
|
|
|
- if (val.fiber.length != 0) {
|
|
|
- const fiber: any = val.fiber[0];
|
|
|
- topList[0].value = fiber.readData.fmax;
|
|
|
- topList[1].value = fiber.readData.fmin;
|
|
|
- topList[2].value = fiber.readData.favg;
|
|
|
- topList[3].text = fiber.warnFlag ? '报警' : '正常';
|
|
|
- const arr: any[] = JSON.parse(fiber.readData.fibreTemperature);
|
|
|
- arr.forEach((el) => {
|
|
|
- echartDataGq.xData.push(el.pos);
|
|
|
- echartDataGq.curData.data.push(el.value);
|
|
|
- echartDataGq.maxData.data.push(fiber.avgParam?.max_temperature_value || 0);
|
|
|
- echartDataGq.minData.data.push(fiber.avgParam?.min_temperature_value || 0);
|
|
|
- echartDataGq.avgData.data.push(fiber.avgParam?.avg_temperature_value || 0);
|
|
|
- });
|
|
|
- } else {
|
|
|
- topList[0].value = '--';
|
|
|
- topList[1].value = '--';
|
|
|
- topList[2].value = '--';
|
|
|
- topList[3].text = '正常';
|
|
|
- }
|
|
|
+ } else {
|
|
|
+ topList[0].value = '--';
|
|
|
+ topList[1].value = '--';
|
|
|
+ topList[2].value = '--';
|
|
|
+ topList[3].text = '正常';
|
|
|
+ }
|
|
|
|
|
|
- if (val.bundletube.length != 0) {
|
|
|
- selectSj.value = val.bundletube;
|
|
|
- selectSj.value.forEach((el) => {
|
|
|
- selectList.push({ label: el.strinstallpos, value: el.strinstallpos });
|
|
|
- });
|
|
|
- selectData.value = selectData.value ? selectData.value : selectList[0].value;
|
|
|
- let dataVal = selectData.value ? selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0] : selectSj.value[0];
|
|
|
- contentList[0].list[0].value = dataVal.readData.o2val;
|
|
|
- contentList[0].list[1].value = dataVal.readData.ch2val;
|
|
|
- contentList[1].list[0].value = dataVal.readData.coval;
|
|
|
- contentList[1].list[1].value = dataVal.readData.gasval;
|
|
|
- contentList[2].list[0].value = dataVal.readData.co2val;
|
|
|
- contentList[2].list[1].value = dataVal.readData.chval;
|
|
|
- contentList.forEach((el) => {
|
|
|
- el.list.forEach((v) => {
|
|
|
- v.time = dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':'));
|
|
|
- });
|
|
|
+ if (val.bundletube.length != 0) {
|
|
|
+ selectSj.value = val.bundletube;
|
|
|
+ selectSj.value.forEach((el) => {
|
|
|
+ selectList.push({ label: el.strinstallpos, value: el.strinstallpos });
|
|
|
+ });
|
|
|
+ selectData.value = selectData.value ? selectData.value : selectList[0].value;
|
|
|
+ let dataVal = selectData.value ? selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0] : selectSj.value[0];
|
|
|
+ contentList[0].list[0].value = dataVal.readData.o2val;
|
|
|
+ contentList[0].list[1].value = dataVal.readData.ch2val;
|
|
|
+ contentList[1].list[0].value = dataVal.readData.coval;
|
|
|
+ contentList[1].list[1].value = dataVal.readData.gasval;
|
|
|
+ contentList[2].list[0].value = dataVal.readData.co2val;
|
|
|
+ contentList[2].list[1].value = dataVal.readData.chval;
|
|
|
+ contentList.forEach((el) => {
|
|
|
+ el.list.forEach((v) => {
|
|
|
+ v.time = dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':'));
|
|
|
});
|
|
|
+ });
|
|
|
|
|
|
- echartDataSgList = dataVal.history;
|
|
|
- getSgClick({
|
|
|
- title: echartDataSg.lengedData,
|
|
|
- dw: echartDataSg.lengedDataName,
|
|
|
- });
|
|
|
- getmaxY();
|
|
|
- } else {
|
|
|
- contentList[0].list[0].value = '--';
|
|
|
- contentList[0].list[1].value = '--';
|
|
|
- contentList[1].list[0].value = '--';
|
|
|
- contentList[1].list[1].value = '--';
|
|
|
- contentList[2].list[0].value = '--';
|
|
|
- contentList[2].list[1].value = '--';
|
|
|
- contentList.forEach((el) => {
|
|
|
- el.list.forEach((v) => {
|
|
|
- v.time = '--';
|
|
|
- });
|
|
|
+ echartDataSgList = dataVal.history;
|
|
|
+ getSgClick({
|
|
|
+ title: echartDataSg.lengedData,
|
|
|
+ dw: echartDataSg.lengedDataName,
|
|
|
+ });
|
|
|
+ getmaxY();
|
|
|
+ } else {
|
|
|
+ contentList[0].list[0].value = '--';
|
|
|
+ contentList[0].list[1].value = '--';
|
|
|
+ contentList[1].list[0].value = '--';
|
|
|
+ contentList[1].list[1].value = '--';
|
|
|
+ contentList[2].list[0].value = '--';
|
|
|
+ contentList[2].list[1].value = '--';
|
|
|
+ contentList.forEach((el) => {
|
|
|
+ el.list.forEach((v) => {
|
|
|
+ v.time = '--';
|
|
|
});
|
|
|
- }
|
|
|
- },
|
|
|
- { deep: true }
|
|
|
- );
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { deep: true }
|
|
|
+);
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- @import '/@/design/theme.less';
|
|
|
-
|
|
|
- @{theme-deepblue} {
|
|
|
- .fireWork {
|
|
|
- --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
|
|
|
- --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
|
|
|
- --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
|
|
|
- --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
|
|
|
- --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
|
|
|
- --image-14174: url('/@/assets/images/themify/deepblue/fire/14174.png');
|
|
|
- --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
|
|
|
- }
|
|
|
- }
|
|
|
+@import '/@/design/theme.less';
|
|
|
|
|
|
+@{theme-deepblue} {
|
|
|
.fireWork {
|
|
|
- --image-bj1: url('/@/assets/images/fire/bj1.png');
|
|
|
- --image-max: url('/@/assets/images/fire/max.svg');
|
|
|
- --image-min: url('/@/assets/images/fire/min.svg');
|
|
|
- --image-pj: url('/@/assets/images/fire/pj.svg');
|
|
|
- --image-bj1: url('/@/assets/images/fire/bj1.png');
|
|
|
- --image-14174: url('/@/assets/images/fire/14174.png');
|
|
|
- --image-contetn: url('/@/assets/images/fire/contetn.png');
|
|
|
- --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
|
|
|
+ --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
|
|
|
+ --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
|
|
|
+ --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
|
|
|
+ --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
|
|
|
+ --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
|
|
|
+ --image-14174: url('/@/assets/images/themify/deepblue/fire/14174.png');
|
|
|
+ --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.fireWork {
|
|
|
+ --image-bj1: url('/@/assets/images/fire/bj1.png');
|
|
|
+ --image-max: url('/@/assets/images/fire/max.svg');
|
|
|
+ --image-min: url('/@/assets/images/fire/min.svg');
|
|
|
+ --image-pj: url('/@/assets/images/fire/pj.svg');
|
|
|
+ --image-bj1: url('/@/assets/images/fire/bj1.png');
|
|
|
+ --image-14174: url('/@/assets/images/fire/14174.png');
|
|
|
+ --image-contetn: url('/@/assets/images/fire/contetn.png');
|
|
|
+ --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .work-nav {
|
|
|
+ height: 15%;
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .work-nav {
|
|
|
- height: 15%;
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 20px;
|
|
|
- background: var(--image-bj1) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ background: var(--image-bj1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .nav {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
|
|
|
- .nav {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- &:nth-child(1) {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: var(--border-image-2) 1 1 1;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(2) {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: var(--border-image-2) 1 1 1;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(3) {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: var(--border-image-2) 1 1 1;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(4) {
|
|
|
- flex: 0.6;
|
|
|
- color: #b3b8cc;
|
|
|
- font-size: 16px;
|
|
|
- height: 100%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: var(--border-image-2) 1 1 1;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(5) {
|
|
|
- flex: 1.4;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .percent {
|
|
|
- width: 100%;
|
|
|
- height: 82%;
|
|
|
- padding: 0px 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 14px;
|
|
|
- padding: 5px 0px;
|
|
|
- color: #b3b8cc;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ &:nth-child(1) {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: var(--border-image-2) 1 1 1;
|
|
|
+ }
|
|
|
|
|
|
- .value {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ &:nth-child(2) {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: var(--border-image-2) 1 1 1;
|
|
|
+ }
|
|
|
|
|
|
- span {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ &:nth-child(3) {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: var(--border-image-2) 1 1 1;
|
|
|
+ }
|
|
|
|
|
|
- .pic {
|
|
|
- width: 30%;
|
|
|
- height: 82%;
|
|
|
+ &:nth-child(4) {
|
|
|
+ flex: 0.6;
|
|
|
+ color: #b3b8cc;
|
|
|
+ font-size: 16px;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: var(--border-image-2) 1 1 1;
|
|
|
+ }
|
|
|
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
+ &:nth-child(5) {
|
|
|
+ flex: 1.4;
|
|
|
+ height: 100%;
|
|
|
|
|
|
- .content {
|
|
|
+ .percent {
|
|
|
+ width: 100%;
|
|
|
height: 82%;
|
|
|
- margin-left: 15px;
|
|
|
- color: #fff;
|
|
|
+ padding: 0px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-around;
|
|
|
|
|
|
- span {
|
|
|
+ .title {
|
|
|
font-size: 14px;
|
|
|
+ padding: 5px 0px;
|
|
|
+ color: #b3b8cc;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(1) {
|
|
|
- padding: 5px 0px;
|
|
|
- color: #b3b8cc;
|
|
|
- }
|
|
|
+ .value {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- &:nth-child(2) {
|
|
|
+ span {
|
|
|
font-family: 'douyuFont';
|
|
|
- font-size: 16px;
|
|
|
- color: var(--vent-table-action-link);
|
|
|
+ font-size: 18px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .nav:nth-child(1) .pic {
|
|
|
- background: var(--image-max) no-repeat center;
|
|
|
- background-size: 50% 50%;
|
|
|
- }
|
|
|
-
|
|
|
- .nav:nth-child(2) .pic {
|
|
|
- background: var(--image-min) no-repeat center;
|
|
|
- background-size: 50% 50%;
|
|
|
- }
|
|
|
+ .pic {
|
|
|
+ width: 30%;
|
|
|
+ height: 82%;
|
|
|
|
|
|
- .nav:nth-child(3) .pic {
|
|
|
- background: var(--image-pj) no-repeat center;
|
|
|
- background-size: 50% 50%;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .center-echart {
|
|
|
- width: 100%;
|
|
|
- height: 32%;
|
|
|
- padding: 10px;
|
|
|
- margin-bottom: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- background: var(--image-bj1) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
-
|
|
|
- .nav-title {
|
|
|
- height: 30px;
|
|
|
+ .content {
|
|
|
+ height: 82%;
|
|
|
+ margin-left: 15px;
|
|
|
+ color: #fff;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
|
|
|
- .title {
|
|
|
- font-family: 'douyuFont';
|
|
|
+ span {
|
|
|
font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- // color: var(--vent-table-action-link);
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ padding: 5px 0px;
|
|
|
+ color: #b3b8cc;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 16px;
|
|
|
+ color: var(--vent-table-action-link);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .echart-box {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 30px);
|
|
|
+ .nav:nth-child(1) .pic {
|
|
|
+ background: var(--image-max) no-repeat center;
|
|
|
+ background-size: 50% 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav:nth-child(2) .pic {
|
|
|
+ background: var(--image-min) no-repeat center;
|
|
|
+ background-size: 50% 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav:nth-child(3) .pic {
|
|
|
+ background: var(--image-pj) no-repeat center;
|
|
|
+ background-size: 50% 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-echart {
|
|
|
+ width: 100%;
|
|
|
+ height: 32%;
|
|
|
+ padding: 10px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: var(--image-bj1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .nav-title {
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ // color: var(--vent-table-action-link);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .bot-content {
|
|
|
- position: relative;
|
|
|
+ .echart-box {
|
|
|
width: 100%;
|
|
|
- height: calc(53% - 40px);
|
|
|
- padding: 10px 10px 0px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- background: var(--image-bj1) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+ height: calc(100% - 30px);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .title {
|
|
|
- height: 35px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 10px;
|
|
|
+ .bot-content {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(53% - 40px);
|
|
|
+ padding: 10px 10px 0px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: var(--image-bj1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
|
- .text {
|
|
|
- // height: 30px;
|
|
|
- // line-height: 30px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ .title {
|
|
|
+ height: 35px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ // height: 30px;
|
|
|
+ // line-height: 30px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .content {
|
|
|
- height: calc(100% - 45px);
|
|
|
+ .content {
|
|
|
+ height: calc(100% - 45px);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .content-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 29%;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
+ margin-top: 0px !important;
|
|
|
|
|
|
- .content-box {
|
|
|
- width: 100%;
|
|
|
- height: 29%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 0px !important;
|
|
|
-
|
|
|
- .box-item {
|
|
|
- position: relative;
|
|
|
- width: 16%;
|
|
|
- height: 100%;
|
|
|
- background: var(--image-14174) no-repeat center;
|
|
|
+ .box-item {
|
|
|
+ position: relative;
|
|
|
+ width: 16%;
|
|
|
+ height: 100%;
|
|
|
+ background: var(--image-14174) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .content-title {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 0;
|
|
|
+ transform: translate(-50%);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-item {
|
|
|
+ position: absolute;
|
|
|
+ width: 93%;
|
|
|
+ height: 27%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: var(--image-contetn) no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
- cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
- .content-title {
|
|
|
- position: absolute;
|
|
|
+ &:nth-child(2) {
|
|
|
left: 50%;
|
|
|
- top: 0;
|
|
|
+ top: 28%;
|
|
|
transform: translate(-50%);
|
|
|
- color: #fff;
|
|
|
- font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
- .content-item {
|
|
|
- position: absolute;
|
|
|
- width: 93%;
|
|
|
- height: 27%;
|
|
|
+ &:nth-child(3) {
|
|
|
+ left: 50%;
|
|
|
+ top: 62%;
|
|
|
+ transform: translate(-50%);
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 0px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- background: var(--image-contetn) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- color: #fff;
|
|
|
- font-size: 14px;
|
|
|
-
|
|
|
- &:nth-child(2) {
|
|
|
- left: 50%;
|
|
|
- top: 28%;
|
|
|
- transform: translate(-50%);
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(3) {
|
|
|
- left: 50%;
|
|
|
- top: 62%;
|
|
|
- transform: translate(-50%);
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
-
|
|
|
- .bolds {
|
|
|
- font-family: 'douyuFont';
|
|
|
- color: var(--vent-table-action-link);
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bolds {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: var(--vent-table-action-link);
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .echart-box {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50px;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- width: 66%;
|
|
|
- height: calc(100% - 50px);
|
|
|
- }
|
|
|
+ .echart-box {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ width: 66%;
|
|
|
+ height: calc(100% - 50px);
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
|
|
|
- border: 1px solid #3ad8ff77 !important;
|
|
|
- background-color: #ffffff00 !important;
|
|
|
- }
|
|
|
+:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
|
|
|
+ border: 1px solid #3ad8ff77 !important;
|
|
|
+ background-color: #ffffff00 !important;
|
|
|
+}
|
|
|
|
|
|
- :deep(.zxm-select-selection-item) {
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
+:deep(.zxm-select-selection-item) {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
|
|
|
- :deep(.zxm-select-arrow) {
|
|
|
- color: #fff;
|
|
|
+:deep(.zxm-select-arrow) {
|
|
|
+ color:#fff;
|
|
|
}
|
|
|
</style>
|
