|  | @@ -1,6 +1,7 @@
 | 
	
		
			
				|  |  |  <template>
 | 
	
		
			
				|  |  |      <div class="mainWell">
 | 
	
		
			
				|  |  | -        <div class="work-nav">
 | 
	
		
			
				|  |  | +        <!-- 光钎测温 -->
 | 
	
		
			
				|  |  | +        <div class="work-nav" v-if="listData.bundletube.length == 0">
 | 
	
		
			
				|  |  |              <div class="nav" v-for="(item, index) in topOutList" :key="index">
 | 
	
		
			
				|  |  |                  <div class="pic" v-if="item.imgSrc">
 | 
	
		
			
				|  |  |                      <img :src="imgUrl" alt="" />
 | 
	
	
		
			
				|  | @@ -12,6 +13,31 @@
 | 
	
		
			
				|  |  |                  <div class="text" v-if="item.text">{{ item.text }}</div>
 | 
	
		
			
				|  |  |              </div>
 | 
	
		
			
				|  |  |          </div>
 | 
	
		
			
				|  |  | +        <!-- 束管监测 -->
 | 
	
		
			
				|  |  | +        <div class="work-nav" v-else>
 | 
	
		
			
				|  |  | +            <div class="box">
 | 
	
		
			
				|  |  | +                <div class="contents">
 | 
	
		
			
				|  |  | +                    <img src="../../../../../assets/images/fire/pie.png" alt="" />
 | 
	
		
			
				|  |  | +                    <span class="text">{{ topContent.temperature }}</span>
 | 
	
		
			
				|  |  | +                    <span class="dw">°C</span>
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +                <div class="contents">
 | 
	
		
			
				|  |  | +                    <div class="text">
 | 
	
		
			
				|  |  | +                        <span class="label">位置 : </span>
 | 
	
		
			
				|  |  | +                        <span class="value">{{ topContent.position }}</span>
 | 
	
		
			
				|  |  | +                    </div>
 | 
	
		
			
				|  |  | +                    <div class="text">
 | 
	
		
			
				|  |  | +                        <span class="label">时间 : </span>
 | 
	
		
			
				|  |  | +                        <span class="value">{{ topContent.time }}</span>
 | 
	
		
			
				|  |  | +                    </div>
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +            <div class="box">
 | 
	
		
			
				|  |  | +                <div class="text1">{{ topContent.warn }}</div>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |          <div class="center-box">
 | 
	
		
			
				|  |  |              <div class="box" v-for="(items, index) in tabList" :key="index">
 | 
	
		
			
				|  |  |                  <div class="title">
 | 
	
	
		
			
				|  | @@ -19,7 +45,7 @@
 | 
	
		
			
				|  |  |                      <span class="details">{{ `${items.details}>>` }}</span>
 | 
	
		
			
				|  |  |                  </div>
 | 
	
		
			
				|  |  |                  <div class="content">
 | 
	
		
			
				|  |  | -                    <a-table v-if="index == 0" ref="table" size="small" :scroll="{ x:0,y: 273 }" :columns="columns"
 | 
	
		
			
				|  |  | +                    <a-table v-if="index == 0" ref="table" size="small" :scroll="{ x: 0, y: 273 }" :columns="columns"
 | 
	
		
			
				|  |  |                          :data-source="monitorlistYw" :pagination="false">
 | 
	
		
			
				|  |  |                          <span slot="action" slot-scope="text, record"></span>
 | 
	
		
			
				|  |  |                      </a-table>
 | 
	
	
		
			
				|  | @@ -34,7 +60,7 @@
 | 
	
		
			
				|  |  |                  </div>
 | 
	
		
			
				|  |  |              </div>
 | 
	
		
			
				|  |  |          </div>
 | 
	
		
			
				|  |  | -        <div class="footer-box">
 | 
	
		
			
				|  |  | +        <div class="footer-box" v-if="listData.bundletube.length == 0">
 | 
	
		
			
				|  |  |              <div class="footer-title">
 | 
	
		
			
				|  |  |                  <div class="echart-label">光钎测温系统实时温度监测</div>
 | 
	
		
			
				|  |  |                  <!-- <a-select style="width: 240px; margin-left: 10px" v-model="pointCode" allowClear class="code-mode-select"
 | 
	
	
		
			
				|  | @@ -49,6 +75,39 @@
 | 
	
		
			
				|  |  |                  <echartLine2 :echartDataWd="echartDataWd"></echartLine2>
 | 
	
		
			
				|  |  |              </div>
 | 
	
		
			
				|  |  |          </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        <!-- 束管监测 -->
 | 
	
		
			
				|  |  | +        <div class="content-s" v-else>
 | 
	
		
			
				|  |  | +            <div class="title-b">采空区密闭参数</div>
 | 
	
		
			
				|  |  | +            <div class="card-btn">
 | 
	
		
			
				|  |  | +                <div :class="activeIndex == index ? 'box1' : 'box'" v-for="(item, index) in mbList" :key="index"
 | 
	
		
			
				|  |  | +                    @click="btnClick(item, index)">
 | 
	
		
			
				|  |  | +                    <div class="label">{{ item.label }}</div>
 | 
	
		
			
				|  |  | +                    <div class="box-item box-item1">
 | 
	
		
			
				|  |  | +                        <span class="text-t">{{ `${item.label1}:` }}</span>
 | 
	
		
			
				|  |  | +                        <span class="text-v">{{ `${item.nd}%` }}</span>
 | 
	
		
			
				|  |  | +                    </div>
 | 
	
		
			
				|  |  | +                    <div class="box-item box-item2">
 | 
	
		
			
				|  |  | +                        <span class="text-t">{{ `${item.label2}:` }}</span>
 | 
	
		
			
				|  |  | +                        <span class="text-v">{{ item.time1 }}</span>
 | 
	
		
			
				|  |  | +                    </div>
 | 
	
		
			
				|  |  | +                    <div class="box-item box-item3">
 | 
	
		
			
				|  |  | +                        <span class="text-t">{{ `${item.label3}:` }}</span>
 | 
	
		
			
				|  |  | +                        <span class="text-v">{{ item.address }}</span>
 | 
	
		
			
				|  |  | +                    </div>
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +            <div class="echart-box">
 | 
	
		
			
				|  |  | +                <div class="title-f">
 | 
	
		
			
				|  |  | +                    <div class="title-text">{{ `${type}趋势` }}</div>
 | 
	
		
			
				|  |  | +                    <!-- <a-range-picker v-model="TimeRange" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
 | 
	
		
			
				|  |  | +                        :placeholder="['开始时间', '终止时间']" @change="onDataChange" /> -->
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +                <div class="echarts-box">
 | 
	
		
			
				|  |  | +                    <echartLine1 :echartDataSg="echartDataSg1"></echartLine1>
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  |      </div>
 | 
	
		
			
				|  |  |  </template>
 | 
	
		
			
				|  |  |  
 | 
	
	
		
			
				|  | @@ -57,19 +116,96 @@ import { ref, computed, reactive, watch, defineProps } from 'vue';
 | 
	
		
			
				|  |  |  import { topOutList, tabList, columns, pointOutList, } from '../fire.data'
 | 
	
		
			
				|  |  |  import imgUrl from '../../../../../assets/images/fire/pie.png'
 | 
	
		
			
				|  |  |  import echartLine2 from './common/echartLine2.vue'
 | 
	
		
			
				|  |  | +import echartLine1 from './common/echartLine1.vue'
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  let props = defineProps({
 | 
	
		
			
				|  |  |      listData: Object,
 | 
	
		
			
				|  |  |  });
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +//束管监测-顶部区域数据
 | 
	
		
			
				|  |  | +let topContent = reactive({
 | 
	
		
			
				|  |  | +    temperature: 0,
 | 
	
		
			
				|  |  | +    position: '',
 | 
	
		
			
				|  |  | +    time: '',
 | 
	
		
			
				|  |  | +    warn: '',
 | 
	
		
			
				|  |  | +})
 | 
	
		
			
				|  |  | +//束管监测当前密闭参数激活选项
 | 
	
		
			
				|  |  | +let activeIndex = ref(0)
 | 
	
		
			
				|  |  | +//束管监测当前激活密闭参数类型
 | 
	
		
			
				|  |  | +let type = ref('O2')
 | 
	
		
			
				|  |  | +//束管监测密闭参数列表
 | 
	
		
			
				|  |  | +let mbList = reactive([
 | 
	
		
			
				|  |  | +    {
 | 
	
		
			
				|  |  | +        label: 'O2',
 | 
	
		
			
				|  |  | +        label1: '浓度',
 | 
	
		
			
				|  |  | +        label2: '时间',
 | 
	
		
			
				|  |  | +        label3: '位置',
 | 
	
		
			
				|  |  | +        nd: 0,
 | 
	
		
			
				|  |  | +        time1: '',
 | 
	
		
			
				|  |  | +        address: '',
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    {
 | 
	
		
			
				|  |  | +        label: 'CO',
 | 
	
		
			
				|  |  | +        label1: '浓度',
 | 
	
		
			
				|  |  | +        label2: '时间',
 | 
	
		
			
				|  |  | +        label3: '位置',
 | 
	
		
			
				|  |  | +        nd: 0,
 | 
	
		
			
				|  |  | +        time1: '',
 | 
	
		
			
				|  |  | +        address: '',
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    {
 | 
	
		
			
				|  |  | +        label: 'CO2',
 | 
	
		
			
				|  |  | +        label1: '浓度',
 | 
	
		
			
				|  |  | +        label2: '时间',
 | 
	
		
			
				|  |  | +        label3: '位置',
 | 
	
		
			
				|  |  | +        nd: 0,
 | 
	
		
			
				|  |  | +        time1: '',
 | 
	
		
			
				|  |  | +        address: '',
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    {
 | 
	
		
			
				|  |  | +        label: 'CH4',
 | 
	
		
			
				|  |  | +        label1: '浓度',
 | 
	
		
			
				|  |  | +        label2: '时间',
 | 
	
		
			
				|  |  | +        label3: '位置',
 | 
	
		
			
				|  |  | +        nd: 0,
 | 
	
		
			
				|  |  | +        time1: '',
 | 
	
		
			
				|  |  | +        address: '',
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    {
 | 
	
		
			
				|  |  | +        label: 'C2H2',
 | 
	
		
			
				|  |  | +        label1: '浓度',
 | 
	
		
			
				|  |  | +        label2: '时间',
 | 
	
		
			
				|  |  | +        label3: '位置',
 | 
	
		
			
				|  |  | +        nd: 0,
 | 
	
		
			
				|  |  | +        time1: '',
 | 
	
		
			
				|  |  | +        address: '',
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    {
 | 
	
		
			
				|  |  | +        label: 'C2H4',
 | 
	
		
			
				|  |  | +        label1: '浓度',
 | 
	
		
			
				|  |  | +        label2: '时间',
 | 
	
		
			
				|  |  | +        label3: '位置',
 | 
	
		
			
				|  |  | +        nd: 0,
 | 
	
		
			
				|  |  | +        time1: '',
 | 
	
		
			
				|  |  | +        address: '',
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +])
 | 
	
		
			
				|  |  | +let echartDataSg1 = reactive({
 | 
	
		
			
				|  |  | +    xData: [],
 | 
	
		
			
				|  |  | +    yData: [],
 | 
	
		
			
				|  |  | +    lengedData: 'O2',
 | 
	
		
			
				|  |  | +})
 | 
	
		
			
				|  |  | +let echartDataSgList = reactive<any[]>([])
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  //外因火灾温度监测-图表数据
 | 
	
		
			
				|  |  | - let echartDataWd =reactive({
 | 
	
		
			
				|  |  | -  xData: [],
 | 
	
		
			
				|  |  | -  maxData: {
 | 
	
		
			
				|  |  | -    data:[],
 | 
	
		
			
				|  |  | -    lengedData: '实时温度',
 | 
	
		
			
				|  |  | -  },
 | 
	
		
			
				|  |  | -}) 
 | 
	
		
			
				|  |  | +let echartDataWd = reactive({
 | 
	
		
			
				|  |  | +    xData: [],
 | 
	
		
			
				|  |  | +    maxData: {
 | 
	
		
			
				|  |  | +        data: [],
 | 
	
		
			
				|  |  | +        lengedData: '实时温度',
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +})
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  //烟雾传感器列表数据
 | 
	
		
			
				|  |  |  let monitorlistYw = reactive([])
 | 
	
	
		
			
				|  | @@ -86,6 +222,63 @@ let monitorlistPl = reactive([])
 | 
	
		
			
				|  |  |  //温度监测-测点编码
 | 
	
		
			
				|  |  |  let pointCode = ref('')
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +//束管监测密闭参数选项切换
 | 
	
		
			
				|  |  | +function btnClick(item, ind) {
 | 
	
		
			
				|  |  | +    activeIndex.value = ind
 | 
	
		
			
				|  |  | +    type.value = item.label
 | 
	
		
			
				|  |  | +    echartDataSg1.xData.length = 0
 | 
	
		
			
				|  |  | +    echartDataSg1.yData.length = 0
 | 
	
		
			
				|  |  | +    echartDataSg1.lengedData = type.value
 | 
	
		
			
				|  |  | +    switch (type.value) {
 | 
	
		
			
				|  |  | +        case 'O2':
 | 
	
		
			
				|  |  | +            echartDataSgList.forEach(el => {
 | 
	
		
			
				|  |  | +                echartDataSg1.xData.push(el.time)
 | 
	
		
			
				|  |  | +                echartDataSg1.yData.push(el.o2val)
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            })
 | 
	
		
			
				|  |  | +            break;
 | 
	
		
			
				|  |  | +        case 'C2H4':
 | 
	
		
			
				|  |  | +            echartDataSgList.forEach(el => {
 | 
	
		
			
				|  |  | +                echartDataSg1.xData.push(el.time)
 | 
	
		
			
				|  |  | +                echartDataSg1.yData.push(el.ch2val)
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            })
 | 
	
		
			
				|  |  | +            break;
 | 
	
		
			
				|  |  | +        case 'CO':
 | 
	
		
			
				|  |  | +            echartDataSgList.forEach(el => {
 | 
	
		
			
				|  |  | +                echartDataSg1.xData.push(el.time)
 | 
	
		
			
				|  |  | +                echartDataSg1.yData.push(el.coval)
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            })
 | 
	
		
			
				|  |  | +            break;
 | 
	
		
			
				|  |  | +        case 'CH4':
 | 
	
		
			
				|  |  | +            echartDataSgList.forEach(el => {
 | 
	
		
			
				|  |  | +                echartDataSg1.xData.push(el.time)
 | 
	
		
			
				|  |  | +                echartDataSg1.yData.push(el.chval)
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            })
 | 
	
		
			
				|  |  | +            break;
 | 
	
		
			
				|  |  | +        case 'CO2':
 | 
	
		
			
				|  |  | +            echartDataSgList.forEach(el => {
 | 
	
		
			
				|  |  | +                echartDataSg1.xData.push(el.time)
 | 
	
		
			
				|  |  | +                echartDataSg1.yData.push(el.co2val)
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            })
 | 
	
		
			
				|  |  | +            break;
 | 
	
		
			
				|  |  | +        case 'C2H2':
 | 
	
		
			
				|  |  | +            echartDataSgList.forEach(el => {
 | 
	
		
			
				|  |  | +                echartDataSg1.xData.push(el.time)
 | 
	
		
			
				|  |  | +                echartDataSg1.yData.push(el.gasval)
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            })
 | 
	
		
			
				|  |  | +            break;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  //温度监测测点编号选项切换
 | 
	
		
			
				|  |  |  function handleChange(val) {
 | 
	
		
			
				|  |  |      pointCode.value = val
 | 
	
	
		
			
				|  | @@ -93,24 +286,40 @@ function handleChange(val) {
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  watch(() => props.listData, (val) => {
 | 
	
		
			
				|  |  |      console.log(val, 'val---------------')
 | 
	
		
			
				|  |  | +    props.listData = val
 | 
	
		
			
				|  |  |      if (JSON.stringify(val) != '{}') {
 | 
	
		
			
				|  |  | +        echartDataSg1.xData.length = 0
 | 
	
		
			
				|  |  | +        echartDataSg1.yData.length = 0
 | 
	
		
			
				|  |  | +        echartDataSgList.length = 0
 | 
	
		
			
				|  |  | +        echartDataWd.xData.length = 0
 | 
	
		
			
				|  |  | +        echartDataWd.maxData.data.length = 0
 | 
	
		
			
				|  |  | +        monitorlistYw.length = 0
 | 
	
		
			
				|  |  | +        monitorlistHy.length = 0
 | 
	
		
			
				|  |  | +        monitorlistPl.length = 0
 | 
	
		
			
				|  |  |          if (val.fiber.length != 0) {
 | 
	
		
			
				|  |  |              topOutList[0].value = val.fiber[0].readData.fmax
 | 
	
		
			
				|  |  |              topOutList[1].value = val.fiber[0].readData.fmin
 | 
	
		
			
				|  |  |              topOutList[2].value = val.fiber[0].readData.favg
 | 
	
		
			
				|  |  |              topOutList[3].text = val.fiber[0].warnFlag ? '存在风险' : '正常'
 | 
	
		
			
				|  |  | -            echartDataWd.xData.length=0
 | 
	
		
			
				|  |  | -            echartDataWd.maxData.data.length=0
 | 
	
		
			
				|  |  | -            JSON.parse(val.fiber[0].readData.fibreTemperature).forEach(el=>{
 | 
	
		
			
				|  |  | +            JSON.parse(val.fiber[0].readData.fibreTemperature).forEach(el => {
 | 
	
		
			
				|  |  |                  echartDataWd.xData.push(el.pos)
 | 
	
		
			
				|  |  |                  echartDataWd.maxData.data.push(el.value)
 | 
	
		
			
				|  |  |              })
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | +        if (val.bundletube.length != 0) {
 | 
	
		
			
				|  |  | +            topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--'
 | 
	
		
			
				|  |  | +            topContent.position = val.bundletube[0].strinstallpos || '--'
 | 
	
		
			
				|  |  | +            topContent.time = val.bundletube[0].readTime || '--'
 | 
	
		
			
				|  |  | +            topContent.warn = val.bundletube[0].warnLevel == 0 ? '正常' : val.bundletube[0].warnLevel == 101 ? '较低风险' : val.bundletube[0].warnLevel == 102 ? '低风险' : val.bundletube[0].warnLevel == 103 ? '中风险' : val.bundletube[0].warnLevel == 104 ? '高风险' : val.bundletube[0].warnLevel == 201 ? '报警' : '正常'
 | 
	
		
			
				|  |  | +            val.bundletube[0].history.forEach(v => {
 | 
	
		
			
				|  |  | +                echartDataSg1.xData.push(v.time)
 | 
	
		
			
				|  |  | +                echartDataSg1.yData.push(v.o2val)
 | 
	
		
			
				|  |  | +                echartDataSgList.push(v)
 | 
	
		
			
				|  |  | +            })
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |          if (val.smoke.length != 0) {
 | 
	
		
			
				|  |  | -            monitorlistYw.length = 0
 | 
	
		
			
				|  |  |              val.smoke.forEach(el => {
 | 
	
		
			
				|  |  |                  el.warnFlag = el.warnFlag ? '存在风险' : '正常'
 | 
	
		
			
				|  |  |                  monitorlistYw.push(el)
 | 
	
	
		
			
				|  | @@ -119,7 +328,6 @@ watch(() => props.listData, (val) => {
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |          if (val.fire.length != 0) {
 | 
	
		
			
				|  |  | -            monitorlistHy.length = 0
 | 
	
		
			
				|  |  |              val.fire.forEach(el => {
 | 
	
		
			
				|  |  |                  el.warnFlag = el.warnFlag ? '存在风险' : '正常'
 | 
	
		
			
				|  |  |                  monitorlistHy.push(el)
 | 
	
	
		
			
				|  | @@ -127,7 +335,6 @@ watch(() => props.listData, (val) => {
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |          if (val.spray.length != 0) {
 | 
	
		
			
				|  |  | -            monitorlistPl.length = 0
 | 
	
		
			
				|  |  |              val.spray.forEach(el => {
 | 
	
		
			
				|  |  |                  el.warnFlag = el.warnFlag ? '存在风险' : '正常'
 | 
	
		
			
				|  |  |                  monitorlistPl.push(el)
 | 
	
	
		
			
				|  | @@ -147,6 +354,7 @@ watch(() => props.listData, (val) => {
 | 
	
		
			
				|  |  |      height: 100%;
 | 
	
		
			
				|  |  |      padding: 20px;
 | 
	
		
			
				|  |  |      box-sizing: border-box;
 | 
	
		
			
				|  |  | +    overflow-y: auto;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |      .work-nav {
 | 
	
		
			
				|  |  |          height: 115px;
 | 
	
	
		
			
				|  | @@ -249,6 +457,87 @@ watch(() => props.listData, (val) => {
 | 
	
		
			
				|  |  |              background: url('../../../../../assets/images/fire/pj.svg') no-repeat;
 | 
	
		
			
				|  |  |              background-position: 50% 50%;
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .box {
 | 
	
		
			
				|  |  | +            display: flex;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            &:nth-child(1) {
 | 
	
		
			
				|  |  | +                justify-content: space-around;
 | 
	
		
			
				|  |  | +                align-items: center;
 | 
	
		
			
				|  |  | +                flex: 2;
 | 
	
		
			
				|  |  | +                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;
 | 
	
		
			
				|  |  | +                justify-content: center;
 | 
	
		
			
				|  |  | +                align-items: center;
 | 
	
		
			
				|  |  | +                height: 100%;
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            .contents {
 | 
	
		
			
				|  |  | +                height: 94px;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                &:nth-child(1) {
 | 
	
		
			
				|  |  | +                    width: 40%;
 | 
	
		
			
				|  |  | +                    display: flex;
 | 
	
		
			
				|  |  | +                    justify-content: center;
 | 
	
		
			
				|  |  | +                    align-items: center;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                    img {
 | 
	
		
			
				|  |  | +                        position: relative;
 | 
	
		
			
				|  |  | +                        width: 94px;
 | 
	
		
			
				|  |  | +                        height: 94px;
 | 
	
		
			
				|  |  | +                        background: url('../../../../../assets/images/fire/pj.svg') no-repeat;
 | 
	
		
			
				|  |  | +                        background-position: 50% 50%;
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                    .text {
 | 
	
		
			
				|  |  | +                        font-family: 'douyuFont';
 | 
	
		
			
				|  |  | +                        font-size: 36px;
 | 
	
		
			
				|  |  | +                        margin: 0px 15px;
 | 
	
		
			
				|  |  | +                        color: #3df6ff;
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                    .dw {
 | 
	
		
			
				|  |  | +                        font-size: 16px;
 | 
	
		
			
				|  |  | +                        color: #b3b8cc;
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                &:nth-child(2) {
 | 
	
		
			
				|  |  | +                    width: 60%;
 | 
	
		
			
				|  |  | +                    display: flex;
 | 
	
		
			
				|  |  | +                    flex-direction: column;
 | 
	
		
			
				|  |  | +                    justify-content: space-around;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                    .text {
 | 
	
		
			
				|  |  | +                        font-size: 18px;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                        .label {
 | 
	
		
			
				|  |  | +                            color: #b3b8cc;
 | 
	
		
			
				|  |  | +                            font-weight: bold;
 | 
	
		
			
				|  |  | +                        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                        .value {
 | 
	
		
			
				|  |  | +                            font-family: 'douyuFont';
 | 
	
		
			
				|  |  | +                            color: #3df6ff;
 | 
	
		
			
				|  |  | +                            margin-left: 10px;
 | 
	
		
			
				|  |  | +                        }
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            .text1 {
 | 
	
		
			
				|  |  | +                font-size: 18px;
 | 
	
		
			
				|  |  | +                color: #b3b8cc;
 | 
	
		
			
				|  |  | +                font-weight: bold;
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |      .center-box {
 | 
	
	
		
			
				|  | @@ -322,6 +611,166 @@ watch(() => props.listData, (val) => {
 | 
	
		
			
				|  |  |              height: calc(100% - 36px);
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | +    .content-s {
 | 
	
		
			
				|  |  | +        width: 100%;
 | 
	
		
			
				|  |  | +        height: 608px;
 | 
	
		
			
				|  |  | +        padding: 15px 20px 0px 20px;
 | 
	
		
			
				|  |  | +        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
 | 
	
		
			
				|  |  | +        background-size: 100% 100%;
 | 
	
		
			
				|  |  | +        box-sizing: border-box;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .title-b {
 | 
	
		
			
				|  |  | +            font-family: 'douyuFont';
 | 
	
		
			
				|  |  | +            font-size: 16px;
 | 
	
		
			
				|  |  | +            color: #3df6ff;
 | 
	
		
			
				|  |  | +            margin-bottom: 10px;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .card-btn {
 | 
	
		
			
				|  |  | +            height: 169px;
 | 
	
		
			
				|  |  | +            margin-bottom: 10px;
 | 
	
		
			
				|  |  | +            display: flex;
 | 
	
		
			
				|  |  | +            justify-content: space-between;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            .box {
 | 
	
		
			
				|  |  | +                position: relative;
 | 
	
		
			
				|  |  | +                width: 248px;
 | 
	
		
			
				|  |  | +                height: 100%;
 | 
	
		
			
				|  |  | +                background: url('../../../../../assets/images/fire/1.png') no-repeat;
 | 
	
		
			
				|  |  | +                cursor: pointer;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                .label {
 | 
	
		
			
				|  |  | +                    position: absolute;
 | 
	
		
			
				|  |  | +                    left: 50%;
 | 
	
		
			
				|  |  | +                    top: 2px;
 | 
	
		
			
				|  |  | +                    transform: translate(-50%);
 | 
	
		
			
				|  |  | +                    font-size: 16px;
 | 
	
		
			
				|  |  | +                    color: #fff;
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                .box-item {
 | 
	
		
			
				|  |  | +                    position: absolute;
 | 
	
		
			
				|  |  | +                    left: 50%;
 | 
	
		
			
				|  |  | +                    transform: translate(-50%, 0);
 | 
	
		
			
				|  |  | +                    width: 226px;
 | 
	
		
			
				|  |  | +                    height: 27px;
 | 
	
		
			
				|  |  | +                    padding: 0px 10px;
 | 
	
		
			
				|  |  | +                    display: flex;
 | 
	
		
			
				|  |  | +                    justify-content: space-between;
 | 
	
		
			
				|  |  | +                    align-items: center;
 | 
	
		
			
				|  |  | +                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                    .text-t {
 | 
	
		
			
				|  |  | +                        width: 32px;
 | 
	
		
			
				|  |  | +                        color: #fff;
 | 
	
		
			
				|  |  | +                        font-size: 12px;
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                    .text-v {
 | 
	
		
			
				|  |  | +                        width: calc(100% - 32px);
 | 
	
		
			
				|  |  | +                        font-family: 'douyuFont';
 | 
	
		
			
				|  |  | +                        font-size: 10px;
 | 
	
		
			
				|  |  | +                        color: #3df6ff;
 | 
	
		
			
				|  |  | +                        display: flex;
 | 
	
		
			
				|  |  | +                        justify-content: flex-end;
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                .box-item1 {
 | 
	
		
			
				|  |  | +                    top: 32px;
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                .box-item2 {
 | 
	
		
			
				|  |  | +                    top: 68px;
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                .box-item3 {
 | 
	
		
			
				|  |  | +                    top: 104px;
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            .box1 {
 | 
	
		
			
				|  |  | +                position: relative;
 | 
	
		
			
				|  |  | +                width: 248px;
 | 
	
		
			
				|  |  | +                height: 100%;
 | 
	
		
			
				|  |  | +                background: url('../../../../../assets/images/fire/2.png') no-repeat;
 | 
	
		
			
				|  |  | +                cursor: pointer;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                .label {
 | 
	
		
			
				|  |  | +                    position: absolute;
 | 
	
		
			
				|  |  | +                    left: 50%;
 | 
	
		
			
				|  |  | +                    top: 2px;
 | 
	
		
			
				|  |  | +                    transform: translate(-50%);
 | 
	
		
			
				|  |  | +                    font-size: 16px;
 | 
	
		
			
				|  |  | +                    color: #fff;
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                .box-item {
 | 
	
		
			
				|  |  | +                    position: absolute;
 | 
	
		
			
				|  |  | +                    left: 50%;
 | 
	
		
			
				|  |  | +                    transform: translate(-50%, 0);
 | 
	
		
			
				|  |  | +                    width: 226px;
 | 
	
		
			
				|  |  | +                    height: 27px;
 | 
	
		
			
				|  |  | +                    padding: 0px 10px;
 | 
	
		
			
				|  |  | +                    display: flex;
 | 
	
		
			
				|  |  | +                    justify-content: space-between;
 | 
	
		
			
				|  |  | +                    align-items: center;
 | 
	
		
			
				|  |  | +                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                    .text-t {
 | 
	
		
			
				|  |  | +                        width: 32px;
 | 
	
		
			
				|  |  | +                        color: #fff;
 | 
	
		
			
				|  |  | +                        font-size: 12px;
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                    .text-v {
 | 
	
		
			
				|  |  | +                        width: calc(100% - 32px);
 | 
	
		
			
				|  |  | +                        font-family: 'douyuFont';
 | 
	
		
			
				|  |  | +                        font-size: 10px;
 | 
	
		
			
				|  |  | +                        color: #3df6ff;
 | 
	
		
			
				|  |  | +                        display: flex;
 | 
	
		
			
				|  |  | +                        justify-content: flex-end;
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                .box-item1 {
 | 
	
		
			
				|  |  | +                    top: 32px;
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                .box-item2 {
 | 
	
		
			
				|  |  | +                    top: 68px;
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                .box-item3 {
 | 
	
		
			
				|  |  | +                    top: 104px;
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .echart-box {
 | 
	
		
			
				|  |  | +            height: calc(100% - 215px);
 | 
	
		
			
				|  |  | +            border: 1px solid #114aac;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            .title-f {
 | 
	
		
			
				|  |  | +                height: 40px;
 | 
	
		
			
				|  |  | +                padding: 0px 10px;
 | 
	
		
			
				|  |  | +                box-sizing: border-box;
 | 
	
		
			
				|  |  | +                display: flex;
 | 
	
		
			
				|  |  | +                justify-content: space-between;
 | 
	
		
			
				|  |  | +                align-items: center;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                .title-text {
 | 
	
		
			
				|  |  | +                    font-family: 'douyuFont';
 | 
	
		
			
				|  |  | +                    font-size: 16px;
 | 
	
		
			
				|  |  | +                    color: #3df6ff;
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            .echarts-box {
 | 
	
		
			
				|  |  | +                height: calc(100% - 40px);
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  |  </style>
 |