|
|
@@ -37,8 +37,7 @@
|
|
|
<div class="text">束管系统监测</div>
|
|
|
<div class="select-box">
|
|
|
<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>
|
|
|
@@ -68,484 +67,489 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { onMounted, 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 { topList, contentList } from '../common.data';
|
|
|
-
|
|
|
-let props = defineProps({
|
|
|
- listData: Object,
|
|
|
-});
|
|
|
-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({
|
|
|
- maxData: {
|
|
|
- lengedData: '当前温度',
|
|
|
- data: [],
|
|
|
- },
|
|
|
- xData: [],
|
|
|
-});
|
|
|
-//束管监测-图表数据
|
|
|
-let echartDataSg = reactive({
|
|
|
- xData: [],
|
|
|
- yData: [],
|
|
|
- lengedData: 'O₂',
|
|
|
- lengedDataName: '(%)',
|
|
|
-});
|
|
|
-let echartDataSgList = reactive<any[]>([]);
|
|
|
-
|
|
|
-function getmaxY() {
|
|
|
- maxY1.value = echartDataSg.yData.reduce((acr, cur) => {
|
|
|
- return acr > cur ? acr : cur;
|
|
|
+ import { onMounted, 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 { topList, contentList } from '../common.data';
|
|
|
+
|
|
|
+ let props = defineProps({
|
|
|
+ listData: Object,
|
|
|
});
|
|
|
- maxY1.value = maxY1.value.toString().indexOf('.') == -1 ? maxY1.value.toString() : maxY1.value.toString().substring(0, maxY1.value.toString().indexOf('.'))
|
|
|
- if (maxY1.value.length < 2) {
|
|
|
- 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;
|
|
|
-
|
|
|
- switch (items.title) {
|
|
|
- case 'O₂':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg.xData.push(el.time);
|
|
|
- echartDataSg.yData.push(el.o2val);
|
|
|
- });
|
|
|
- getmaxY()
|
|
|
- break;
|
|
|
- case 'C₂H₄':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg.xData.push(el.time);
|
|
|
- echartDataSg.yData.push(el.ch2val);
|
|
|
- });
|
|
|
- getmaxY()
|
|
|
- break;
|
|
|
- case 'CO':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg.xData.push(el.time);
|
|
|
- echartDataSg.yData.push(el.coval);
|
|
|
- });
|
|
|
- getmaxY()
|
|
|
- break;
|
|
|
- case 'CH₄':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg.xData.push(el.time);
|
|
|
- echartDataSg.yData.push(el.chval);
|
|
|
- });
|
|
|
- getmaxY()
|
|
|
- break;
|
|
|
- case 'CO₂':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg.xData.push(el.time);
|
|
|
- echartDataSg.yData.push(el.co2val);
|
|
|
- });
|
|
|
- getmaxY()
|
|
|
- break;
|
|
|
- case 'C₂H₂':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg.xData.push(el.time);
|
|
|
- echartDataSg.yData.push(el.gasval);
|
|
|
- });
|
|
|
- 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.chval;
|
|
|
- contentList[2].list[0].value = data.readData.co2val;
|
|
|
- contentList[2].list[1].value = data.readData.gasval;
|
|
|
- contentList.forEach((el) => {
|
|
|
- el.list.forEach((v) => {
|
|
|
- v.time = data.readTime.substring(0, data.readTime.lastIndexOf(':'));
|
|
|
- });
|
|
|
+ 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({
|
|
|
+ maxData: {
|
|
|
+ lengedData: '当前温度',
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ xData: [],
|
|
|
});
|
|
|
-}
|
|
|
-
|
|
|
-watch(
|
|
|
- () => props.listData,
|
|
|
- (val, val1) => {
|
|
|
- echartDataGq.xData.length = 0;
|
|
|
- echartDataGq.maxData.data.length = 0;
|
|
|
- echartDataSgList.length = 0;
|
|
|
- echartDataSg.xData.length = 0;
|
|
|
- echartDataSg.yData.length = 0;
|
|
|
- selectList.length = 0
|
|
|
- if (JSON.stringify(val) != '{}') {
|
|
|
- if (val.fiber.length != 0) {
|
|
|
- topList[0].value = val.fiber[0].readData.fmax;
|
|
|
- topList[1].value = val.fiber[0].readData.fmin;
|
|
|
- topList[2].value = val.fiber[0].readData.favg;
|
|
|
- topList[3].text = val.fiber[0].warnFlag ? '报警' : '正常';
|
|
|
- JSON.parse(val.fiber[0].readData.fibreTemperature).forEach((el) => {
|
|
|
- echartDataGq.xData.push(el.pos);
|
|
|
- echartDataGq.maxData.data.push(el.value);
|
|
|
- });
|
|
|
+ //束管监测-图表数据
|
|
|
+ let echartDataSg = reactive({
|
|
|
+ xData: [],
|
|
|
+ yData: [],
|
|
|
+ lengedData: 'O₂',
|
|
|
+ lengedDataName: '(%)',
|
|
|
+ });
|
|
|
+ let echartDataSgList = reactive<any[]>([]);
|
|
|
+
|
|
|
+ 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) {
|
|
|
+ if (maxY1.value[0] == 0) {
|
|
|
+ maxY1.value = 1;
|
|
|
} else {
|
|
|
- topList[0].value = '--';
|
|
|
- topList[1].value = '--';
|
|
|
- topList[2].value = '--';
|
|
|
- topList[3].text = '正常';
|
|
|
+ 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;
|
|
|
|
|
|
- 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.chval;
|
|
|
- contentList[2].list[0].value = dataVal.readData.co2val;
|
|
|
- contentList[2].list[1].value = dataVal.readData.gasval;
|
|
|
- contentList.forEach((el) => {
|
|
|
- el.list.forEach((v) => {
|
|
|
- v.time = dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':'));
|
|
|
- });
|
|
|
+ switch (items.title) {
|
|
|
+ case 'O₂':
|
|
|
+ echartDataSgList.forEach((el) => {
|
|
|
+ echartDataSg.xData.push(el.time);
|
|
|
+ echartDataSg.yData.push(el.o2val);
|
|
|
});
|
|
|
-
|
|
|
- dataVal.history.forEach((el) => {
|
|
|
+ getmaxY();
|
|
|
+ break;
|
|
|
+ case 'C₂H₄':
|
|
|
+ echartDataSgList.forEach((el) => {
|
|
|
echartDataSg.xData.push(el.time);
|
|
|
- if (echartDataSg.lengedData == 'O₂') {
|
|
|
- echartDataSg.yData.push(el.o2val);
|
|
|
- } else if (echartDataSg.lengedData == 'C₂H₄') {
|
|
|
- echartDataSg.yData.push(el.ch2val);
|
|
|
- } else if (echartDataSg.lengedData == 'C₂H₂') {
|
|
|
- echartDataSg.yData.push(el.gasval);
|
|
|
- } else if (echartDataSg.lengedData == 'CH₄') {
|
|
|
- echartDataSg.yData.push(el.chval);
|
|
|
- } else if (echartDataSg.lengedData == 'CO') {
|
|
|
- echartDataSg.yData.push(el.coval);
|
|
|
- } else if (echartDataSg.lengedData == 'CO₂') {
|
|
|
- echartDataSg.yData.push(el.co2val);
|
|
|
- }
|
|
|
- echartDataSgList.push(el);
|
|
|
+ echartDataSg.yData.push(el.ch2val);
|
|
|
});
|
|
|
- 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 = '--';
|
|
|
- });
|
|
|
+ getmaxY();
|
|
|
+ break;
|
|
|
+ case 'CO':
|
|
|
+ echartDataSgList.forEach((el) => {
|
|
|
+ echartDataSg.xData.push(el.time);
|
|
|
+ echartDataSg.yData.push(el.coval);
|
|
|
});
|
|
|
- }
|
|
|
+ getmaxY();
|
|
|
+ break;
|
|
|
+ case 'CH₄':
|
|
|
+ echartDataSgList.forEach((el) => {
|
|
|
+ echartDataSg.xData.push(el.time);
|
|
|
+ echartDataSg.yData.push(el.chval);
|
|
|
+ });
|
|
|
+ getmaxY();
|
|
|
+ break;
|
|
|
+ case 'CO₂':
|
|
|
+ echartDataSgList.forEach((el) => {
|
|
|
+ echartDataSg.xData.push(el.time);
|
|
|
+ echartDataSg.yData.push(el.co2val);
|
|
|
+ });
|
|
|
+ getmaxY();
|
|
|
+ break;
|
|
|
+ case 'C₂H₂':
|
|
|
+ echartDataSgList.forEach((el) => {
|
|
|
+ echartDataSg.xData.push(el.time);
|
|
|
+ echartDataSg.yData.push(el.gasval);
|
|
|
+ });
|
|
|
+ getmaxY();
|
|
|
+ break;
|
|
|
}
|
|
|
- },
|
|
|
- { deep: true }
|
|
|
-);
|
|
|
+ }
|
|
|
+ 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.chval;
|
|
|
+ contentList[2].list[0].value = data.readData.co2val;
|
|
|
+ contentList[2].list[1].value = data.readData.gasval;
|
|
|
+ contentList.forEach((el) => {
|
|
|
+ el.list.forEach((v) => {
|
|
|
+ v.time = data.readTime.substring(0, data.readTime.lastIndexOf(':'));
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ watch(
|
|
|
+ () => props.listData,
|
|
|
+ (val, val1) => {
|
|
|
+ echartDataGq.xData.length = 0;
|
|
|
+ echartDataGq.maxData.data.length = 0;
|
|
|
+ echartDataSgList.length = 0;
|
|
|
+ echartDataSg.xData.length = 0;
|
|
|
+ echartDataSg.yData.length = 0;
|
|
|
+ selectList.length = 0;
|
|
|
+ if (JSON.stringify(val) != '{}') {
|
|
|
+ if (val.fiber.length != 0) {
|
|
|
+ topList[0].value = val.fiber[0].readData.fmax;
|
|
|
+ topList[1].value = val.fiber[0].readData.fmin;
|
|
|
+ topList[2].value = val.fiber[0].readData.favg;
|
|
|
+ topList[3].text = val.fiber[0].warnFlag ? '报警' : '正常';
|
|
|
+ JSON.parse(val.fiber[0].readData.fibreTemperature).forEach((el) => {
|
|
|
+ echartDataGq.xData.push(el.pos);
|
|
|
+ echartDataGq.maxData.data.push(el.value);
|
|
|
+ });
|
|
|
+ } 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.chval;
|
|
|
+ contentList[2].list[0].value = dataVal.readData.co2val;
|
|
|
+ contentList[2].list[1].value = dataVal.readData.gasval;
|
|
|
+ contentList.forEach((el) => {
|
|
|
+ el.list.forEach((v) => {
|
|
|
+ v.time = dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':'));
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ dataVal.history.forEach((el) => {
|
|
|
+ echartDataSg.xData.push(el.time);
|
|
|
+ if (echartDataSg.lengedData == 'O₂') {
|
|
|
+ echartDataSg.yData.push(el.o2val);
|
|
|
+ } else if (echartDataSg.lengedData == 'C₂H₄') {
|
|
|
+ echartDataSg.yData.push(el.ch2val);
|
|
|
+ } else if (echartDataSg.lengedData == 'C₂H₂') {
|
|
|
+ echartDataSg.yData.push(el.gasval);
|
|
|
+ } else if (echartDataSg.lengedData == 'CH₄') {
|
|
|
+ echartDataSg.yData.push(el.chval);
|
|
|
+ } else if (echartDataSg.lengedData == 'CO') {
|
|
|
+ echartDataSg.yData.push(el.coval);
|
|
|
+ } else if (echartDataSg.lengedData == 'CO₂') {
|
|
|
+ echartDataSg.yData.push(el.co2val);
|
|
|
+ }
|
|
|
+ echartDataSgList.push(el);
|
|
|
+ });
|
|
|
+ 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 }
|
|
|
+ );
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.fireWork {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .work-nav {
|
|
|
- height: 15%;
|
|
|
+ .fireWork {
|
|
|
width: 100%;
|
|
|
- margin-bottom: 20px;
|
|
|
- background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .nav {
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .work-nav {
|
|
|
+ height: 15%;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
- &:nth-child(1) {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(2) {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
|
|
|
- }
|
|
|
+ .nav {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- &:nth-child(3) {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
|
|
|
- }
|
|
|
+ &:nth-child(1) {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(4) {
|
|
|
- flex: 0.6;
|
|
|
- color: #b3b8cc;
|
|
|
- font-size: 16px;
|
|
|
- height: 100%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
|
|
|
- }
|
|
|
+ &:nth-child(2) {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(5) {
|
|
|
- flex: 1.4;
|
|
|
- height: 100%;
|
|
|
+ &:nth-child(3) {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
|
|
|
+ }
|
|
|
|
|
|
- .percent {
|
|
|
- width: 100%;
|
|
|
- height: 82%;
|
|
|
- padding: 0px 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
+ &:nth-child(4) {
|
|
|
+ flex: 0.6;
|
|
|
+ color: #b3b8cc;
|
|
|
+ font-size: 16px;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
|
|
|
+ }
|
|
|
|
|
|
- .title {
|
|
|
- font-size: 14px;
|
|
|
- padding: 5px 0px;
|
|
|
- color: #b3b8cc;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ &:nth-child(5) {
|
|
|
+ flex: 1.4;
|
|
|
+ height: 100%;
|
|
|
|
|
|
- .value {
|
|
|
+ .percent {
|
|
|
+ width: 100%;
|
|
|
+ height: 82%;
|
|
|
+ padding: 0px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 5px 0px;
|
|
|
+ color: #b3b8cc;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
|
|
|
- span {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 18px;
|
|
|
+ .value {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .pic {
|
|
|
- width: 30%;
|
|
|
- height: 82%;
|
|
|
+ .pic {
|
|
|
+ width: 30%;
|
|
|
+ height: 82%;
|
|
|
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .content {
|
|
|
- height: 82%;
|
|
|
- margin-left: 15px;
|
|
|
- color: #fff;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
+ .content {
|
|
|
+ height: 82%;
|
|
|
+ margin-left: 15px;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
|
|
|
- span {
|
|
|
- font-size: 14px;
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
- &:nth-child(1) {
|
|
|
- padding: 5px 0px;
|
|
|
- color: #b3b8cc;
|
|
|
- }
|
|
|
+ &:nth-child(1) {
|
|
|
+ padding: 5px 0px;
|
|
|
+ color: #b3b8cc;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(2) {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 16px;
|
|
|
- color: #3df6ff;
|
|
|
+ &:nth-child(2) {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 16px;
|
|
|
+ color: #3df6ff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .nav:nth-child(1) .pic {
|
|
|
- background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
|
|
|
- background-size: 50% 50%;
|
|
|
- }
|
|
|
+ .nav:nth-child(1) .pic {
|
|
|
+ background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
|
|
|
+ background-size: 50% 50%;
|
|
|
+ }
|
|
|
|
|
|
- .nav:nth-child(2) .pic {
|
|
|
- background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
|
|
|
- background-size: 50% 50%;
|
|
|
- }
|
|
|
+ .nav:nth-child(2) .pic {
|
|
|
+ background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
|
|
|
+ background-size: 50% 50%;
|
|
|
+ }
|
|
|
|
|
|
- .nav:nth-child(3) .pic {
|
|
|
- background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
|
|
|
- background-size: 50% 50%;
|
|
|
+ .nav:nth-child(3) .pic {
|
|
|
+ background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
|
|
|
+ background-size: 50% 50%;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .center-echart {
|
|
|
- width: 100%;
|
|
|
- height: 32%;
|
|
|
- padding: 10px;
|
|
|
- margin-bottom: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+ .center-echart {
|
|
|
+ width: 100%;
|
|
|
+ height: 32%;
|
|
|
+ padding: 10px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .nav-title {
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .nav-title {
|
|
|
- height: 30px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
+ .title {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ // color: #3df6ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .title {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- // color: #3df6ff;
|
|
|
+ .echart-box {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 30px);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .echart-box {
|
|
|
+ .bot-content {
|
|
|
+ position: relative;
|
|
|
width: 100%;
|
|
|
- height: calc(100% - 30px);
|
|
|
- }
|
|
|
- }
|
|
|
+ height: calc(53% - 40px);
|
|
|
+ padding: 10px 10px 0px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
|
- .bot-content {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: calc(53% - 40px);
|
|
|
- padding: 10px 10px 0px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+ .title {
|
|
|
+ height: 35px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
|
- .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;
|
|
|
+ .text {
|
|
|
+ // height: 30px;
|
|
|
+ // line-height: 30px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .content {
|
|
|
- height: calc(100% - 45px);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .content-box {
|
|
|
- width: 100%;
|
|
|
- height: 29%;
|
|
|
+ .content {
|
|
|
+ height: calc(100% - 45px);
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
- margin-top: 0px !important;
|
|
|
-
|
|
|
- .box-item {
|
|
|
- position: relative;
|
|
|
- width: 16%;
|
|
|
- height: 100%;
|
|
|
- background: url('../../../../../assets/images/fire/14174.png') 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: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
|
|
|
+ .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: url('../../../../../assets/images/fire/14174.png') no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
- color: #fff;
|
|
|
- font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
- &:nth-child(2) {
|
|
|
+ .content-title {
|
|
|
+ position: absolute;
|
|
|
left: 50%;
|
|
|
- top: 28%;
|
|
|
+ top: 0;
|
|
|
transform: translate(-50%);
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
|
|
|
- &:nth-child(3) {
|
|
|
- left: 50%;
|
|
|
- top: 62%;
|
|
|
- transform: translate(-50%);
|
|
|
+ .content-item {
|
|
|
+ position: absolute;
|
|
|
+ width: 93%;
|
|
|
+ height: 27%;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
-
|
|
|
- .bolds {
|
|
|
- font-family: 'douyuFont';
|
|
|
- color: #3df6ff;
|
|
|
- font-size: 12px;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: url('../../../../../assets/images/fire/contetn.png') 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: #3df6ff;
|
|
|
+ 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>
|
hongrunxia