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