xuhaoyun
1 year ago
parent
58684fb482
commit
08a848bc8e
|
After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 743 KiB After Width: | Height: | Size: 668 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 29 KiB |
@ -0,0 +1,160 @@
|
|||||||
|
<template>
|
||||||
|
<div class="cbdt">
|
||||||
|
<div class="titleBox">
|
||||||
|
<div class="titleText">{{ companyData.companyName }} <div class="tiaozhuanBtn" @click="toDangan()">档案 <img
|
||||||
|
src="../../assets/companyCanban/跳转.png" alt=""></div>
|
||||||
|
</div>
|
||||||
|
<el-tabs type="border-card" class="topTabs" v-model="topTabsName" @tab-click="getList()">
|
||||||
|
<el-tab-pane label="月度" name="month"></el-tab-pane>
|
||||||
|
<el-tab-pane label="季度" name="season"></el-tab-pane>
|
||||||
|
<el-tab-pane label="年度" name="year"></el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ['companyId', 'companyData'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
companyID: this.companyId,
|
||||||
|
companydata: this.companyData,
|
||||||
|
topTabsName: 'month',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getList() {
|
||||||
|
|
||||||
|
},
|
||||||
|
toDangan() {
|
||||||
|
sessionStorage.setItem('companyID', this.companyData.id)
|
||||||
|
sessionStorage.setItem('companyName', this.companyData.companyName)
|
||||||
|
this.$router.push({
|
||||||
|
name: 'archives',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.cbdt {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(62.06% + 20px);
|
||||||
|
background: url('~@/assets/companyCanban/编组 20312.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: 5px;
|
||||||
|
|
||||||
|
.titleBox {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: url('~@/assets/companyCanban/标题.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: AlimamaShuHeiTi;
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.titleText {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.tiaozhuanBtn {
|
||||||
|
position: absolute;
|
||||||
|
right: -60px;
|
||||||
|
bottom: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #4BCCFF;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 14px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/.el-tabs--border-card {
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
border: 0;
|
||||||
|
height: 30px;
|
||||||
|
// width: calc(100% - 40px);
|
||||||
|
width: 210px;
|
||||||
|
margin: 0;
|
||||||
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
left: 20px;
|
||||||
|
|
||||||
|
.el-tabs__header {
|
||||||
|
display: inline-block;
|
||||||
|
width: auto;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
|
||||||
|
// background: linear-gradient(180deg, rgba(234, 241, 248, 0.1) 0%, rgba(208, 222, 238, 0.1) 100%);
|
||||||
|
// opacity: 0.7;
|
||||||
|
// border: 1px solid #5B748C;
|
||||||
|
.el-tabs__nav {
|
||||||
|
display: inline-block;
|
||||||
|
width: auto;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tabs__item {
|
||||||
|
width: 70px;
|
||||||
|
height: 30px;
|
||||||
|
border: 0;
|
||||||
|
color: #8FABBF;
|
||||||
|
padding: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: url('~@/assets/safetyIndex/编组 6221.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
.paneInner {
|
||||||
|
width: 100px;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tabs__item.is-active {
|
||||||
|
background: url('~@/assets/safetyIndex/90866.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
border: 0;
|
||||||
|
color: #4BFFAD;
|
||||||
|
padding: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.paneInner {
|
||||||
|
background: rgba(129, 255, 204, 0.26);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tabs__content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,633 @@
|
|||||||
|
<template>
|
||||||
|
<div class="qyyg">
|
||||||
|
<div class="title" @click="showDialog"><img src="../../assets/safetyIndex/装饰009991.png" alt="">企业员工</div>
|
||||||
|
<div class="ygtb" id="ygtb">
|
||||||
|
</div>
|
||||||
|
<el-dialog title="人员安全上报数据详情" :visible.sync="diaVisible" class="picForm"
|
||||||
|
v-if="detailList && detailList.flows && detailList.keyPersons && detailList.keyPositionPersons">
|
||||||
|
<div class="tjsj">
|
||||||
|
<div class="tjsjTitle">流动人员</div>
|
||||||
|
<div class="zhuangshi"></div>
|
||||||
|
<div class="green">{{ detailList.flows[0].safeRuleName }}<p>{{ detailList.flows[0].numValue }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="red">{{ detailList.flows[1].safeRuleName }}<p>{{ detailList.flows[1].numValue }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="yellow">{{ detailList.flows[2].safeRuleName }}<p>{{ detailList.flows[2].numValue }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="blue">{{ detailList.flows[3].safeRuleName }}<p>{{ detailList.flows[3].numValue }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="zdgw">
|
||||||
|
<div class="tjsjTitle">流动人员</div>
|
||||||
|
<div class="zhuangshi"></div>
|
||||||
|
<div class="zdItem">
|
||||||
|
<div class="yellowIconBox"><img src="../../assets/companyCanban/icon/危险品领用、保管、使用人员.png" alt=""></div>
|
||||||
|
<div class="yellowTextBox">
|
||||||
|
{{ detailList.keyPositionPersons[0].safeRuleName }}<p>{{ detailList.keyPositionPersons[0].numValue
|
||||||
|
}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="zdItem">
|
||||||
|
<div class="blueIconBox"><img src="../../assets/companyCanban/icon/危险品技术资质人员.png" alt=""></div>
|
||||||
|
<div class="blueTextBox">
|
||||||
|
{{ detailList.keyPositionPersons[1].safeRuleName }}<p>{{ detailList.keyPositionPersons[1].numValue
|
||||||
|
}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="zdrr">
|
||||||
|
<div class="tjsjTitle">重点人员</div>
|
||||||
|
<div class="zhuangshi"></div>
|
||||||
|
<div class="zdrrTu" id="zdrrTu"></div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import "echarts-gl";
|
||||||
|
import { personSafety, personSafetyDetail } from '@/api/companyCanban'
|
||||||
|
export default {
|
||||||
|
props: ['companyId'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
staffStatisticsList: [],
|
||||||
|
diaVisible: false,
|
||||||
|
companyID: this.companyId,
|
||||||
|
detailList: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getstaffStatistics()
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getstaffStatistics() {
|
||||||
|
personSafety({ companyId: this.companyID }).then(res => {
|
||||||
|
this.staffStatisticsList = res.data
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initygtb()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initygtb() {
|
||||||
|
let myChart = echarts.init(document.getElementById("ygtb"));
|
||||||
|
const colors = ['#66C3FF', '#FEF699', '#19F7C3', '#ADF1FF']
|
||||||
|
let data = []
|
||||||
|
this.staffStatisticsList.forEach((item, index) => {
|
||||||
|
data.push({
|
||||||
|
value: item.sumNumValue, name: item.levelIndexTwo, itemStyle: { color: colors[index], }
|
||||||
|
})
|
||||||
|
})
|
||||||
|
let option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
// type: 'scroll',
|
||||||
|
orient: 'vertical',
|
||||||
|
top: '5%',
|
||||||
|
right: '5%',
|
||||||
|
padding: [5, 10],
|
||||||
|
itemGap: 10,
|
||||||
|
itemWidth: 6,
|
||||||
|
itemHeight: 6,
|
||||||
|
width: 100,
|
||||||
|
backgroundColor: 'rgba(108,128,151,0.2)',
|
||||||
|
lineHeight: 24,
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
color: "#D0DEEE",
|
||||||
|
lineHeight: 10,
|
||||||
|
padding: [3, 0, 3, 0],
|
||||||
|
width: 120,
|
||||||
|
height: 20,
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
color: "#FFFFF",
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: 700,
|
||||||
|
padding: [3, 0, 3, 0],
|
||||||
|
width: 120,
|
||||||
|
height: 20,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
formatter: function (name) {
|
||||||
|
var percent = 0;
|
||||||
|
for (var i = 0; i < data.length; i++) {
|
||||||
|
if (data[i].name == name) {
|
||||||
|
percent = data[i].value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return "{a|" + name + "}" + "{b|" + percent + "}";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
graphic: [{
|
||||||
|
type: 'image', // 插入圆环中间的图片
|
||||||
|
style: {
|
||||||
|
image: require('../../assets/safetyIndex/89771.png'), // 本地图片要用require引入
|
||||||
|
width: 90, // 设置图片大小
|
||||||
|
height: 90
|
||||||
|
},
|
||||||
|
// 设置图片位置
|
||||||
|
top: "24.8%",
|
||||||
|
left: "9%",
|
||||||
|
},],
|
||||||
|
backgroundColor: 'rgba(255,255,255,0)',
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['55%', '70%'],
|
||||||
|
top: "middle",
|
||||||
|
left: "left",
|
||||||
|
width: '45%',
|
||||||
|
height: 190,
|
||||||
|
center: ['45%', '50%'],
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 0,
|
||||||
|
borderColor: 'rgba(255,255,255,0)',
|
||||||
|
borderWidth: 5
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
data
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
},
|
||||||
|
initdrrTu() {
|
||||||
|
let myChart = echarts.init(document.getElementById("zdrrTu"));
|
||||||
|
// const colors = ['#40E2CA', '#E2B171', '#EE6666'];
|
||||||
|
let yczData = this.detailList.keyPersons.map((item) => {
|
||||||
|
return {
|
||||||
|
value: item.numValue, itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0, color: '#66E1DF' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1, color: 'rgba(0,89,84,0)' // 100% 处的颜色
|
||||||
|
}],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}, borderWidth: 1,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
let dateData = this.detailList.keyPersons.map((item) => {
|
||||||
|
return item.safeRuleName
|
||||||
|
})
|
||||||
|
console.log(yczData, 'yczData');
|
||||||
|
console.log(dateData, 'dateData');
|
||||||
|
let option = {
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: { show: false },
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#ccc',
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
rotate: -25
|
||||||
|
,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ccc',
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
,
|
||||||
|
data: dateData,
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '次数',
|
||||||
|
position: 'left',
|
||||||
|
splitLine: { show: false },
|
||||||
|
alignTicks: true,
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ccc'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
type: 'bar',
|
||||||
|
data: yczData
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
},
|
||||||
|
showDialog() {
|
||||||
|
personSafetyDetail({ companyId: this.companyID }).then(res => {
|
||||||
|
this.detailList = res.data
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initdrrTu()
|
||||||
|
})
|
||||||
|
this.diaVisible = true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.qyyg {
|
||||||
|
height: 25.64%;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
height: 33px;
|
||||||
|
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #D9E7FF;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin: 0 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.ygtb {
|
||||||
|
height: calc(100% - 35px);
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.picForm {
|
||||||
|
/deep/ .el-dialog {
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
background: url('~@/assets/head/编组 3021112.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 841px;
|
||||||
|
height: 640px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.el-dialog__title {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #EBFFF4;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__body {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 15px;
|
||||||
|
height: 580px;
|
||||||
|
|
||||||
|
.tjsj {
|
||||||
|
width: 100%;
|
||||||
|
height: 130px;
|
||||||
|
margin: 10px 0;
|
||||||
|
background: url('~@/assets/companyCanban/09091.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 100px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: end;
|
||||||
|
|
||||||
|
.tjsjTitle {
|
||||||
|
position: absolute;
|
||||||
|
left: 14px;
|
||||||
|
top: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #FFE6D9;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 16px;
|
||||||
|
text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zhuangshi {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: url('~@/assets/companyCanban/矩形（装饰）.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green {
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
background: url('~@/assets/safetyIndex/绿色.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 18px 5px;
|
||||||
|
line-height: 16.5px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #DDFFF9;
|
||||||
|
letter-spacing: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #13FFD4;
|
||||||
|
letter-spacing: 2.25px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue {
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
background: url('~@/assets/safetyIndex/蓝色.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 18px 5px;
|
||||||
|
line-height: 16.5px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #FFF8DD;
|
||||||
|
letter-spacing: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #46F3FF;
|
||||||
|
letter-spacing: 2.25px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow {
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
background: url('~@/assets/safetyIndex/黄色.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 18px 5px;
|
||||||
|
line-height: 16.5px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #FFF8DD;
|
||||||
|
letter-spacing: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #FFE346;
|
||||||
|
letter-spacing: 2.25px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
background: url('~@/assets/safetyIndex/红色.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 18px 5px;
|
||||||
|
line-height: 16.5px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #FFE8DD;
|
||||||
|
letter-spacing: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #FF4646;
|
||||||
|
letter-spacing: 2.25px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zdgw {
|
||||||
|
width: 100%;
|
||||||
|
height: 130px;
|
||||||
|
margin: 10px 0;
|
||||||
|
background: url('~@/assets/companyCanban/09091.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 100px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.tjsjTitle {
|
||||||
|
position: absolute;
|
||||||
|
left: 14px;
|
||||||
|
top: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #FFE6D9;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 16px;
|
||||||
|
text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zhuangshi {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: url('~@/assets/companyCanban/矩形（装饰）.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zdItem {
|
||||||
|
height: 60px;
|
||||||
|
width: 270px;
|
||||||
|
position: relative;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.yellowIconBox {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: 1px solid rgba(169, 121, 64, 1);
|
||||||
|
box-shadow: 0px 0px 6px 0px rgba(195, 143, 74, 1);
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-image: linear-gradient(180deg, rgba(169, 121, 64, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(169, 121, 64, 0.37) 100%);
|
||||||
|
display: flex;
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellowTextBox {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #D0DEEE;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #FFE6D9;
|
||||||
|
letter-spacing: 0.9px;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blueIconBox {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: 1px solid rgba(64, 145, 169, 1);
|
||||||
|
box-shadow: 0px 0px 6px 0px rgba(74, 176, 195, 1);
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-image: linear-gradient(180deg, rgba(74, 176, 195, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(74, 176, 195, 0.37) 100%);
|
||||||
|
display: flex;
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blueTextBox {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #D0DEEE;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #EBF9FF;
|
||||||
|
letter-spacing: 0.9px;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0 0 8px rgba(21, 154, 255, 0.50);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zdItem::after {
|
||||||
|
content: "";
|
||||||
|
background: url('~@/assets/safetyIndex/0091.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
opacity: 0.5;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zdrr {
|
||||||
|
width: 100%;
|
||||||
|
height: 260px;
|
||||||
|
margin: 10px 0;
|
||||||
|
background: url('~@/assets/companyCanban/09091.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: end;
|
||||||
|
|
||||||
|
.tjsjTitle {
|
||||||
|
position: absolute;
|
||||||
|
left: 14px;
|
||||||
|
top: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #FFE6D9;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 16px;
|
||||||
|
text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zhuangshi {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: url('~@/assets/companyCanban/矩形（装饰）.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zdrrTu {
|
||||||
|
width: 100%;
|
||||||
|
height: 230px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,513 @@
|
|||||||
|
<template>
|
||||||
|
<div class="fangyi">
|
||||||
|
<div class="title" @click="showDialog"><img src="../../assets/safetyIndex/装饰009991.png" alt="">危化品运输安全</div>
|
||||||
|
<div class="whpys" id="whpys">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<el-dialog title="危化品运输安全上报数据详情" :visible.sync="diaVisible" class="picForm"
|
||||||
|
v-if="fangyiList && fangyiList.violations">
|
||||||
|
<div class="fqs">
|
||||||
|
<div class="tjsjTitle">运输安全数据</div>
|
||||||
|
<div class="zhuangshi"></div>
|
||||||
|
<div class="fxfqs" id="fxfqs"></div>
|
||||||
|
</div>
|
||||||
|
<div class="tjsj">
|
||||||
|
<div class="tjsjTitle">违章数据</div>
|
||||||
|
<div class="zhuangshi"></div>
|
||||||
|
<div class="tjsjChild" id="ymjzs">
|
||||||
|
<div class="imgBox_yellow"><img src="../../assets/companyCanban/icon/违停.png" alt=""></div>
|
||||||
|
<div class="textBox">
|
||||||
|
<div class="numText">{{ fangyiList.violations[0].safeRuleName }}</div>
|
||||||
|
<div class="numNum_yellow">{{ fangyiList.violations[0].numValue }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tjsjChild" id="ymjzs">
|
||||||
|
<div class="imgBox_red"><img src="../../assets/companyCanban/icon/闯禁.png" alt=""></div>
|
||||||
|
<div class="textBox">
|
||||||
|
<div class="numText">{{ fangyiList.violations[1].safeRuleName }}</div>
|
||||||
|
<div class="numNum_red">{{ fangyiList.violations[1].numValue }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tjsjChild" id="ymjzs">
|
||||||
|
<div class="imgBox_blue"><img src="../../assets/companyCanban/icon/超速.png" alt=""></div>
|
||||||
|
<div class="textBox">
|
||||||
|
<div class="numText">{{ fangyiList.violations[2].safeRuleName }}</div>
|
||||||
|
<div class="numNum_blue">{{ fangyiList.violations[2].numValue }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tjsjChild" id="ymjzs">
|
||||||
|
<div class="imgBox_blue"><img src="../../assets/companyCanban/icon/疲劳驾驶.png" alt=""></div>
|
||||||
|
<div class="textBox">
|
||||||
|
<div class="numText">{{ fangyiList.violations[3].safeRuleName }}</div>
|
||||||
|
<div class="numNum_blue">{{ fangyiList.violations[3].numValue }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tjsjChild" id="ymjzs">
|
||||||
|
<div class="imgBox_blue"><img src="../../assets/companyCanban/icon/未按车道行驶.png" alt=""></div>
|
||||||
|
<div class="textBox">
|
||||||
|
<div class="numText">{{ fangyiList.violations[4].safeRuleName }}</div>
|
||||||
|
<div class="numNum_blue">{{ fangyiList.violations[4].numValue }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import "echarts-gl";
|
||||||
|
import { chemicalsDetail } from '@/api/companyCanban'
|
||||||
|
export default {
|
||||||
|
props: ['companyId'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
companyID: this.companyId,
|
||||||
|
fangyiList: {},
|
||||||
|
dateList: [],
|
||||||
|
jingneiList: [],
|
||||||
|
jingwaiList: [],
|
||||||
|
yimiaoData: {},
|
||||||
|
hesuanData: {},
|
||||||
|
changsuoData: {},
|
||||||
|
diaVisible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
console.log(this.companyID, 'this.companyID');
|
||||||
|
chemicalsDetail({ companyId: this.companyID }).then(res => {
|
||||||
|
this.fangyiList = res.data
|
||||||
|
this.initdrrTu()
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showDialog() {
|
||||||
|
this.diaVisible = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initfxfqs()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initdrrTu() {
|
||||||
|
let myChart = echarts.init(document.getElementById("whpys"));
|
||||||
|
// const colors = ['#40E2CA', '#E2B171', '#EE6666'];
|
||||||
|
let yczData = this.fangyiList.transportation.map((item) => {
|
||||||
|
return {
|
||||||
|
value: item.numValue, itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 1,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0, color: '#66E1DF' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1, color: 'rgba(0,89,84,0)' // 100% 处的颜色
|
||||||
|
}],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}, borderWidth: 1,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
let dateData = this.fangyiList.transportation.map((item) => {
|
||||||
|
return item.safeRuleName
|
||||||
|
})
|
||||||
|
console.log(yczData, 'yczData');
|
||||||
|
console.log(dateData, 'dateData');
|
||||||
|
let option = {
|
||||||
|
tooltip: { trigger: 'item' },
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '次数',
|
||||||
|
position: 'left',
|
||||||
|
splitLine: { show: false },
|
||||||
|
alignTicks: true,
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ccc'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
|
||||||
|
},
|
||||||
|
splitLine: { show: false },
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#ccc',
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
inside: true,
|
||||||
|
color: '#D0DEEE'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ccc'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data: dateData,
|
||||||
|
}
|
||||||
|
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
type: 'bar',
|
||||||
|
showBackground: true,
|
||||||
|
backgroundStyle: {
|
||||||
|
color: '#6C8097',
|
||||||
|
opacity: 0.1
|
||||||
|
},
|
||||||
|
barWidth: 20,
|
||||||
|
barCategoryGap: '40%',
|
||||||
|
barGap: '40%',
|
||||||
|
data: yczData
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
},
|
||||||
|
initfxfqs() {
|
||||||
|
let myChart = echarts.init(document.getElementById("fxfqs"));
|
||||||
|
// const colors = ['#40E2CA', '#E2B171', '#EE6666'];
|
||||||
|
let yczData = this.fangyiList.transportation.map((item) => {
|
||||||
|
return {
|
||||||
|
value: item.numValue, itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0, color: '#66E1DF' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1, color: 'rgba(0,89,84,0)' // 100% 处的颜色
|
||||||
|
}],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}, borderWidth: 1,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
let dateData = this.fangyiList.transportation.map((item) => {
|
||||||
|
return item.safeRuleName
|
||||||
|
})
|
||||||
|
let option = {
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: { show: false },
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#ccc',
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ccc',
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
,
|
||||||
|
data: dateData,
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '次数',
|
||||||
|
position: 'left',
|
||||||
|
splitLine: { show: false },
|
||||||
|
alignTicks: true,
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ccc'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 20,
|
||||||
|
data: yczData
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.fangyi {
|
||||||
|
height: calc(37.94% - 40px);
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
height: 33px;
|
||||||
|
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #D9E7FF;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin: 0 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.whpys {
|
||||||
|
height: calc(100% - 35px);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.picForm {
|
||||||
|
/deep/ .el-dialog {
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
background: url('~@/assets/companyFile/背景2.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 811px;
|
||||||
|
height: 480px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.el-dialog__title {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #EBFFF4;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__body {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 420px;
|
||||||
|
padding: 15px;
|
||||||
|
|
||||||
|
.tjsj {
|
||||||
|
width: 100%;
|
||||||
|
height: 110px;
|
||||||
|
margin: 10px 0;
|
||||||
|
background: url('~@/assets/companyCanban/09091.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
.tjsjTitle {
|
||||||
|
position: absolute;
|
||||||
|
left: 14px;
|
||||||
|
top: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #FFE6D9;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 16px;
|
||||||
|
text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zhuangshi {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: url('~@/assets/companyCanban/矩形（装饰）.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tjsjChild {
|
||||||
|
height: 60px;
|
||||||
|
width: calc(20% - 11px);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
// justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.imgBox_yellow {
|
||||||
|
margin-left: 10px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: 1px solid rgba(169, 121, 64, 1);
|
||||||
|
box-shadow: 0px 0px 6px 0px rgba(195, 143, 74, 1);
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-image: linear-gradient(180deg, rgba(169, 121, 64, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(169, 121, 64, 0.37) 100%);
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgBox_red {
|
||||||
|
margin-left: 10px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: 1px solid rgba(169, 64, 64, 1);
|
||||||
|
box-shadow: 0px 0px 6px 0px rgba(195, 74, 74, 1);
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-image: linear-gradient(180deg, rgba(169, 64, 64, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(169, 64, 64, 0.37) 100%);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgBox_blue {
|
||||||
|
margin-left: 10px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: 1px solid rgba(64, 145, 169, 1);
|
||||||
|
box-shadow: 0px 0px 6px 0px rgba(74, 176, 195, 1);
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-image: linear-gradient(180deg, rgba(74, 176, 195, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(74, 176, 195, 0.37) 100%);
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.textBox {
|
||||||
|
margin-left: 15px;
|
||||||
|
|
||||||
|
.numNum_yellow {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #FFE6D9;
|
||||||
|
letter-spacing: 0.9px;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.numNum_red {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #FFD9D9;
|
||||||
|
letter-spacing: 0.9px;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0 0 8px rgba(255, 52, 52, 0.50);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.numNum_blue {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #EBF9FF;
|
||||||
|
letter-spacing: 0.9px;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0 0 8px rgba(21, 154, 255, 0.50);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.numText {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #D0DEEE;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 16px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.tjsjChild::after {
|
||||||
|
content: "";
|
||||||
|
background: url('~@/assets/companyCanban/矩形背景0122.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
opacity: 0.5;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fqs {
|
||||||
|
width: 100%;
|
||||||
|
height: 255px;
|
||||||
|
background: url('~@/assets/companyCanban/09091.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
margin: 10px 0;
|
||||||
|
|
||||||
|
.tjsjTitle {
|
||||||
|
position: absolute;
|
||||||
|
left: 14px;
|
||||||
|
top: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #FFE6D9;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 16px;
|
||||||
|
text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zhuangshi {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: url('~@/assets/companyCanban/矩形（装饰）.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fxfqs {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue