648 lines
21 KiB
Vue
648 lines
21 KiB
Vue
|
<template>
|
|||
|
|
<section>
|
|||
|
|
<t-header index='1'></t-header>
|
|||
|
|
<div class="content clearfix">
|
|||
|
|
<div class="con1">
|
|||
|
|
<div class="yard-wrap">
|
|||
|
|
<div class="yard_group clearfix">
|
|||
|
|
<div class="yard_group_ul yard_group_ul_1">
|
|||
|
|
<div class="yard_group_cell" v-for="(e, i) in group01" :key="i" :class="['blue', 'green', 'gray', 'yellow', 'orange'][Number(e.struct_type) - 1]">
|
|||
|
|
<div class="yard_group_p" @click="getInfo1(e)">
|
|||
|
|
<p class="fontselect">{{e.struct_code}}</p>
|
|||
|
|
<img src="../assets/images/tip.png" />
|
|||
|
|
</div>
|
|||
|
|
<!-- <div v-show="code1 === e.struct_code" class="locate-wrap clearfix" :style="e.coordinate"> -->
|
|||
|
|
<div v-show="code1 === e.struct_code" class="locate-wrap clearfix">
|
|||
|
|
<div class="foldcricle1 position_1_1"></div>
|
|||
|
|
<div class="foldline1 position_1_1"></div>
|
|||
|
|
<div class="foldline2 position_1_1"></div>
|
|||
|
|
<div class="foldcricle2 position_1_1"></div>
|
|||
|
|
<!-- <div class="foldline" :class="e.position_1_1"></div> -->
|
|||
|
|
<div class="clearfix locate-content" :style="e.coordinate">
|
|||
|
|
<div class="tan_pline">
|
|||
|
|
<p class="tan_p">货位号：{{e.struct_code}}</p>
|
|||
|
|
<p class="tan_p">料盅号：{{e.storagevehicle_code}}</p>
|
|||
|
|
<p class="tan_p">物料：{{e.storagevehicle_code}}</p>
|
|||
|
|
<p class="tan_p">重量：{{e.storagevehicle_code}}</p>
|
|||
|
|
<p class="tan_p">批次：{{e.storagevehicle_code}}</p>
|
|||
|
|
<p class="tan_p">静置时间：{{e.storagevehicle_code}}</p>
|
|||
|
|
<p class="tan_p">出入任务类型：{{e.storagevehicle_code}}</p>
|
|||
|
|
<p class="tan_p">任务号：{{e.storagevehicle_code}}</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="corridor_2"> </div>
|
|||
|
|
<div class="yard_group clearfix">
|
|||
|
|
<div class="yard_group_ul yard_group_ul_2">
|
|||
|
|
<div class="yard_group_cell" v-for="(e, i) in group02" :key="i" :class="['blue', 'green', 'gray', 'yellow', 'orange'][Number(e.struct_type) - 1]">
|
|||
|
|
<div class="yard_group_p" @click="getInfo2(e)">
|
|||
|
|
<p class="fontselect">{{e.struct_code}}</p>
|
|||
|
|
<img src="../assets/images/tip.png" />
|
|||
|
|
</div>
|
|||
|
|
<div v-show="code2 === e.struct_code" class="locate-wrap clearfix" :style="e.coordinate">
|
|||
|
|
<div class="locate-content">
|
|||
|
|
<div class="tan_pline">
|
|||
|
|
<p class="tan_p">货位号：{{e.struct_code}}</p>
|
|||
|
|
<p class="tan_p">料盅号：{{e.storagevehicle_code}}</p>
|
|||
|
|
<p class="tan_p">物料：{{e.storagevehicle_code}}</p>
|
|||
|
|
<p class="tan_p">重量：{{e.storagevehicle_code}}</p>
|
|||
|
|
<p class="tan_p">批次：{{e.storagevehicle_code}}</p>
|
|||
|
|
<p class="tan_p">静置时间：{{e.storagevehicle_code}}</p>
|
|||
|
|
<p class="tan_p">出入任务类型：{{e.storagevehicle_code}}</p>
|
|||
|
|
<p class="tan_p">任务号：{{e.storagevehicle_code}}</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="corridor_2"> </div>
|
|||
|
|
<div class="yard_group clearfix">
|
|||
|
|
<div class="yard_group_ul yard_group_ul_3">
|
|||
|
|
<div class="yard_group_cell" v-for="(e, i) in group03" :key="i" :class="['blue', 'green', 'gray', 'yellow', 'orange'][Number(e.struct_type) - 1]">
|
|||
|
|
<div class="yard_group_p" @click="getInfo3(e)">
|
|||
|
|
<p class="fontselect">{{e.struct_code}}</p>
|
|||
|
|
<img src="../assets/images/tip.png" />
|
|||
|
|
</div>
|
|||
|
|
<div v-show="code3 === e.struct_code" class="locate-wrap clearfix" :style="e.coordinate">
|
|||
|
|
<div class="locate-content">
|
|||
|
|
<div class="tan_pline">
|
|||
|
|
<p class="tan_p">货位号：{{e.struct_code}}</p>
|
|||
|
|
<p class="tan_p">料盅号：{{e.storagevehicle_code}}</p>
|
|||
|
|
<p class="tan_p">物料：{{e.storagevehicle_code}}</p>
|
|||
|
|
<p class="tan_p">重量：{{e.storagevehicle_code}}</p>
|
|||
|
|
<p class="tan_p">批次：{{e.storagevehicle_code}}</p>
|
|||
|
|
<p class="tan_p">静置时间：{{e.storagevehicle_code}}</p>
|
|||
|
|
<p class="tan_p">出入任务类型：{{e.storagevehicle_code}}</p>
|
|||
|
|
<p class="tan_p">任务号：{{e.storagevehicle_code}}</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tag_block">
|
|||
|
|
<div class="tag_type">
|
|||
|
|
<div class="type_color blue"></div>
|
|||
|
|
<div class="tag_text">静置中</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tag_type">
|
|||
|
|
<div class="type_color green"></div>
|
|||
|
|
<div class="tag_text">运行</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tag_type">
|
|||
|
|
<div class="type_color gray"></div>
|
|||
|
|
<div class="tag_text">禁用</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tag_type">
|
|||
|
|
<div class="type_color yellow"></div>
|
|||
|
|
<div class="tag_text">静置完成</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tag_type">
|
|||
|
|
<div class="type_color orange"></div>
|
|||
|
|
<div class="tag_text">强制完成</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="con-b con2">
|
|||
|
|
<!-- <div id="echarts1" style="width: 800px;height:500px;"></div>
|
|||
|
|
<div id="echarts3" style="width: 600px;height:450px;"></div> -->
|
|||
|
|
<div id="echarts1" style="width: 100%;height:108%;"></div>
|
|||
|
|
<div id="echarts3" style="width: 100%;height:108%;"></div>
|
|||
|
|
<div class="title">物料库存</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="con-b con3">
|
|||
|
|
<div class="block_h2">
|
|||
|
|
<h2>生产任务</h2>
|
|||
|
|
</div>
|
|||
|
|
<div class="list_scroll_title">
|
|||
|
|
<span>货位</span><span>物料编码</span><span>物料名称</span><span>重量</span><span>已静置时间</span><span>当前状态</span>
|
|||
|
|
<!-- <span>工序</span>
|
|||
|
|
<span>设备</span>
|
|||
|
|
<span>物料号</span>
|
|||
|
|
<span>生产物料</span>
|
|||
|
|
<span>厂家</span>
|
|||
|
|
<span>配方代码</span>
|
|||
|
|
<span>计划量</span>
|
|||
|
|
<span>生产量</span>
|
|||
|
|
<span>班次类型</span>
|
|||
|
|
<span>生产状态</span> -->
|
|||
|
|
</div>
|
|||
|
|
<vue-seamless-scroll :data="array1" :class-option="classOption" class="content-block-scroll">
|
|||
|
|
<ul class="content-block-scroll-ul">
|
|||
|
|
<li v-for="(e, i) in array1" :key="i">
|
|||
|
|
<span>{{i+1}}</span><span>{{e.device_code}}</span><span>{{e.device_code}}</span><span>{{e.device_code}}</span><span>{{e.device_code}}</span><span>{{e.device_code}}</span>
|
|||
|
|
<!-- <span>{{e.device_code}}</span>
|
|||
|
|
<span>{{e.device_code}}</span>
|
|||
|
|
<span>{{e.device_code}}</span>
|
|||
|
|
<span>{{e.device_code}}</span>
|
|||
|
|
<span>{{e.device_code}}</span>
|
|||
|
|
<span>{{e.device_code}}</span>
|
|||
|
|
<span>{{e.device_code}}</span>
|
|||
|
|
<span>{{e.device_code}}</span>
|
|||
|
|
<span>{{e.device_code}}</span> -->
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</vue-seamless-scroll>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import THeader from '@components/header.vue'
|
|||
|
|
import * as echarts from 'echarts'
|
|||
|
|
export default {
|
|||
|
|
name: 'StorageMonitor',
|
|||
|
|
components: {
|
|||
|
|
THeader
|
|||
|
|
},
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
array1: [
|
|||
|
|
{device_code: '001'},
|
|||
|
|
{device_code: '002'},
|
|||
|
|
{device_code: '003'},
|
|||
|
|
{device_code: '004'},
|
|||
|
|
{device_code: '005'},
|
|||
|
|
{device_code: '006'}
|
|||
|
|
],
|
|||
|
|
group01: [],
|
|||
|
|
group02: [],
|
|||
|
|
group03: [],
|
|||
|
|
// group01: [
|
|||
|
|
// {struct_code: '01', struct_type: '1'},
|
|||
|
|
// {struct_code: '02', struct_type: '2'},
|
|||
|
|
// {struct_code: '03', struct_type: '3'},
|
|||
|
|
// {struct_code: '04', struct_type: '2'},
|
|||
|
|
// {struct_code: '05', struct_type: '3'},
|
|||
|
|
// {struct_code: '06', struct_type: '2'},
|
|||
|
|
// {struct_code: '07', struct_type: '3'},
|
|||
|
|
// {struct_code: '08', struct_type: '2'},
|
|||
|
|
// {struct_code: '09', struct_type: '3'},
|
|||
|
|
// {struct_code: '10', struct_type: '2'},
|
|||
|
|
// {struct_code: '11', struct_type: '3'},
|
|||
|
|
// {struct_code: '12', struct_type: '2'},
|
|||
|
|
// {struct_code: '13', struct_type: '3'},
|
|||
|
|
// {struct_code: '14', struct_type: '2'},
|
|||
|
|
// {struct_code: '15', struct_type: '2'},
|
|||
|
|
// {struct_code: '16', struct_type: '3'},
|
|||
|
|
// {struct_code: '17', struct_type: '2'},
|
|||
|
|
// {struct_code: '18', struct_type: '3'},
|
|||
|
|
// {struct_code: '19', struct_type: '2'},
|
|||
|
|
// {struct_code: '20', struct_type: '3'},
|
|||
|
|
// {struct_code: '21', struct_type: '2'},
|
|||
|
|
// ],
|
|||
|
|
// group02: [
|
|||
|
|
// {struct_code: '01', struct_type: '1'}
|
|||
|
|
// ],
|
|||
|
|
// group03: [
|
|||
|
|
// {struct_code: '01', struct_type: '1'},
|
|||
|
|
// {struct_code: '02', struct_type: '2'}
|
|||
|
|
// ],
|
|||
|
|
code1: '',
|
|||
|
|
code2: '',
|
|||
|
|
code3: '',
|
|||
|
|
showNum1: '',
|
|||
|
|
showNum2: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
classOption () {
|
|||
|
|
return {
|
|||
|
|
step: 0.4,
|
|||
|
|
limitMoveNum: 6
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted () {
|
|||
|
|
// 编号排布
|
|||
|
|
// 12排
|
|||
|
|
let pai1 = []
|
|||
|
|
let pai2 = []
|
|||
|
|
let pai12 = []
|
|||
|
|
for (let i = 1; i <= 20; i++) {
|
|||
|
|
// if (i <= 10) {
|
|||
|
|
// pai1.push({struct_code: i * 2 - 1, coordinate: {'left': '1.02rem', 'top': '.4rem'}, show: 0})
|
|||
|
|
// pai2.push({struct_code: i * 2, coordinate: {'left': '1.02rem', 'top': '.4rem'}, show: 0})
|
|||
|
|
// } else {
|
|||
|
|
// pai1.push({struct_code: i * 2 - 1, coordinate: {'right': '1.02rem', 'top': '.4rem'}, show: 0})
|
|||
|
|
// pai2.push({struct_code: i * 2, coordinate: {'right': '1.02rem', 'top': '.4rem'}, show: 0})
|
|||
|
|
// }
|
|||
|
|
if (i <= 10) {
|
|||
|
|
pai1.push({struct_code: i * 2 - 1, coordinate: {'left': '0rem', 'top': '0rem'}, show: 0})
|
|||
|
|
pai2.push({struct_code: i * 2, coordinate: {'left': '0rem', 'top': '0rem'}, show: 0})
|
|||
|
|
} else {
|
|||
|
|
pai1.push({struct_code: i * 2 - 1, coordinate: {'right': '0rem', 'top': '0rem'}, show: 0})
|
|||
|
|
pai2.push({struct_code: i * 2, coordinate: {'right': '0rem', 'top': '.0rem'}, show: 0})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
pai12 = pai1.concat(pai2)
|
|||
|
|
this.group01 = pai12
|
|||
|
|
// 34排
|
|||
|
|
let pai3 = []
|
|||
|
|
let pai4 = []
|
|||
|
|
let pai34 = []
|
|||
|
|
for (let i = 21; i <= 38; i++) {
|
|||
|
|
if (i <= 30) {
|
|||
|
|
pai3.push({struct_code: i * 2 - 1, coordinate: {'left': '1.02rem', 'top': '.4rem'}, show: 0})
|
|||
|
|
pai4.push({struct_code: i * 2, coordinate: {'left': '1.02rem', 'top': '.4rem'}, show: 0})
|
|||
|
|
} else {
|
|||
|
|
pai3.push({struct_code: i * 2 - 1, coordinate: {'right': '1.02rem', 'top': '.4rem'}, show: 0})
|
|||
|
|
pai4.push({struct_code: i * 2, coordinate: {'right': '1.02rem', 'bottom': '.4rem'}, show: 0})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
pai34 = pai3.concat(pai4)
|
|||
|
|
this.group02 = pai34
|
|||
|
|
// 56排
|
|||
|
|
let pai5 = []
|
|||
|
|
let pai6 = []
|
|||
|
|
let pai56 = []
|
|||
|
|
for (let i = 1; i <= 8; i++) {
|
|||
|
|
if (i <= 4) {
|
|||
|
|
pai5.push({struct_code: i * 2 - 1, coordinate: {'left': '1.02rem', 'bottom': '.4rem'}, show: 0})
|
|||
|
|
pai6.push({struct_code: i * 2, coordinate: {'left': '1.02rem', 'bottom': '.4rem'}, show: 0})
|
|||
|
|
} else {
|
|||
|
|
pai5.push({struct_code: i * 2 - 1, coordinate: {'right': '1.02rem', 'bottom': '.4rem'}, show: 0})
|
|||
|
|
pai6.push({struct_code: i * 2, coordinate: {'right': '1.02rem', 'bottom': '.4rem'}, show: 0})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
pai56 = pai5.concat(pai6)
|
|||
|
|
this.group03 = pai56
|
|||
|
|
// end
|
|||
|
|
// 加载echarts图表
|
|||
|
|
this.getEchart1()
|
|||
|
|
this.getEchart3()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getInfo1 (e) {
|
|||
|
|
this.code1 = this.code1 === e.struct_code ? '' : e.struct_code
|
|||
|
|
this.code2 = ''
|
|||
|
|
this.code3 = ''
|
|||
|
|
},
|
|||
|
|
getInfo2 (e) {
|
|||
|
|
this.code2 = this.code2 === e.struct_code ? '' : e.struct_code
|
|||
|
|
this.code1 = ''
|
|||
|
|
this.code3 = ''
|
|||
|
|
},
|
|||
|
|
getInfo3 (e) {
|
|||
|
|
this.code3 = this.code3 === e.struct_code ? '' : e.struct_code
|
|||
|
|
this.code1 = ''
|
|||
|
|
this.code2 = ''
|
|||
|
|
},
|
|||
|
|
closebtn () {
|
|||
|
|
this.code1 = ''
|
|||
|
|
this.code2 = ''
|
|||
|
|
this.code3 = ''
|
|||
|
|
},
|
|||
|
|
getEchart1 () {
|
|||
|
|
// let xdata = this.xdata
|
|||
|
|
// let ydata = this.ydata
|
|||
|
|
var option = {
|
|||
|
|
legend: {
|
|||
|
|
top: 10,
|
|||
|
|
right: 10,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#ffffff',
|
|||
|
|
fontSize: 12,
|
|||
|
|
lineHeight: 20
|
|||
|
|
},
|
|||
|
|
itemGap: 20,
|
|||
|
|
itemHeight: 8,
|
|||
|
|
data: ['完成物料']
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: ['1号砖', '2号砖', '3号砖', '4号砖', '5号砖', '6号砖', '7号砖'],
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// yAxis: {
|
|||
|
|
// type: 'value'
|
|||
|
|
// },
|
|||
|
|
yAxis: {
|
|||
|
|
// 设置坐标轴字体颜色和宽度
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: '完成物料',
|
|||
|
|
data: [10, 50, 30, 20, 60, 70, 80],
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 10,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#32C5FF'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var echart = document.getElementById('echarts1')
|
|||
|
|
var myChart = echarts.init(echart)
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
},
|
|||
|
|
getEchart3 () {
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById('echarts3'))
|
|||
|
|
var option = {
|
|||
|
|
legend: {
|
|||
|
|
top: 40,
|
|||
|
|
right: 160,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#ffffff',
|
|||
|
|
fontSize: 12,
|
|||
|
|
lineHeight: 20
|
|||
|
|
},
|
|||
|
|
itemGap: 20,
|
|||
|
|
itemHeight: 8,
|
|||
|
|
data: ['状态汇总']
|
|||
|
|
// data: ['静置中', '静置完成', '强制完成']
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
position: 'top',
|
|||
|
|
offset: -10,
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
boundaryGap: [0, 0.01]
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
axisLine: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '状态汇总',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 10,
|
|||
|
|
data: [120, 200, 150],
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
// 这里是重点
|
|||
|
|
color: function (params) {
|
|||
|
|
// 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
|
|||
|
|
var colorList = ['#F96700 ', '#E2BB0E', '#30EBC9', '#d48265', '#91c7ae', '#749f83', '#ca8622']
|
|||
|
|
return colorList[params.dataIndex]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="stylus" scoped>
|
|||
|
|
.content
|
|||
|
|
width 100%
|
|||
|
|
padding .15rem .54rem 0
|
|||
|
|
.con1
|
|||
|
|
position relative
|
|||
|
|
width 18.17rem
|
|||
|
|
height 5.7rem
|
|||
|
|
// border 1px solid #f00
|
|||
|
|
.tag_block
|
|||
|
|
position absolute
|
|||
|
|
bottom .1rem
|
|||
|
|
right .3rem
|
|||
|
|
.tag_type
|
|||
|
|
display inline-block
|
|||
|
|
padding-left .3rem
|
|||
|
|
.type_color
|
|||
|
|
display inline-block
|
|||
|
|
width .1rem
|
|||
|
|
height .1rem
|
|||
|
|
border-radius 50%
|
|||
|
|
.tag_text
|
|||
|
|
display inline-block
|
|||
|
|
font-size .14rem
|
|||
|
|
line-height .2rem
|
|||
|
|
.blue
|
|||
|
|
background #32C5FF
|
|||
|
|
.green
|
|||
|
|
background #30EBC9
|
|||
|
|
.gray
|
|||
|
|
background #516282
|
|||
|
|
.yellow
|
|||
|
|
background #E2BB0E
|
|||
|
|
.orange
|
|||
|
|
background #F96700
|
|||
|
|
.yard-wrap
|
|||
|
|
// height 6.95rem
|
|||
|
|
height 100%
|
|||
|
|
width 100%
|
|||
|
|
// padding .1rem 0
|
|||
|
|
.yard_group
|
|||
|
|
width 100%
|
|||
|
|
height 1.8rem
|
|||
|
|
clear both
|
|||
|
|
.yard_group_ul
|
|||
|
|
float left
|
|||
|
|
display grid
|
|||
|
|
grid-gap 0
|
|||
|
|
justify-items center
|
|||
|
|
align-items center
|
|||
|
|
// border-top .01rem solid #32C5FF
|
|||
|
|
// border-left .01rem solid #32C5FF
|
|||
|
|
margin-top -.01rem
|
|||
|
|
.yard_group_ul_1
|
|||
|
|
// width 18.26rem
|
|||
|
|
width 100%
|
|||
|
|
position absolute
|
|||
|
|
grid-template-columns repeat(20, 100% / 20)
|
|||
|
|
grid-template-rows repeat(2, 1.8rem / 2)
|
|||
|
|
.yard_group_ul_2
|
|||
|
|
// width 16.19rem
|
|||
|
|
width 90%
|
|||
|
|
grid-template-columns repeat(18, 100% / 18)
|
|||
|
|
grid-template-rows repeat(2, 1.8rem / 2)
|
|||
|
|
.yard_group_ul_3
|
|||
|
|
// width 16.19rem
|
|||
|
|
width 40%
|
|||
|
|
grid-template-columns repeat(8, 100% / 8)
|
|||
|
|
grid-template-rows repeat(2, 1.8rem / 2)
|
|||
|
|
.yard_group_cell
|
|||
|
|
position relative
|
|||
|
|
display inline-block
|
|||
|
|
width 100%
|
|||
|
|
// width .8rem
|
|||
|
|
height calc(1.8rem / 2)
|
|||
|
|
// border-right .01rem solid #32C5FF
|
|||
|
|
// border-bottom .01rem solid #32C5FF
|
|||
|
|
border .01rem solid #32C5FF
|
|||
|
|
background #000F2B
|
|||
|
|
border-radius 8px
|
|||
|
|
.yard_group_p
|
|||
|
|
height calc(1.8rem / 2)
|
|||
|
|
p
|
|||
|
|
font-size 12px
|
|||
|
|
// line-height calc(1.8rem / 4)
|
|||
|
|
line-height 0.28rem
|
|||
|
|
-webkit-text-size-adjust none
|
|||
|
|
text-align center
|
|||
|
|
white-space nowrap
|
|||
|
|
// transform scale(0.66)
|
|||
|
|
img
|
|||
|
|
display block
|
|||
|
|
width 100%
|
|||
|
|
height 0.6rem
|
|||
|
|
.corridor_2
|
|||
|
|
width 100%
|
|||
|
|
line-height .1rem
|
|||
|
|
text-align center
|
|||
|
|
.locate-wrap
|
|||
|
|
position absolute
|
|||
|
|
left 0.88rem
|
|||
|
|
top .3rem
|
|||
|
|
// width 2.4rem
|
|||
|
|
// height 2.8rem
|
|||
|
|
// z-index 99
|
|||
|
|
// background center center / 100% 100% url(../assets/images/popover_1.png) no-repeat
|
|||
|
|
// padding .36rem .3rem
|
|||
|
|
.locate-content
|
|||
|
|
position absolute
|
|||
|
|
width 2.4rem
|
|||
|
|
height 2.8rem
|
|||
|
|
z-index 99
|
|||
|
|
background center center / 100% 100% url(../assets/images/popover_1.png) no-repeat
|
|||
|
|
padding .36rem .3rem
|
|||
|
|
.tan_pline
|
|||
|
|
width 100%
|
|||
|
|
margin 0 auto
|
|||
|
|
.tan_p
|
|||
|
|
font-size .14rem
|
|||
|
|
line-height .26rem
|
|||
|
|
height .26rem
|
|||
|
|
overflow hidden
|
|||
|
|
color #fff
|
|||
|
|
.close_btn
|
|||
|
|
position absolute
|
|||
|
|
top 3%
|
|||
|
|
right 10%
|
|||
|
|
margin-right -.25rem
|
|||
|
|
font-size .14rem
|
|||
|
|
line-height .34rem
|
|||
|
|
padding 0 .16rem
|
|||
|
|
border-radius 5px
|
|||
|
|
cursor pointer
|
|||
|
|
.con-b
|
|||
|
|
width 49.3%
|
|||
|
|
height 3.45rem
|
|||
|
|
overflow hidden
|
|||
|
|
position relative
|
|||
|
|
background center center / 100% 100% url(../assets/images/sctj_bg3.png) no-repeat
|
|||
|
|
margin-top .1rem
|
|||
|
|
float left
|
|||
|
|
.con2
|
|||
|
|
margin-right .2rem
|
|||
|
|
#echarts1
|
|||
|
|
// margin-left 2rem
|
|||
|
|
position absolute
|
|||
|
|
top 0
|
|||
|
|
left 0
|
|||
|
|
z-index 9
|
|||
|
|
#echarts3
|
|||
|
|
// margin-left 2rem
|
|||
|
|
position absolute
|
|||
|
|
top -30px
|
|||
|
|
left 60px
|
|||
|
|
z-index 10
|
|||
|
|
.title
|
|||
|
|
position absolute
|
|||
|
|
top .15rem
|
|||
|
|
left .25rem
|
|||
|
|
.con3
|
|||
|
|
padding 0 .27rem 0 .27rem
|
|||
|
|
.block_h2
|
|||
|
|
h2
|
|||
|
|
font-size .16rem
|
|||
|
|
line-height .22rem
|
|||
|
|
margin .15rem 0 .15rem 0
|
|||
|
|
.list_scroll_title
|
|||
|
|
width 100%
|
|||
|
|
background #262F52
|
|||
|
|
span
|
|||
|
|
display inline-block
|
|||
|
|
width 16.6%
|
|||
|
|
text-align center
|
|||
|
|
line-height .32rem
|
|||
|
|
// float left
|
|||
|
|
.content-block-scroll
|
|||
|
|
width 100%
|
|||
|
|
height calc(100% - 0.6rem)
|
|||
|
|
overflow hidden
|
|||
|
|
.content-block-scroll-ul
|
|||
|
|
li
|
|||
|
|
width 100%
|
|||
|
|
&:nth-child(2n)
|
|||
|
|
background rgba(38,47,82,0.50)
|
|||
|
|
span
|
|||
|
|
display inline-block
|
|||
|
|
width 16.6%
|
|||
|
|
padding 0 .1rem
|
|||
|
|
text-align center
|
|||
|
|
line-height .38rem
|
|||
|
|
box-sizing border-box
|
|||
|
|
// float left
|
|||
|
|
.foldcricle1
|
|||
|
|
position absolute
|
|||
|
|
z-index 102
|
|||
|
|
// width 1.27rem
|
|||
|
|
// height 1.05rem
|
|||
|
|
// background center center / 100% 100% url(../assets/images/dot_line.png) no-repeat
|
|||
|
|
width 0.25rem
|
|||
|
|
height 0.25rem
|
|||
|
|
background center center / 100% 100% url(../assets/images/dot.png) no-repeat
|
|||
|
|
.position_1_1
|
|||
|
|
top 0rem
|
|||
|
|
left -.1rem
|
|||
|
|
transform rotateX(180deg)
|
|||
|
|
</style>
|