作业动态
This commit is contained in:
熊丽君
@ -5,7 +5,7 @@
|
||||
<!-- <div style="display: flex; align-items: center; margin-bottom: 28px">
|
||||
<span>·已完成任务/完成率</span>
|
||||
<span>55/80%</span>
|
||||
<progressBar :percentage="89" />
|
||||
<progressBar :percentage="" />
|
||||
</div> -->
|
||||
<div class="than">
|
||||
<span style="font-size: 25px; margin-right: 3px">·</span>
|
||||
@ -78,8 +78,7 @@
|
||||
<span style="font-size: 25px; margin-right: 3px">·</span>
|
||||
<span>已完成任务/完成率</span>
|
||||
<i class="num">{{ totalAndRateTwo.total }}/{{ totalAndRateTwo.rate }}%</i>
|
||||
<progressBar :percentage="70" />
|
||||
<el-progress :show-text="false" :stroke-width="6" :percentage="70"></el-progress>
|
||||
<progressBar :percentage="totalAndRateTwo.rate" />
|
||||
</div>
|
||||
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||
</el-row>
|
||||
|
||||
@ -457,6 +457,28 @@ export default {
|
||||
::v-deep .el-progress-bar__inner {
|
||||
background: linear-gradient(180deg, #fad961 0%, #f76b1c 100%) !important;
|
||||
}
|
||||
|
||||
::v-deep .el-date-editor {
|
||||
border-radius: 0;
|
||||
box-shadow: none !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
vertical-align: middle;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
.el-range-input,
|
||||
.el-range-separator {
|
||||
color: #fff;
|
||||
}
|
||||
.el-range-editor.is-active {
|
||||
border-color: #fff !important;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.warp-scroll {
|
||||
height: 215px;
|
||||
width: 100%;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 462 KiB After Width: | Height: | Size: 424 KiB |
@ -1,14 +1,234 @@
|
||||
<template>
|
||||
<container3 title="全厂工房作业信息" :width="768" :height="975">
|
||||
<div><img style="width:100%;height:100%" src="./center-bg.png" alt="" srcset=""></div>
|
||||
</container3>
|
||||
<container3 title="全厂工房作业信息" :width="768" :height="975">
|
||||
<div>
|
||||
<img v-if="pic.length" style="width: 100%; height: 100%" :src="pic" alt="" srcset="" />
|
||||
<img v-else style="width: 100%; height: 100%" src="./center-bg.png" alt="" srcset="" />
|
||||
</div>
|
||||
<el-popover
|
||||
class="icon_img"
|
||||
:style="{ top: item.ordinate + '%', left: item.abscissa + '%' }"
|
||||
v-for="(item, index) in listData"
|
||||
:key="item.id"
|
||||
placement="bottom"
|
||||
width="494"
|
||||
trigger="click"
|
||||
@show="handleShow(index)"
|
||||
@hide="hadleHide"
|
||||
>
|
||||
<div>
|
||||
<div class="box">
|
||||
<div class="tit">
|
||||
<img src="./icon2.png" alt="" />
|
||||
<span>总装车间</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cont">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="11">
|
||||
<!-- <el-image style="width: 100px; height: 100px" :src="item.avAddress" fit="contain"></el-image> -->
|
||||
<video id="videoElement" muted controls autoplay>
|
||||
Your browser is too old which doesn't support HTML5 video.
|
||||
</video>
|
||||
</el-col>
|
||||
<el-col :span="13">
|
||||
<div class="user_box" style="">作业人员</div>
|
||||
<!-- singleWidth: 50 -->
|
||||
<vue-seamless-scroll
|
||||
ref="seamlessScroll"
|
||||
:data="listData2"
|
||||
:class-option="{
|
||||
step: 0.5,
|
||||
direction: 2,
|
||||
}"
|
||||
class="warp"
|
||||
>
|
||||
<ul class="ul-item">
|
||||
<li class="li-item" v-for="(row, index) in listData2" :key="index">
|
||||
<!-- <el-image style="width: 42px; height: 42px" :src="row.avatar" fit="cover"></el-image> -->
|
||||
<img style="width: 42px; height: 42px" :src="row.avatar" />
|
||||
<el-tooltip effect="dark" :content="row.nickname" placement="bottom">
|
||||
<div class="one_hidden">{{ row.nickname }}</div>
|
||||
</el-tooltip>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<div class="user_box">
|
||||
<span>作业内容</span>
|
||||
<span>{{ item.errorInfo }}</span>
|
||||
</div>
|
||||
<div style="background-color: #2a437d; padding: 10px 8px; color: #fff">{{ item.jobContent }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="text" style="padding: 0" slot="reference">
|
||||
<img style="width: 100%; height: 100%" src="./icon.png" alt="" />
|
||||
</el-button>
|
||||
</el-popover>
|
||||
</container3>
|
||||
</template>
|
||||
<script>
|
||||
import flvjs from 'flv.js'
|
||||
|
||||
import container3 from './components/container3/index.vue'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
import echarts from 'echarts'
|
||||
export default {
|
||||
components: {
|
||||
container3,//#endregion,
|
||||
},
|
||||
components: {
|
||||
container3, //#endregion,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pic:'',
|
||||
listData: [],
|
||||
listData2: [],
|
||||
flvPlayer: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getHxWorkHomePic',
|
||||
}).then(({ data }) => {
|
||||
this.listData = data
|
||||
})
|
||||
},
|
||||
handleShow(index) {
|
||||
this.listData2 = this.listData[index]['userList']
|
||||
if (flvjs.isSupported()) {
|
||||
this.flvPlayer = flvjs.createPlayer(
|
||||
{
|
||||
type: 'flv', // 媒体类型 flv 或 mp4
|
||||
isLive: true, // 是否为直播流
|
||||
fluid: true,
|
||||
// hasAudio: true, // 是否开启声音
|
||||
stashInitialSize: 128, // 减少首桢显示等待时长
|
||||
url: this.listData[index]['avAddress'],
|
||||
},
|
||||
{
|
||||
enableStashBuffer: false,
|
||||
fixAudioTimestampGap: false,
|
||||
isLive: true,
|
||||
}
|
||||
)
|
||||
let all = document.querySelectorAll('#videoElement')
|
||||
let videoElement = all[all.length - 1]
|
||||
this.flvPlayer.attachMediaElement(videoElement)
|
||||
this.flvPlayer.load()
|
||||
this.flvPlayer.play()
|
||||
}
|
||||
},
|
||||
hadleHide() {
|
||||
this.flvPlayer.player.pause()
|
||||
this.flvPlayer.player.unload()
|
||||
this.flvPlayer.player.detachMediaElement()
|
||||
this.flvPlayer.player.destroy()
|
||||
this.flvPlayer.player = null
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.flvPlayer.player.pause()
|
||||
this.flvPlayer.player.unload()
|
||||
this.flvPlayer.player.detachMediaElement()
|
||||
this.flvPlayer.player.destroy()
|
||||
this.flvPlayer.player = null
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.request({
|
||||
url: '/hx/bigPic/getByType',
|
||||
method: 'get',
|
||||
params: { type: 2}
|
||||
}).then(res => {
|
||||
if (200 == res.code) {
|
||||
this.pic = res.data.pic;
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.icon_img {
|
||||
position: absolute;
|
||||
}
|
||||
.el-popover {
|
||||
.box {
|
||||
width: 177px;
|
||||
height: 0;
|
||||
border-width: 0px 20px 30px 0px;
|
||||
border-style: none solid solid;
|
||||
border-color: transparent transparent rgba(10, 90, 132, 1);
|
||||
.tit {
|
||||
height: 30px;
|
||||
padding-left: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
margin-left: 8px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cont {
|
||||
background-color: #0d1049;
|
||||
padding: 8px 13px 11px 16px;
|
||||
video {
|
||||
width: 100%;
|
||||
height: 143px;
|
||||
}
|
||||
.user_box {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 16px;
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
rgba(10, 16, 75, 0) 0%,
|
||||
rgba(8, 56, 105, 0.11) 0%,
|
||||
rgba(6, 116, 151, 0.91) 60%,
|
||||
#00ffff 146%
|
||||
);
|
||||
span:nth-child(1) {
|
||||
float: left;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.warp {
|
||||
// height: 100px;
|
||||
margin: 0 auto;
|
||||
margin-top: 25px;
|
||||
overflow: hidden;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
&.ul-item {
|
||||
display: flex;
|
||||
.li-item {
|
||||
width: 42px;
|
||||
// height: 120px;
|
||||
margin-right: 8px;
|
||||
// line-height: 120px;
|
||||
// background-color: #999;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
.one_hidden {
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
src/views/bigScreen/scientific/tab1/icon.png
Normal file
BIN
src/views/bigScreen/scientific/tab1/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/views/bigScreen/scientific/tab1/icon2.png
Normal file
BIN
src/views/bigScreen/scientific/tab1/icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 510 B |
@ -1,118 +1,112 @@
|
||||
<template>
|
||||
<container1 title="全厂资源动态">
|
||||
<div class="trends">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="trends-item">
|
||||
<div class="trends-item-icon">
|
||||
<img src="./img/trends-item-icon1.png" alt="">
|
||||
</div>
|
||||
<div class="trends-item-content">
|
||||
<div class="tit">作业工房/总数</div>
|
||||
<div class="value">46/<span class="small">60</span></div>
|
||||
<div class="progressBar">
|
||||
<progressBar :percentage="70" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="trends-item">
|
||||
<div class="trends-item-icon">
|
||||
<img src="./img/trends-item-icon2.png" alt="">
|
||||
</div>
|
||||
<div class="trends-item-content">
|
||||
<div class="tit">人员数量/出勤率</div>
|
||||
<div class="value">754/<span class="small">89%</span></div>
|
||||
<div class="progressBar">
|
||||
<progressBar :percentage="89" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<div style="height:27px"></div>
|
||||
</el-col>
|
||||
<container1 title="全厂资源动态">
|
||||
<div class="trends">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="trends-item">
|
||||
<div class="trends-item-icon">
|
||||
<img src="./img/trends-item-icon1.png" alt="" />
|
||||
</div>
|
||||
<div class="trends-item-content">
|
||||
<div class="tit">作业工房/总数</div>
|
||||
<div class="value">
|
||||
{{ dataInfo.workingWorkshopTotal }}/<span class="small">{{ dataInfo.workshopTotal }}</span>
|
||||
</div>
|
||||
<div class="progressBar">
|
||||
<progressBar :percentage="percentage" v-if="percentage" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="trends-item">
|
||||
<div class="trends-item-icon">
|
||||
<img src="./img/trends-item-icon2.png" alt="" />
|
||||
</div>
|
||||
<div class="trends-item-content">
|
||||
<div class="tit">人员数量/出勤率</div>
|
||||
<div class="value">
|
||||
{{ dataInfo.realAttendance }}/<span class="small">{{ (dataInfo.attendanceRate - 0).toFixed(0) }}%</span>
|
||||
</div>
|
||||
<div class="progressBar">
|
||||
<progressBar :percentage="dataInfo.attendanceRate" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<div style="height: 27px"></div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="trends-item">
|
||||
<div class="trends-item-icon">
|
||||
<img src="./img/trends-item-icon3.png" alt="">
|
||||
</div>
|
||||
<div class="trends-item-content">
|
||||
<div class="tit">设备运行数量/运行率</div>
|
||||
<div class="value">324/<span class="small">72%</span></div>
|
||||
<div class="progressBar">
|
||||
<progressBar :percentage="72" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="trends-item">
|
||||
<div class="trends-item-icon">
|
||||
<img src="./img/trends-item-icon2.png" alt="">
|
||||
</div>
|
||||
<div class="trends-item-content">
|
||||
<div class="tit">人员数量/出勤率</div>
|
||||
<div class="value">77%</div>
|
||||
<div class="progressBar">
|
||||
<progressBar :percentage="77" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="height:45px"></div>
|
||||
<div class="car">
|
||||
<div class="car-tit">
|
||||
<div class="left">被使用车辆总数</div>
|
||||
<div class="right">89<span>辆</span></div>
|
||||
</div>
|
||||
<div style="margin: 5px 0 10px 0;">
|
||||
<progressBar :percentage="30" :strokeWidth="12" />
|
||||
</div>
|
||||
<div class="describe">
|
||||
<div class="left">总车辆数：100</div>
|
||||
<div class="right">使用率：89%</div>
|
||||
</div>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="listData" class="warp" :class-option="{
|
||||
singleHeight: 48
|
||||
}">
|
||||
<ul class="item">
|
||||
<li>
|
||||
<el-row>
|
||||
<el-col :span="10"><img src="./img/1.png">车辆一</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="state success">使用中</div>
|
||||
</el-col>
|
||||
<el-col :span="8" style="text-align:right"><img src="./img/2.png">A车库</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
<li>
|
||||
<el-row>
|
||||
<el-col :span="10"><img src="./img/1.png">车辆二</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="state success">闲置</div>
|
||||
</el-col>
|
||||
<el-col :span="8" style="text-align:right"><img src="./img/2.png">A车库</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
<li>
|
||||
<el-row>
|
||||
<el-col :span="10"><img src="./img/1.png">车辆三</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="state fault">故障</div>
|
||||
</el-col>
|
||||
<el-col :span="8" style="text-align:right"><img src="./img/2.png">A车库</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</container1>
|
||||
<el-col :span="12">
|
||||
<div class="trends-item">
|
||||
<div class="trends-item-icon">
|
||||
<img src="./img/trends-item-icon3.png" alt="" />
|
||||
</div>
|
||||
<div class="trends-item-content">
|
||||
<div class="tit">设备运行数量/运行率</div>
|
||||
<div class="value">
|
||||
{{ dataInfo.equipmentRunTotal }}/<span class="small">{{ dataInfo.equipmentRunRate }}%</span>
|
||||
</div>
|
||||
<div class="progressBar">
|
||||
<progressBar :percentage="dataInfo.equipmentRunRate" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="trends-item">
|
||||
<div class="trends-item-icon">
|
||||
<img src="./img/trends-item-icon2.png" alt="" />
|
||||
</div>
|
||||
<div class="trends-item-content">
|
||||
<div class="tit">正常采集率</div>
|
||||
<div class="value">{{ dataInfo.videoCollectionRate }}%</div>
|
||||
<div class="progressBar">
|
||||
<progressBar :percentage="dataInfo.videoCollectionRate" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="height: 45px"></div>
|
||||
<div class="car">
|
||||
<div class="car-tit">
|
||||
<div class="left">被使用车辆总数</div>
|
||||
<div class="right">{{ carTotal.useTotal }}<span>辆</span></div>
|
||||
</div>
|
||||
<div style="margin: 5px 0 10px 0">
|
||||
<progressBar :percentage="carTotal.useTotal / carTotal.total || 0" :strokeWidth="12" />
|
||||
</div>
|
||||
<div class="describe">
|
||||
<div class="left">总车辆数：{{ carTotal.total }}</div>
|
||||
<div class="right">使用率：{{ carTotal.useTotal / carTotal.total || 0 }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<vue-seamless-scroll
|
||||
ref="seamlessScroll"
|
||||
:data="listData"
|
||||
class="warp"
|
||||
:class-option="{
|
||||
singleHeight: 48,
|
||||
}"
|
||||
>
|
||||
<ul class="item">
|
||||
<li v-for="item in listData" :key="item.id">
|
||||
<el-row>
|
||||
<el-col :span="10"><img src="./img/1.png" />{{ item.carName }}</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="state success" v-if="item.carStatus == '使用中'">{{ item.carStatus }}</div>
|
||||
<div class="state info" v-if="item.carStatus == '闲置'">{{ item.carStatus }}</div>
|
||||
<div class="state fault" v-if="item.carStatus == '故障'">{{ item.carStatus }}</div>
|
||||
</el-col>
|
||||
<el-col :span="8" style="text-align: right"><img src="./img/2.png" />{{ item.nowAddress }}</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</container1>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -120,166 +114,196 @@ import container1 from './components/container1/index.vue'
|
||||
import progressBar from '@/views/bigScreen/components/progress/index.vue'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
export default {
|
||||
components: {
|
||||
container1,//#endregion,
|
||||
progressBar,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
}
|
||||
}
|
||||
components: {
|
||||
container1, //#endregion,
|
||||
progressBar,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
listData: [],
|
||||
dataInfo: {},
|
||||
carTotal: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
percentage() {
|
||||
return (this.dataInfo.workingWorkshopTotal / this.dataInfo.workshopTotal) * 100
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getHxFactoryResourcesPic',
|
||||
}).then(({ data }) => {
|
||||
this.dataInfo = data
|
||||
})
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getHxCarUsePic1',
|
||||
}).then(({ data }) => {
|
||||
this.carTotal = data
|
||||
})
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getHxCarUsePic2',
|
||||
}).then(({ data }) => {
|
||||
this.listData = data
|
||||
this.$refs.seamlessScroll.reset()
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.trends {
|
||||
padding: 0 25px;
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
.trends-item {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
.trends-item-icon {
|
||||
width: 50px;
|
||||
height: 111px;
|
||||
background-image: url(./img/trends-item-bg.png);
|
||||
background-size: cover;
|
||||
background-position: center right;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
height: 32px;
|
||||
}
|
||||
width: 50px;
|
||||
height: 111px;
|
||||
background-image: url(./img/trends-item-bg.png);
|
||||
background-size: cover;
|
||||
background-position: center right;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
.trends-item-content {
|
||||
margin-left: 15px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-betweens;
|
||||
.progressBar {
|
||||
height: 20px;
|
||||
width: 100px;
|
||||
}
|
||||
.value {
|
||||
flex: 1;
|
||||
}
|
||||
.tit {
|
||||
padding: 0 10px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
line-height: 32px;
|
||||
background-image: url(./img/tit-bg.png);
|
||||
background-size: 140px 32px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.value {
|
||||
font-size: 36px;
|
||||
font-family: Roboto-Medium, Roboto;
|
||||
font-weight: 500;
|
||||
color: #55c5a2;
|
||||
.small {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
margin-left: 15px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-betweens;
|
||||
.progressBar {
|
||||
height: 20px;
|
||||
width: 100px;
|
||||
}
|
||||
.value {
|
||||
flex: 1;
|
||||
}
|
||||
.tit {
|
||||
padding: 0 10px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
line-height: 32px;
|
||||
background-image: url(./img/tit-bg.png);
|
||||
background-size: 140px 32px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.value {
|
||||
font-size: 36px;
|
||||
font-family: Roboto-Medium, Roboto;
|
||||
font-weight: 500;
|
||||
color: #55c5a2;
|
||||
.small {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.car {
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
.car-tit {
|
||||
.right {
|
||||
font-size: 25px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #1fe7e5;
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #f4f4f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.describe {
|
||||
font-size: 15px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
div {
|
||||
overflow: hidden;
|
||||
}
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
.car-tit {
|
||||
.right {
|
||||
font-size: 25px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #1fe7e5;
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #f4f4f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.describe {
|
||||
font-size: 15px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
div {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
height: 128px;
|
||||
width: 100%;
|
||||
margin: 10px auto 0 auto;
|
||||
overflow: hidden;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
li,
|
||||
a {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
}
|
||||
li {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
display: block;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
|
||||
padding-left: 20px;
|
||||
margin: 0 0 16px 0;
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.state {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 12px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #a9b8c5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.success::before {
|
||||
background: #1890ff;
|
||||
}
|
||||
height: 128px;
|
||||
width: 100%;
|
||||
margin: 10px auto 0 auto;
|
||||
overflow: hidden;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
li,
|
||||
a {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
}
|
||||
li {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
display: block;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
|
||||
padding-left: 20px;
|
||||
margin: 0 0 16px 0;
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.state {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 12px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #a9b8c5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.success::before {
|
||||
background: #1890ff;
|
||||
}
|
||||
|
||||
&.fault::before {
|
||||
background: #f75f53;
|
||||
}
|
||||
&.free::before {
|
||||
background: #a9b8c5;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.fault::before {
|
||||
background: #f75f53;
|
||||
}
|
||||
&.free::before {
|
||||
background: #a9b8c5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,34 +1,53 @@
|
||||
<template>
|
||||
<container2 title="本周计划">
|
||||
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||
</container2>
|
||||
<container2 title="本周计划">
|
||||
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||
</container2>
|
||||
</template>
|
||||
<script>
|
||||
import container2 from './components/container2/index.vue'
|
||||
import echarts from 'echarts'
|
||||
export default {
|
||||
components: {
|
||||
container2,//#endregion,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
components: {
|
||||
container2, //#endregion,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.setOptions()
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getHxWeekPlanUsePic',
|
||||
}).then(({ data }) => {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.setOptions(data)
|
||||
})
|
||||
},
|
||||
setOptions() {
|
||||
setOptions(resData) {
|
||||
// realCharge // 装药
|
||||
// realDeliver // 交付
|
||||
// realFlawDetection // 探伤
|
||||
// realHousing // 壳体入厂
|
||||
let real = [] // 实际
|
||||
let target = [] // 目标
|
||||
let rate = [] // 率
|
||||
target.push(resData.targetFlawDetection)
|
||||
target.push(resData.targetCharge)
|
||||
target.push(resData.targetDeliver)
|
||||
target.push(resData.targetHousing)
|
||||
real.push(resData.flawDetectionRate)
|
||||
real.push(resData.chargeRate)
|
||||
real.push(resData.deliverRate)
|
||||
real.push(resData.housingRate)
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
// trigger: 'axis',
|
||||
trigger: 'axis',
|
||||
// formatter: '{a1}<br/>{b1}：{c1}',
|
||||
},
|
||||
// legend: {
|
||||
@ -46,12 +65,7 @@ export default {
|
||||
bottom: 10,
|
||||
},
|
||||
xAxis: {
|
||||
data: [
|
||||
'探伤',
|
||||
'装药',
|
||||
'交付',
|
||||
'壳体入厂',
|
||||
],
|
||||
data: ['探伤', '装药', '交付', '壳体入厂'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
@ -65,27 +79,27 @@ export default {
|
||||
// },
|
||||
color: ['#ccc', 'red'],
|
||||
yAxis: {
|
||||
name: '',
|
||||
splitLine: {
|
||||
show: true,
|
||||
// 改变轴线颜色
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['rgba(255, 255, 255,.5)'],
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}%',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
name: '',
|
||||
splitLine: {
|
||||
show: true,
|
||||
// 改变轴线颜色
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['rgba(255, 255, 255,.5)'],
|
||||
},
|
||||
},
|
||||
// axisLabel: {
|
||||
// formatter: '{value}%',
|
||||
// },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '完成率',
|
||||
name: '目标',
|
||||
type: 'bar',
|
||||
z: '-1',
|
||||
barGap: '-100%',
|
||||
@ -93,7 +107,7 @@ export default {
|
||||
itemStyle: {
|
||||
color: 'rgba(126, 167, 252, .3)',
|
||||
},
|
||||
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
|
||||
data: target,
|
||||
},
|
||||
{
|
||||
name: '数量',
|
||||
@ -103,7 +117,7 @@ export default {
|
||||
itemStyle: {
|
||||
color: '#7EA7FC',
|
||||
},
|
||||
data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
|
||||
data: real,
|
||||
},
|
||||
// {
|
||||
// name: '目标',
|
||||
@ -120,6 +134,6 @@ export default {
|
||||
],
|
||||
})
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,311 +1,302 @@
|
||||
<template>
|
||||
<container3 title="全厂作业明细" :width="535" :height="975">
|
||||
<vue-seamless-scroll :data="listData" class="warp" :class-option="{
|
||||
singleHeight: 84
|
||||
}">
|
||||
<ul>
|
||||
<li class="item">
|
||||
<div class="item-tit">工房一</div>
|
||||
<div class="item-content">
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间一</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">工序:</span><span class="text-val">车工</span></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间一</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">危险级别:</span><span class="text-val level1">一级</span></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item active">
|
||||
<div class="item-tit">工房二</div>
|
||||
<div class="item-content">
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间二</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">工序:</span><span class="text-val">车工</span></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间二</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">危险级别:</span><span class="text-val level2">二级</span></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item">
|
||||
<div class="item-tit">工房三</div>
|
||||
<div class="item-content">
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间三</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">工序:</span><span class="text-val">车工</span></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间一</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">危险级别:</span><span class="text-val level3">三级</span></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item">
|
||||
<div class="item-tit">工房三</div>
|
||||
<div class="item-content">
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间三</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">工序:</span><span class="text-val">车工</span></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间一</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">危险级别:</span><span class="text-val level3">三级</span></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item">
|
||||
<div class="item-tit">工房三</div>
|
||||
<div class="item-content">
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间三</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">工序:</span><span class="text-val">车工</span></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间一</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">危险级别:</span><span class="text-val level3">三级</span></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
<div class="sub">
|
||||
<div class="sub-left">
|
||||
<div class="sub-tit"><img src="./img/sub/sub1.png" alt="">装药当前作业内容</div>
|
||||
<div class="sub-content">
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">编 号：</div>
|
||||
<div class="sub-item-val">12345</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">称 量：</div>
|
||||
<div class="sub-item-val">第一锅</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">混 合：</div>
|
||||
<div class="sub-item-val">第一锅</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">浇 注：</div>
|
||||
<div class="sub-item-val">第一锅</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">总体推迟时间：</div>
|
||||
<div class="sub-item-val">1972-02-04</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">倒班车：</div>
|
||||
<div class="sub-item-val">正在XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-right">
|
||||
<div class="sub-tit"><img src="./img/sub/sub2.png" alt="">酯生产量</div>
|
||||
<div class="sub-content">
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">XX年XX轮XX生产</div>
|
||||
<div class="sub-item-val">12345</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">开车时间：</div>
|
||||
<div class="sub-item-val">2005-12-12</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">预计结束时间：</div>
|
||||
<div class="sub-item-val">2025-12-12</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">酯生产量：</div>
|
||||
<div class="sub-item-val">XX吨</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">粘合剂干燥量：</div>
|
||||
<div class="sub-item-val">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</container3>
|
||||
<container3 title="全厂作业明细" :width="535" :height="975">
|
||||
<vue-seamless-scroll
|
||||
:data="listData"
|
||||
class="warp"
|
||||
:class-option="{
|
||||
singleHeight: 84,
|
||||
}"
|
||||
>
|
||||
<ul>
|
||||
<li class="item" :class="item.dangerLevel == '一级' ? 'active' : ''" v-for="item in listData" :key="item.id">
|
||||
<div class="item-tit">{{ item.workHome }}</div>
|
||||
<div class="item-content">
|
||||
<el-row>
|
||||
<el-col :span="12"
|
||||
><span class="text-tit">车间:</span><span class="text-val">{{ item.workshop }}</span></el-col
|
||||
>
|
||||
<el-col :span="12"
|
||||
><span class="text-tit">产品:</span><span class="text-val">{{ item.product }}</span></el-col
|
||||
>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"
|
||||
><span class="text-tit">工序:</span><span class="text-val">{{ item.procedure }}</span></el-col
|
||||
>
|
||||
<el-col :span="12">
|
||||
<span class="text-tit">危险级别:</span>
|
||||
<span class="text-val level1" v-if="item.dangerLevel == '一级'">{{ item.dangerLevel }}</span>
|
||||
<span class="text-val level2" v-if="item.dangerLevel == '二级'">{{ item.dangerLevel }}</span>
|
||||
<span class="text-val level3" v-if="item.dangerLevel == '三级'">{{ item.dangerLevel }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
<div class="sub">
|
||||
<div class="sub-left">
|
||||
<div class="sub-tit"><img src="./img/sub/sub1.png" alt="" />装药当前作业内容</div>
|
||||
<div class="sub-content">
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">编 号：</div>
|
||||
<div class="sub-item-val">{{ oneData.numberNo }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">称 量：</div>
|
||||
<div class="sub-item-val">{{ oneData.weighing }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">混 合：</div>
|
||||
<div class="sub-item-val">{{ oneData.blend }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">浇 注：</div>
|
||||
<div class="sub-item-val">{{ oneData.pouring }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">总体推迟时间：</div>
|
||||
<div class="sub-item-val">{{ oneData.createTime }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">倒班车：</div>
|
||||
<div class="sub-item-val">{{ oneData.reverseBus }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-right">
|
||||
<div class="sub-tit"><img src="./img/sub/sub2.png" alt="" />酯生产量</div>
|
||||
<div class="sub-content">
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">{{ twoData.jobContent }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">开车时间：</div>
|
||||
<div class="sub-item-val">{{ twoData.driveDate }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">预计结束时间：</div>
|
||||
<div class="sub-item-val">{{ twoData.forecastEndDate }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">酯生产量：</div>
|
||||
<div class="sub-item-val">{{ twoData.esterProduction }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">粘合剂干燥量：</div>
|
||||
<div class="sub-item-val">{{ twoData.cleanStatus }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</container3>
|
||||
</template>
|
||||
<script>
|
||||
import container3 from './components/container3/index.vue'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
export default {
|
||||
components: {
|
||||
container3,//#endregion,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
}
|
||||
}
|
||||
components: {
|
||||
container3, //#endregion,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
listData: [],
|
||||
oneData: {},
|
||||
twoData: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
// 全厂作业明细
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getHxJobDetailsPic',
|
||||
}).then(({ data }) => {
|
||||
this.listData = data
|
||||
})
|
||||
// 装药当前作业内容
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getChargeJobContentPic',
|
||||
}).then(({ data }) => {
|
||||
this.oneData = data
|
||||
})
|
||||
},
|
||||
getTwoList() {
|
||||
// 酯生产量
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getHxEsterProductionPic',
|
||||
}).then(({ data }) => {
|
||||
this.twoData = data
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getTwoList()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
height: 416px;
|
||||
width: 100%;
|
||||
margin: 10px auto 0 auto;
|
||||
overflow: hidden;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
li,
|
||||
a {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
}
|
||||
li {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
display: block;
|
||||
height: 40px;
|
||||
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
|
||||
margin: 0 0 4px 0;
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
box-shadow: inset 0px 0px 20px 0px rgba(0, 255, 255, 0.75);
|
||||
background: #0a1047;
|
||||
height: 80px;
|
||||
&.active {
|
||||
box-shadow: inset 0px 0px 20px 0px #ffd082;
|
||||
}
|
||||
.item-tit {
|
||||
text-align: center;
|
||||
width: 124px;
|
||||
height: 80px;
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #00ffff;
|
||||
line-height: 80px;
|
||||
background: rgba(0, 255, 255, 0.14);
|
||||
}
|
||||
&.active .item-tit {
|
||||
color: #ffd082;
|
||||
background: rgba(255, 208, 130, 0.14);
|
||||
}
|
||||
.item-content {
|
||||
flex: 1;
|
||||
line-height: 30px;
|
||||
padding: 10px 25px;
|
||||
}
|
||||
.text-tit {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #00ffff;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.text-val {
|
||||
font-size: 14px;
|
||||
font-family: PingFang-SC-Regular, PingFang-SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
&.active .text-tit {
|
||||
color: #ffd082;
|
||||
}
|
||||
height: 416px;
|
||||
width: 100%;
|
||||
margin: 10px auto 0 auto;
|
||||
overflow: hidden;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
li,
|
||||
a {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
}
|
||||
li {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
display: block;
|
||||
height: 40px;
|
||||
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
|
||||
margin: 0 0 4px 0;
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
box-shadow: inset 0px 0px 20px 0px rgba(0, 255, 255, 0.75);
|
||||
background: #0a1047;
|
||||
height: 80px;
|
||||
&.active {
|
||||
box-shadow: inset 0px 0px 20px 0px #ffd082;
|
||||
}
|
||||
.item-tit {
|
||||
text-align: center;
|
||||
width: 124px;
|
||||
height: 80px;
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #00ffff;
|
||||
line-height: 80px;
|
||||
background: rgba(0, 255, 255, 0.14);
|
||||
}
|
||||
&.active .item-tit {
|
||||
color: #ffd082;
|
||||
background: rgba(255, 208, 130, 0.14);
|
||||
}
|
||||
.item-content {
|
||||
flex: 1;
|
||||
line-height: 30px;
|
||||
padding: 10px 25px;
|
||||
}
|
||||
.text-tit {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #00ffff;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.text-val {
|
||||
font-size: 14px;
|
||||
font-family: PingFang-SC-Regular, PingFang-SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
&.active .text-tit {
|
||||
color: #ffd082;
|
||||
}
|
||||
|
||||
.level1 {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #f64f58;
|
||||
font-size: 14px;
|
||||
color: #f64f58;
|
||||
line-height: 1;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
.level2 {
|
||||
display: inline-block;
|
||||
.level1 {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #f64f58;
|
||||
font-size: 14px;
|
||||
color: #f64f58;
|
||||
line-height: 1;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
.level2 {
|
||||
display: inline-block;
|
||||
|
||||
border-radius: 2px;
|
||||
border: 1px solid #fa8c16;
|
||||
font-size: 14px;
|
||||
color: #fa8c16;
|
||||
line-height: 1;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
.level2 {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #fa8c16;
|
||||
font-size: 14px;
|
||||
color: #fa8c16;
|
||||
line-height: 1;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
.level3 {
|
||||
display: inline-block;
|
||||
|
||||
border-radius: 2px;
|
||||
border: 1px solid #91d5fe;
|
||||
font-size: 14px;
|
||||
color: #91d5fe;
|
||||
line-height: 1;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
border-radius: 2px;
|
||||
border: 1px solid #91d5fe;
|
||||
font-size: 14px;
|
||||
color: #91d5fe;
|
||||
line-height: 1;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sub {
|
||||
overflow: hidden;
|
||||
margin-top: 16px;
|
||||
& > div {
|
||||
width: 260px;
|
||||
height: 472px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sub-left {
|
||||
float: left;
|
||||
}
|
||||
.sub-right {
|
||||
float: right;
|
||||
}
|
||||
.sub-tit {
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
rgba(10, 16, 75, 0) 0%,
|
||||
rgba(8, 56, 105, 0.11) 33%,
|
||||
rgba(6, 116, 151, 0.91) 75%,
|
||||
#00ffff 100%
|
||||
);
|
||||
}
|
||||
.sub-content {
|
||||
flex: 1;
|
||||
box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
|
||||
background-color: rgba(139, 177, 237, 0.15);
|
||||
}
|
||||
.sub-item {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
padding: 0 32px;
|
||||
margin: 16px 0;
|
||||
.sub-item-tit {
|
||||
color: #00ffff;
|
||||
}
|
||||
}
|
||||
overflow: hidden;
|
||||
margin-top: 16px;
|
||||
& > div {
|
||||
width: 260px;
|
||||
height: 472px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sub-left {
|
||||
float: left;
|
||||
}
|
||||
.sub-right {
|
||||
float: right;
|
||||
}
|
||||
.sub-tit {
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
rgba(10, 16, 75, 0) 0%,
|
||||
rgba(8, 56, 105, 0.11) 33%,
|
||||
rgba(6, 116, 151, 0.91) 75%,
|
||||
#00ffff 100%
|
||||
);
|
||||
}
|
||||
.sub-content {
|
||||
flex: 1;
|
||||
box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
|
||||
background-color: rgba(139, 177, 237, 0.15);
|
||||
}
|
||||
.sub-item {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
padding: 0 32px;
|
||||
margin: 16px 0;
|
||||
.sub-item-tit {
|
||||
color: #00ffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user