样式
This commit is contained in:
蔡玲
@@ -29,48 +29,6 @@ export const getAllBigScreen = () => {
|
|||||||
"material_id": "1759154624864063488",
|
"material_id": "1759154624864063488",
|
||||||
"material_name": "测试物料4",
|
"material_name": "测试物料4",
|
||||||
"material_code": "A1001"
|
"material_code": "A1001"
|
||||||
},
|
|
||||||
{
|
|
||||||
"total_material_qty": 100.0,
|
|
||||||
"percentage": "66.67%",
|
|
||||||
"material_id": "1759154624864063488",
|
|
||||||
"material_name": "测试物料5",
|
|
||||||
"material_code": "A1001"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"total_material_qty": 100.0,
|
|
||||||
"percentage": "66.67%",
|
|
||||||
"material_id": "1759154624864063488",
|
|
||||||
"material_name": "测试物料6",
|
|
||||||
"material_code": "A1001"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"total_material_qty": 100.0,
|
|
||||||
"percentage": "66.67%",
|
|
||||||
"material_id": "1759154624864063488",
|
|
||||||
"material_name": "测试物料7",
|
|
||||||
"material_code": "A1001"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"total_material_qty": 100.0,
|
|
||||||
"percentage": "66.67%",
|
|
||||||
"material_id": "1759154624864063488",
|
|
||||||
"material_name": "测试物料8",
|
|
||||||
"material_code": "A1001"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"total_material_qty": 100.0,
|
|
||||||
"percentage": "66.67%",
|
|
||||||
"material_id": "1759154624864063488",
|
|
||||||
"material_name": "测试物料9",
|
|
||||||
"material_code": "A1001"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"total_material_qty": 100.0,
|
|
||||||
"percentage": "66.67%",
|
|
||||||
"material_id": "1759154624864063488",
|
|
||||||
"material_name": "测试物料10",
|
|
||||||
"material_code": "A1001"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
agvInfo: [
|
agvInfo: [
|
||||||
|
|||||||
BIN
src/images/area_a.png
Normal file
BIN
src/images/area_a.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
src/images/area_b.png
Normal file
BIN
src/images/area_b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
@@ -7,41 +7,36 @@
|
|||||||
<div class="exit_btn iconfont" @click="back"></div>
|
<div class="exit_btn iconfont" @click="back"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="n_body_container">
|
<div class="n_body_container">
|
||||||
<div class="n_left_wraper">
|
<div class="n_wraper">
|
||||||
<div class="w_wraper">
|
<div class="l_wraper">
|
||||||
<div class="item_wraper">
|
<div class="item_wraper">
|
||||||
<div class="title_wraper">
|
<div class="title_wraper">
|
||||||
<p>当日出入</p>
|
<p>当日生产统计</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="content_wraper">
|
<div class="content_wraper">
|
||||||
<div class="w_wraper">
|
<div class="w_wraper">
|
||||||
<div ref="echartsRef2" style="width: 100%; height: 100%;"></div>
|
<div ref="echartsRef1" style="width: 100%; height: 100%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item_wraper">
|
<div class="item_wraper">
|
||||||
<div class="title_wraper">
|
<div class="title_wraper">
|
||||||
<p>原料库存</p>
|
<p>设备运行统计</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="content_wraper content_wraper_2">
|
<div class="content_wraper content_wraper_2">
|
||||||
<div class="pie_wraper">
|
<div class="pie_wraper">
|
||||||
<div ref="echartsRef1" style="width: 100%; height: 100%;"></div>
|
<div ref="echartsRef2" style="width: 100%; height: 100%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="r_wraper"></div>
|
||||||
|
</div>
|
||||||
|
<div class="n_wraper">
|
||||||
|
<div class="l_wraper">
|
||||||
<div class="item_wraper">
|
<div class="item_wraper">
|
||||||
<div class="title_wraper">
|
<div class="title_wraper">
|
||||||
<p>当日出入</p>
|
<p>当日生产统计</p>
|
||||||
</div>
|
|
||||||
<div class="content_wraper">
|
|
||||||
<div class="w_wraper">
|
|
||||||
<div ref="echartsRef2" style="width: 100%; height: 100%;"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item_wraper">
|
|
||||||
<div class="title_wraper">
|
|
||||||
<p>历史分析</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="content_wraper">
|
<div class="content_wraper">
|
||||||
<div class="w_wraper">
|
<div class="w_wraper">
|
||||||
@@ -49,114 +44,18 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="n-center_wraper">
|
|
||||||
<div class="w_wraper">
|
|
||||||
<div class="item_wraper item_wraper_1">
|
|
||||||
<div class="title_wraper title_wraper_1">
|
|
||||||
<p>设备监控</p>
|
|
||||||
</div>
|
|
||||||
<div class="content_wraper">
|
|
||||||
<div class="agv_wrap">
|
|
||||||
<div class="agv_item" v-for="(e , i) in agvList" :key="'agv' + i">
|
|
||||||
<div class="agv_left">
|
|
||||||
<div class="agv_img"></div>
|
|
||||||
<p class="p1">{{ e.device_name }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="agv_info">
|
|
||||||
<div class="agv_txt">
|
|
||||||
<p class="p2">任务起点</p>
|
|
||||||
<p class="p3">{{ e.start_loc }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="agv_txt">
|
|
||||||
<p class="p2">任务终点</p>
|
|
||||||
<p class="p3">{{ e.target_loc }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="agv_txt">
|
|
||||||
<p class="p2">电量</p>
|
|
||||||
<p class="p3">{{ e.battery_level }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="agv_txt">
|
|
||||||
<p class="p2">状态</p>
|
|
||||||
<p class="p3">{{ e.status }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="agv_txt">
|
|
||||||
<p class="p2">提示信息</p>
|
|
||||||
<p class="p3">{{ e.message }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="agv_wrap rgv_wrap">
|
|
||||||
<div class="agv_item rgv_item" v-for="(e , i) in rgvList" :key="'rgv' + i">
|
|
||||||
<div class="agv_left rgv_left">
|
|
||||||
<div class="agv_img rgv_img"></div>
|
|
||||||
<p class="p1">{{ e.device_name }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="rgv_info">
|
|
||||||
<div class="agv_txt rgv_txt">
|
|
||||||
<p class="p2">当前位置</p>
|
|
||||||
<p class="p3">{{ e.current_loc }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="agv_txt rgv_txt">
|
|
||||||
<p class="p2">目标位置
|
|
||||||
</p>
|
|
||||||
<p class="p3">{{ e.target_loc }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="agv_txt rgv_txt">
|
|
||||||
<p class="p2">电量</p>
|
|
||||||
<p class="p3">{{ e.battery_level }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="agv_txt rgv_txt">
|
|
||||||
<p class="p2">状态</p>
|
|
||||||
<p class="p3">{{ e.status }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="agv_txt rgv_txt">
|
|
||||||
<p class="p2">提示信息</p>
|
|
||||||
<p class="p3">{{ e.message }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item_wraper">
|
<div class="item_wraper">
|
||||||
<div class="title_wraper title_wraper_1">
|
<div class="title_wraper">
|
||||||
<p>当日搬运任务</p>
|
<p>设备运行统计</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="content_wraper" style="padding: 0">
|
<div class="content_wraper content_wraper_2">
|
||||||
<div class="scroll_wrap">
|
<div class="pie_wraper">
|
||||||
<ul class="scroll_tab_1">
|
<div ref="echartsRef4" style="width: 100%; height: 100%;"></div>
|
||||||
<li>创建时间</li>
|
|
||||||
<li>设备</li>
|
|
||||||
<li>起点位置</li>
|
|
||||||
<li>终点位置</li>
|
|
||||||
<li>任务号</li>
|
|
||||||
<li>任务状态</li>
|
|
||||||
</ul>
|
|
||||||
<div class="scroll_container_1">
|
|
||||||
<vue-seamless-scroll :data="taskList" :class-option="defaultOption1">
|
|
||||||
<ul class="scroll-ul_1">
|
|
||||||
<li v-for="(e, i) in taskList" :key="i">
|
|
||||||
<div class="scroll-ul_1_div">{{e.create_time}}</div>
|
|
||||||
<div class="scroll-ul_1_div">{{e.carno}}</div>
|
|
||||||
<!-- <div class="scroll-ul_1_div">
|
|
||||||
<span class="state" :class="'state_' + e.status"></span>
|
|
||||||
<p class="state_name">{{['关机', '待机', '生产中', '故障'][Number(e.status)]}}</p>
|
|
||||||
</div> -->
|
|
||||||
<div class="scroll-ul_1_div">{{e.start_point_code}}</div>
|
|
||||||
<div class="scroll-ul_1_div">{{e.next_point_code}}</div>
|
|
||||||
<div class="scroll-ul_1_div">{{e.task_code}}</div>
|
|
||||||
<div class="scroll-ul_1_div">{{e.task_status}}</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</vue-seamless-scroll>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="r_wraper"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -170,8 +69,6 @@ export default {
|
|||||||
return {
|
return {
|
||||||
interTime: this.$store.getters.setTime,
|
interTime: this.$store.getters.setTime,
|
||||||
timer: null,
|
timer: null,
|
||||||
// chart2Timer: null,
|
|
||||||
// chart5Timer: null,
|
|
||||||
materList: [], // 原料库存
|
materList: [], // 原料库存
|
||||||
curList: [], // 当日出入
|
curList: [], // 当日出入
|
||||||
historyList: [], // 历史分析
|
historyList: [], // 历史分析
|
||||||
@@ -183,22 +80,7 @@ export default {
|
|||||||
myChart1: null,
|
myChart1: null,
|
||||||
myChart2: null,
|
myChart2: null,
|
||||||
myChart3: null,
|
myChart3: null,
|
||||||
myChart4: null,
|
myChart4: null
|
||||||
myChart5: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
defaultOption1 () {
|
|
||||||
return {
|
|
||||||
step: 0.3, // 数值越大速度滚动越快
|
|
||||||
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
|
|
||||||
hoverStop: true, // 是否开启鼠标悬停stop
|
|
||||||
direction: 1, // 0向下 1向上 2向左 3向右
|
|
||||||
openWatch: true, // 开启数据实时监控刷新dom
|
|
||||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
||||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
||||||
waitTime: 5000 // 单步运动停止的时间(默认值1000ms)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
@@ -209,7 +91,6 @@ export default {
|
|||||||
this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
|
this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
|
||||||
this.myChart3 = this.$echarts.init(this.$refs.echartsRef3)
|
this.myChart3 = this.$echarts.init(this.$refs.echartsRef3)
|
||||||
this.myChart4 = this.$echarts.init(this.$refs.echartsRef4)
|
this.myChart4 = this.$echarts.init(this.$refs.echartsRef4)
|
||||||
this.myChart5 = this.$echarts.init(this.$refs.echartsRef5)
|
|
||||||
},
|
},
|
||||||
destroyed () {
|
destroyed () {
|
||||||
if (this.myChart1 !== null) {
|
if (this.myChart1 !== null) {
|
||||||
@@ -228,22 +109,10 @@ export default {
|
|||||||
this.myChart4.dispose()
|
this.myChart4.dispose()
|
||||||
this.myChart4 = null
|
this.myChart4 = null
|
||||||
}
|
}
|
||||||
if (this.myChart5 !== null) {
|
|
||||||
this.myChart5.dispose()
|
|
||||||
this.myChart5 = null
|
|
||||||
}
|
|
||||||
if (this.timer !== null) {
|
if (this.timer !== null) {
|
||||||
clearInterval(this.timer)
|
clearInterval(this.timer)
|
||||||
this.timer = null
|
this.timer = null
|
||||||
}
|
}
|
||||||
// if (this.chart2Timer !== null) {
|
|
||||||
// clearInterval(this.chart2Timer)
|
|
||||||
// this.chart2Timer = null
|
|
||||||
// }
|
|
||||||
// if (this.chart5Timer !== null) {
|
|
||||||
// clearInterval(this.chart5Timer)
|
|
||||||
// this.chart5Timer = null
|
|
||||||
// }
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
back () {
|
back () {
|
||||||
@@ -269,130 +138,14 @@ export default {
|
|||||||
},
|
},
|
||||||
async _getAllBigScreen () {
|
async _getAllBigScreen () {
|
||||||
let res = await getAllBigScreen()
|
let res = await getAllBigScreen()
|
||||||
// if (this.chart2Timer !== null) {
|
|
||||||
// clearInterval(this.chart2Timer)
|
|
||||||
// this.chart2Timer = null
|
|
||||||
// }
|
|
||||||
// if (this.chart5Timer !== null) {
|
|
||||||
// clearInterval(this.chart5Timer)
|
|
||||||
// this.chart5Timer = null
|
|
||||||
// }
|
|
||||||
this.materList = [...res.inventoryAnalysis]
|
this.materList = [...res.inventoryAnalysis]
|
||||||
this.curList = [...res.inventoryIOAnalysis]
|
this.curList = [...res.inventoryIOAnalysis]
|
||||||
this.historyList = [...res.historyInventoryIOAnalysis]
|
|
||||||
this.statisList = [...res.todayProduceStatistic]
|
|
||||||
this.loadList = [...res.todayLoadingAndUnloadingStatistics]
|
|
||||||
this.taskList = [...res.todayTask]
|
|
||||||
this.agvList = [...res.agvInfo]
|
|
||||||
this.rgvList = [...res.rgvInfo]
|
|
||||||
this.setEchart1()
|
this.setEchart1()
|
||||||
this.setEchart2()
|
this.setEchart2()
|
||||||
this.setEchart3()
|
this.setEchart3()
|
||||||
this.setEchart4()
|
this.setEchart4()
|
||||||
this.setEchart5()
|
|
||||||
},
|
},
|
||||||
setEchart1 () {
|
setEchart1 () {
|
||||||
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad']
|
|
||||||
let seriesData = []
|
|
||||||
let seriesName = []
|
|
||||||
this.materList.map((e, i) => {
|
|
||||||
seriesData.push({name: e.material_name, value: e.total_material_qty, percentage: e.percentage})
|
|
||||||
seriesName.push({name: e.material_name})
|
|
||||||
})
|
|
||||||
let total = 0
|
|
||||||
this.materList.map(e => {
|
|
||||||
total = total + Number(e.total_material_qty)
|
|
||||||
}, 0)
|
|
||||||
if (!this.materList.length) {
|
|
||||||
total = '0'
|
|
||||||
}
|
|
||||||
let option = {
|
|
||||||
color: colors,
|
|
||||||
grid: {
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
x: '16%',
|
|
||||||
y: '35%',
|
|
||||||
text: '总数',
|
|
||||||
subtext: total,
|
|
||||||
textAlign: 'center',
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 9,
|
|
||||||
lineHeight: 10,
|
|
||||||
color: '#A8C3E6'
|
|
||||||
},
|
|
||||||
subtextStyle: {
|
|
||||||
fontSize: 10,
|
|
||||||
lineHeight: 8,
|
|
||||||
color: '#DBE7F6'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
show: true,
|
|
||||||
// type: 'scroll',
|
|
||||||
orient: 'vertical',
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
itemGap: 6,
|
|
||||||
icon: 'rect',
|
|
||||||
itemWidth: 4,
|
|
||||||
itemHeight: 4,
|
|
||||||
data: seriesName,
|
|
||||||
formatter: (name) => {
|
|
||||||
const item = seriesData.filter((item) => item.name === name)[0]
|
|
||||||
return `{a|${name}}\n{b| ${item.value + '}'}`
|
|
||||||
},
|
|
||||||
textStyle: {
|
|
||||||
rich: {
|
|
||||||
a: {
|
|
||||||
fontSize: 8,
|
|
||||||
lineHeight: 10,
|
|
||||||
padding: [0, 0, 0, 0],
|
|
||||||
wordWrap: 'break-word',
|
|
||||||
color: '#9BB9DD',
|
|
||||||
align: 'left'
|
|
||||||
},
|
|
||||||
b: {
|
|
||||||
fontSize: 8,
|
|
||||||
lineHeight: 10,
|
|
||||||
padding: [0, 0, 0, 0],
|
|
||||||
color: '#DFECFB',
|
|
||||||
align: 'left'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '库存量监控',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['50%', '60%'],
|
|
||||||
center: ['19%', '50%'],
|
|
||||||
labelLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
borderColor: 'RGBA(27, 58, 98, .5)',
|
|
||||||
borderWidth: 2
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
selectedMode: 'single',
|
|
||||||
selectedOffset: 20,
|
|
||||||
data: seriesData
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
this.myChart1.setOption(option, true)
|
|
||||||
},
|
|
||||||
setEchart2 () {
|
|
||||||
let barName = []
|
let barName = []
|
||||||
let barData1 = []
|
let barData1 = []
|
||||||
let barData2 = []
|
let barData2 = []
|
||||||
@@ -522,7 +275,7 @@ export default {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
this.myChart2.setOption(option, true)
|
this.myChart1.setOption(option, true)
|
||||||
// this.chart2Timer = setInterval(() => {
|
// this.chart2Timer = setInterval(() => {
|
||||||
// if (option.dataZoom[0].endValue >= barData1.length - 1) {
|
// if (option.dataZoom[0].endValue >= barData1.length - 1) {
|
||||||
// option.dataZoom[0].endValue = 3
|
// option.dataZoom[0].endValue = 3
|
||||||
@@ -531,19 +284,152 @@ export default {
|
|||||||
// option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
|
// option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
|
||||||
// option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
|
// option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
|
||||||
// }
|
// }
|
||||||
// this.myChart2.setOption(option, true)
|
// this.myChart1.setOption(option, true)
|
||||||
// }, 2000)
|
// }, 2000)
|
||||||
},
|
},
|
||||||
setEchart3 () {
|
setEchart2 () {
|
||||||
let total = 0
|
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252']
|
||||||
this.historyList.map(el => {
|
let seriesData = []
|
||||||
total = Math.max(total, Number(el.total_instorage_qty), Number(el.total_outstorage_qty))
|
let seriesName = []
|
||||||
|
this.materList.map((e, i) => {
|
||||||
|
if (i === 0) {
|
||||||
|
seriesData.push({name: e.material_name, value: e.total_material_qty, percentage: e.percentage, radius: ['70%', '100%']})
|
||||||
|
} else {
|
||||||
|
seriesData.push({name: e.material_name, value: e.total_material_qty, percentage: e.percentage})
|
||||||
|
}
|
||||||
|
seriesName.push({name: e.material_name})
|
||||||
})
|
})
|
||||||
|
console.log(seriesData)
|
||||||
|
let total = 0
|
||||||
|
this.materList.map(e => {
|
||||||
|
total = total + Number(e.total_material_qty)
|
||||||
|
}, 0)
|
||||||
|
if (!this.materList.length) {
|
||||||
|
total = '0'
|
||||||
|
}
|
||||||
|
let option = {
|
||||||
|
color: colors,
|
||||||
|
grid: {
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
left: '19%',
|
||||||
|
top: '50%',
|
||||||
|
text: `{a|总数（台）}\n{b|${total}}`,
|
||||||
|
textAlign: 'center',
|
||||||
|
textVerticalAlign: 'middle',
|
||||||
|
padding: 0,
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
fontSize: 8,
|
||||||
|
lineHeight: 10,
|
||||||
|
color: '#A8C3E6'
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
fontSize: 14,
|
||||||
|
lineHeight: 16,
|
||||||
|
color: '#DBE7F6'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
// type: 'scroll',
|
||||||
|
orient: 'vertical',
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
itemGap: 6,
|
||||||
|
icon: 'rect',
|
||||||
|
itemWidth: 4,
|
||||||
|
itemHeight: 4,
|
||||||
|
data: seriesName,
|
||||||
|
formatter: (name) => {
|
||||||
|
const item = seriesData.filter((item) => item.name === name)[0]
|
||||||
|
return `{a|${name}}\n{b| ${item.value + '}'}`
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
fontSize: 8,
|
||||||
|
lineHeight: 10,
|
||||||
|
padding: [0, 0, 0, 0],
|
||||||
|
wordWrap: 'break-word',
|
||||||
|
color: '#9BB9DD',
|
||||||
|
align: 'left'
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
fontSize: 8,
|
||||||
|
lineHeight: 10,
|
||||||
|
padding: [0, 0, 0, 0],
|
||||||
|
color: '#DFECFB',
|
||||||
|
align: 'left'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
clockwise: true,
|
||||||
|
hoverAnimation: false,
|
||||||
|
legendHoverLink: false,
|
||||||
|
hoverOffset: 0,
|
||||||
|
name: '外层空心圆',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['80%', '80%'],
|
||||||
|
center: ['19%', '50%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: '#4774AD',
|
||||||
|
borderWidth: 1
|
||||||
|
},
|
||||||
|
data: [{ value: 0 }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '库存量监控',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['50%', '60%'],
|
||||||
|
center: ['19%', '50%'],
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: 'RGBA(27, 58, 98, .5)',
|
||||||
|
borderWidth: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
selectedMode: true,
|
||||||
|
hoverAnimation: false,
|
||||||
|
selectedOffset: 2,
|
||||||
|
data: seriesData
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
this.myChart2.setOption(option, true)
|
||||||
|
},
|
||||||
|
setEchart3 () {
|
||||||
let barName = []
|
let barName = []
|
||||||
let barData1 = []
|
let barData1 = []
|
||||||
let barData2 = []
|
let barData2 = []
|
||||||
this.historyList.map(el => {
|
this.curList.map(el => {
|
||||||
barName.push(el.data)
|
barName.push(el.material_name)
|
||||||
barData1.push(el.total_instorage_qty)
|
barData1.push(el.total_instorage_qty)
|
||||||
barData2.push(el.total_outstorage_qty)
|
barData2.push(el.total_outstorage_qty)
|
||||||
})
|
})
|
||||||
@@ -583,34 +469,10 @@ export default {
|
|||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
interval: 0,
|
interval: 0,
|
||||||
// rotate: 45,
|
|
||||||
color: '#7591B2',
|
color: '#7591B2',
|
||||||
fontSize: 8,
|
fontSize: 8,
|
||||||
lineHeight: 6,
|
lineHeight: 6,
|
||||||
// align: 'right',
|
|
||||||
margin: 5
|
margin: 5
|
||||||
// formatter: (value) => {
|
|
||||||
// let str = ''
|
|
||||||
// let num = 5
|
|
||||||
// let valLength = value.length
|
|
||||||
// let rowNum = Math.ceil(valLength / num)
|
|
||||||
// if (rowNum > 1) {
|
|
||||||
// for (let i = 0; i < rowNum; i++) {
|
|
||||||
// let temp = ''
|
|
||||||
// let start = i * num
|
|
||||||
// let end = start + num
|
|
||||||
// if (i === rowNum - 1) {
|
|
||||||
// temp = value.substring(start, end)
|
|
||||||
// } else {
|
|
||||||
// temp = value.substring(start, end) + '\n'
|
|
||||||
// }
|
|
||||||
// str += temp
|
|
||||||
// }
|
|
||||||
// return str
|
|
||||||
// } else {
|
|
||||||
// return value
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
},
|
},
|
||||||
data: barName
|
data: barName
|
||||||
},
|
},
|
||||||
@@ -634,30 +496,26 @@ export default {
|
|||||||
type: [2, 1],
|
type: [2, 1],
|
||||||
color: '#455C86'
|
color: '#455C86'
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
max: total
|
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '入库',
|
name: '入库',
|
||||||
type: 'line',
|
type: 'bar',
|
||||||
showSymbol: false,
|
barWidth: '10',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#67D470',
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
lineStyle: {
|
|
||||||
color: '#67D470',
|
|
||||||
width: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgba(103,212,112,0.1)'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: 'rgba(103,212,112,0.74)'
|
color: 'rgba(103,212,112,0.2)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.08,
|
||||||
|
color: 'rgba(103,212,112,0.9)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(255,255,255,0.9)'
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
@@ -665,271 +523,139 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '出库',
|
name: '出库',
|
||||||
type: 'line',
|
type: 'bar',
|
||||||
showSymbol: false,
|
barWidth: '10',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#58A2E3',
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
lineStyle: {
|
|
||||||
color: '#58A2E3',
|
|
||||||
width: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgba(45,144,255,0)'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: 'rgba(45,144,255,0.85)'
|
color: 'rgba(25,128,234,0.2)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.08,
|
||||||
|
color: 'rgba(25,128,234,0.9)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(255,255,255,0.9)'
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
data: barData2
|
data: barData2
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
xAxisIndex: 0, // 这里是从X轴的0刻度开始
|
||||||
|
show: false, // 是否显示滑动条，不影响使用
|
||||||
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
||||||
|
startValue: 0, // 从头开始。
|
||||||
|
endValue: 3 // 展示到第几个。
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
this.myChart3.setOption(option, true)
|
this.myChart3.setOption(option, true)
|
||||||
},
|
},
|
||||||
setEchart4 () {
|
setEchart4 () {
|
||||||
let xAxisData = []
|
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252']
|
||||||
let seriesData = []
|
let seriesData = []
|
||||||
let colors = ['#1980EA', '#67D470', '#EF5252']
|
let seriesName = []
|
||||||
this.statisList.map(el => {
|
this.materList.map((e, i) => {
|
||||||
xAxisData.push(el.region_name)
|
seriesData.push({name: e.material_name, value: e.total_material_qty, percentage: e.percentage})
|
||||||
seriesData.push(el.count)
|
seriesName.push({name: e.material_name})
|
||||||
})
|
})
|
||||||
|
let total = 0
|
||||||
|
this.materList.map(e => {
|
||||||
|
total = total + Number(e.total_material_qty)
|
||||||
|
}, 0)
|
||||||
|
if (!this.materList.length) {
|
||||||
|
total = '0'
|
||||||
|
}
|
||||||
let option = {
|
let option = {
|
||||||
|
color: colors,
|
||||||
grid: {
|
grid: {
|
||||||
top: 22,
|
top: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
right: 0,
|
right: 0,
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
xAxis: {
|
title: {
|
||||||
type: 'category',
|
x: '16%',
|
||||||
axisTick: {
|
y: '35%',
|
||||||
show: false
|
text: '总数',
|
||||||
|
subtext: total,
|
||||||
|
textAlign: 'center',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 9,
|
||||||
|
lineHeight: 10,
|
||||||
|
color: '#A8C3E6'
|
||||||
},
|
},
|
||||||
axisLine: {
|
subtextStyle: {
|
||||||
show: true,
|
fontSize: 10,
|
||||||
lineStyle: {
|
lineHeight: 8,
|
||||||
width: 1,
|
color: '#DBE7F6'
|
||||||
color: '#3C5787'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
interval: 0,
|
|
||||||
color: '#7591B2',
|
|
||||||
fontSize: 8,
|
|
||||||
lineHeight: 6,
|
|
||||||
margin: 5
|
|
||||||
},
|
|
||||||
data: xAxisData
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
name: '产量:托',
|
|
||||||
nameTextStyle: {
|
|
||||||
fontSize: 8,
|
|
||||||
color: '#fff',
|
|
||||||
padding: [0, 0, 0, 0]
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
splitNumber: 2,
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: '#B5C5D4',
|
|
||||||
fontSize: 6
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
type: [2, 1],
|
|
||||||
color: '#455C86'
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '产量',
|
|
||||||
type: 'pictorialBar',
|
|
||||||
symbolRepeat: 'fixed',
|
|
||||||
symbolMargin: 2,
|
|
||||||
symbol: 'rect',
|
|
||||||
symbolClip: true,
|
|
||||||
symbolSize: [19, 4],
|
|
||||||
symbolPosition: 'center',
|
|
||||||
itemStyle: {
|
|
||||||
color: (params) => {
|
|
||||||
return colors[params.dataIndex]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: seriesData
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
this.myChart4.setOption(option, true)
|
|
||||||
},
|
|
||||||
setEchart5 () {
|
|
||||||
let attaData1 = []
|
|
||||||
let attaData2 = []
|
|
||||||
let ydata = []
|
|
||||||
this.loadList.map(el => {
|
|
||||||
ydata.push(el.region_name)
|
|
||||||
attaData1.push(el.material_loading_count)
|
|
||||||
attaData2.push(el.material_unloading_count)
|
|
||||||
})
|
|
||||||
let option = {
|
|
||||||
grid: {
|
|
||||||
top: 20,
|
|
||||||
left: 0,
|
|
||||||
right: 8,
|
|
||||||
bottom: 0,
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
legend: {
|
legend: {
|
||||||
|
show: true,
|
||||||
|
// type: 'scroll',
|
||||||
|
orient: 'vertical',
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
itemGap: 6,
|
||||||
icon: 'rect',
|
icon: 'rect',
|
||||||
top: '0',
|
|
||||||
right: '0',
|
|
||||||
textStyle: {
|
|
||||||
color: '#9BB9DD',
|
|
||||||
fontSize: 8,
|
|
||||||
lineHeight: 8
|
|
||||||
},
|
|
||||||
itemGap: 15,
|
|
||||||
itemWidth: 4,
|
itemWidth: 4,
|
||||||
itemHeight: 4,
|
itemHeight: 4,
|
||||||
data: [{name: '上料', itemStyle: {color: '#A68615'}}, {name: '下料', itemStyle: {color: '#4E8BFB'}}]
|
data: seriesName,
|
||||||
},
|
formatter: (name) => {
|
||||||
yAxis: {
|
const item = seriesData.filter((item) => item.name === name)[0]
|
||||||
type: 'category',
|
return `{a|${name}}\n{b| ${item.value + '}'}`
|
||||||
inverse: true,
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
},
|
||||||
axisLine: {
|
textStyle: {
|
||||||
show: true,
|
rich: {
|
||||||
lineStyle: {
|
a: {
|
||||||
width: 1,
|
fontSize: 8,
|
||||||
color: '#3C5787'
|
lineHeight: 10,
|
||||||
}
|
padding: [0, 0, 0, 0],
|
||||||
},
|
wordWrap: 'break-word',
|
||||||
axisLabel: {
|
color: '#9BB9DD',
|
||||||
interval: 0,
|
align: 'left'
|
||||||
color: '#7591B2',
|
},
|
||||||
fontSize: 8,
|
b: {
|
||||||
lineHeight: 6,
|
fontSize: 8,
|
||||||
margin: 5
|
lineHeight: 10,
|
||||||
},
|
padding: [0, 0, 0, 0],
|
||||||
data: ydata
|
color: '#DFECFB',
|
||||||
},
|
align: 'left'
|
||||||
xAxis: {
|
}
|
||||||
type: 'value',
|
|
||||||
// name: '单位:托',
|
|
||||||
nameTextStyle: {
|
|
||||||
fontSize: 8,
|
|
||||||
color: '#fff',
|
|
||||||
padding: [0, 0, 0, 0]
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
splitNumber: 4,
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: '#B5C5D4',
|
|
||||||
fontSize: 6
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
type: [2, 1],
|
|
||||||
color: '#455C86'
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [{
|
||||||
{
|
name: '库存量监控',
|
||||||
name: '上料',
|
type: 'pie',
|
||||||
type: 'bar',
|
radius: ['50%', '60%'],
|
||||||
label: {
|
center: ['19%', '50%'],
|
||||||
show: true,
|
labelLine: {
|
||||||
position: 'right',
|
show: false
|
||||||
fontSize: 8,
|
|
||||||
color: '#F5F5F5',
|
|
||||||
formatter: '{c}托'
|
|
||||||
},
|
|
||||||
barWidth: '6',
|
|
||||||
itemStyle: {
|
|
||||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: '#8C620F'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: '#C7B51C'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
},
|
|
||||||
data: attaData1
|
|
||||||
},
|
},
|
||||||
{
|
tooltip: {
|
||||||
name: '下料',
|
show: false
|
||||||
type: 'bar',
|
},
|
||||||
label: {
|
itemStyle: {
|
||||||
show: true,
|
borderColor: 'RGBA(27, 58, 98, .5)',
|
||||||
position: 'right',
|
borderWidth: 2
|
||||||
fontSize: 8,
|
},
|
||||||
color: '#F5F5F5',
|
label: {
|
||||||
formatter: '{c}托'
|
show: false
|
||||||
},
|
},
|
||||||
barWidth: '6',
|
selectedMode: 'single',
|
||||||
itemStyle: {
|
selectedOffset: 20,
|
||||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
data: seriesData
|
||||||
{
|
}]
|
||||||
offset: 0,
|
|
||||||
color: '#3261FB'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: '#6BB4FB'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
},
|
|
||||||
data: attaData2
|
|
||||||
}
|
|
||||||
],
|
|
||||||
dataZoom: [
|
|
||||||
{
|
|
||||||
yAxisIndex: 0, // 这里是从X轴的0刻度开始
|
|
||||||
show: false, // 是否显示滑动条，不影响使用
|
|
||||||
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
|
||||||
startValue: 0, // 从头开始。
|
|
||||||
endValue: 7 // 展示到第几个。
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
this.myChart5.setOption(option, true)
|
this.myChart4.setOption(option, true)
|
||||||
// this.chart5Timer = setInterval(() => {
|
|
||||||
// if (option.dataZoom[0].endValue >= ydata.length - 1) {
|
|
||||||
// option.dataZoom[0].endValue = 7
|
|
||||||
// option.dataZoom[0].startValue = 0
|
|
||||||
// } else {
|
|
||||||
// option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
|
|
||||||
// option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
|
|
||||||
// }
|
|
||||||
// this.myChart5.setOption(option, true)
|
|
||||||
// }, 2000)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -36,25 +36,29 @@
|
|||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
padding 60px 10px 10px 10px
|
padding 60px 10px 10px 10px
|
||||||
|
.n_wraper
|
||||||
|
width 100%
|
||||||
|
height calc(50% - 4px)
|
||||||
|
background-color #082B64
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.n_left_wraper
|
&:first-child
|
||||||
|
margin-bottom 8px
|
||||||
|
.l_wraper
|
||||||
width 24%
|
width 24%
|
||||||
height 100%
|
height 100%
|
||||||
.n-center_wraper
|
.r_wraper
|
||||||
width 75%
|
width 75%
|
||||||
height 100%
|
height 100%
|
||||||
|
background center / 100% 100% url('../../../images/area_a.png') no-repeat
|
||||||
|
.item_wraper
|
||||||
|
width 100%
|
||||||
|
height calc(50% - 2px)
|
||||||
|
&:first-child
|
||||||
|
margin-bottom 4px
|
||||||
.w_wraper
|
.w_wraper
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
.item_wraper
|
|
||||||
width 100%
|
|
||||||
height calc((100% - 30px) / 4)
|
|
||||||
margin-bottom 10px
|
|
||||||
&:last-child
|
|
||||||
margin-bottom 0
|
|
||||||
.item_wraper_1
|
|
||||||
height calc((200% - 20px) / 3)
|
|
||||||
.title_wraper
|
.title_wraper
|
||||||
width 100%
|
width 100%
|
||||||
height 24px
|
height 24px
|
||||||
@@ -70,7 +74,7 @@
|
|||||||
.content_wraper
|
.content_wraper
|
||||||
width 100%
|
width 100%
|
||||||
height calc(100% - 24px)
|
height calc(100% - 24px)
|
||||||
padding 8px
|
padding 4px
|
||||||
background-color rgba(30, 65, 126, 70%)
|
background-color rgba(30, 65, 126, 70%)
|
||||||
.content_wraper_2
|
.content_wraper_2
|
||||||
padding 0
|
padding 0
|
||||||
@@ -158,74 +162,4 @@
|
|||||||
height 14px
|
height 14px
|
||||||
.state_name
|
.state_name
|
||||||
width 100%
|
width 100%
|
||||||
height 20px
|
height 20px
|
||||||
.agv_wrap
|
|
||||||
display flex
|
|
||||||
justify-content space-between
|
|
||||||
width 100%
|
|
||||||
height 47%
|
|
||||||
padding-bottom 10px
|
|
||||||
.rgv_wrap
|
|
||||||
height 53%
|
|
||||||
padding-bottom 0
|
|
||||||
.agv_item
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
width 32%
|
|
||||||
padding 5px
|
|
||||||
border 1px solid #3AA2F2
|
|
||||||
border-radius 4px
|
|
||||||
box-shadow inset 0px 0px 3px 3px rgba(58, 162, 242, 40%)
|
|
||||||
.rgv_item
|
|
||||||
display: block
|
|
||||||
width 24%
|
|
||||||
.agv_left
|
|
||||||
width 33%
|
|
||||||
height 100%
|
|
||||||
padding-bottom 8px
|
|
||||||
.rgv_left
|
|
||||||
width 100%
|
|
||||||
height 20%
|
|
||||||
padding 0
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
.agv_img
|
|
||||||
height calc(100% - 30px)
|
|
||||||
background center center / 80% auto url('../../../images/agv_s.png') no-repeat
|
|
||||||
.agv_info
|
|
||||||
width 64%
|
|
||||||
.p1
|
|
||||||
height 30px
|
|
||||||
font-size: 9px;
|
|
||||||
line-height 30px
|
|
||||||
color: #78B1DE;
|
|
||||||
text-align: center;
|
|
||||||
white-space nowrap
|
|
||||||
.agv_txt
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
height 20%
|
|
||||||
background bottom center / 100% 3px url('../../../images/screen1/line_1.png') no-repeat
|
|
||||||
&:last-child
|
|
||||||
background none
|
|
||||||
.p2
|
|
||||||
font-size: 7px;
|
|
||||||
color: #84B0DA;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 700;
|
|
||||||
.p3
|
|
||||||
font-size: 8px;
|
|
||||||
color: #FFFFFF;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 700;
|
|
||||||
.rgv_img
|
|
||||||
width 50%
|
|
||||||
height 100%
|
|
||||||
background center center / 80% auto url('../../../images/rgv_s.png') no-repeat
|
|
||||||
margin-bottom 0
|
|
||||||
.rgv_info
|
|
||||||
height 80%
|
|
||||||
.rgv_txt
|
|
||||||
height 20%
|
|
||||||
Reference in New Issue
Block a user