中建四局大屏（安全管理）页面更改
This commit is contained in:
yjl
parent
eac2a55ee5
commit
f6b81e6114
@ -26,7 +26,7 @@ export default {
|
||||
height: 34px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
background-image: url('../assets/images/common/bg-card.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
@ -1,79 +1,118 @@
|
||||
<template>
|
||||
<Card title="人员管理">
|
||||
<Card title="安全教育">
|
||||
<div class="containerBox">
|
||||
<div class="topbox">
|
||||
<div class="item">
|
||||
<span>总人数</span>
|
||||
<p>{{ WorkerNum.sumNumber }}</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>实际出勤人数</span>
|
||||
<p>{{ WorkerNum.attendanceNumber }}</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>未出勤人数</span>
|
||||
<p>{{ WorkerNum.noAttendanceNumber }}</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>实名制人数</span>
|
||||
<p>{{ WorkerNum.realNameNumber }}</p>
|
||||
</div>
|
||||
<div class="item margin">
|
||||
<span>入职培训人数</span>
|
||||
<p>{{ WorkerNum.inductionTrainingNumber }}</p>
|
||||
</div>
|
||||
<div class="item margin">
|
||||
<span>特殊工种人数</span>
|
||||
<p>{{ WorkerNum.specialNumber }}</p>
|
||||
</div>
|
||||
<div class="item margin">
|
||||
<span>普通工种人数</span>
|
||||
<p>{{ WorkerNum.commonNumber }}</p>
|
||||
</div>
|
||||
<div class="item margin">
|
||||
<span>管理人员人数</span>
|
||||
<p>{{ WorkerNum.managerNumber }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bunbox">
|
||||
<div class="left">
|
||||
<span>员工申报年龄段</span>
|
||||
<el-date-picker
|
||||
v-model="time1"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
@change="getTime1"
|
||||
></el-date-picker>
|
||||
<JBarChart
|
||||
:tooltip="{}"
|
||||
:xData="xData"
|
||||
:series="series"
|
||||
:grid="grid"
|
||||
v-if="series[0].data.length != 0"
|
||||
/>
|
||||
<div class="nodata" v-else>
|
||||
<img src="@/assets/images/noData3.png" alt srcset />
|
||||
<p>暂无数据</p>
|
||||
<div class="centerLeft">
|
||||
<div class="text">入场<span style="width:100px;height:100px;border-bottom:1px solid #F56C35;padding:0 0 5px 0">三级</span>交底</div>
|
||||
|
||||
<div class="textDivBox">
|
||||
<div class="textDiv">
|
||||
<span>67</span>
|
||||
<p>项目总人数</p>
|
||||
</div>
|
||||
<div class="textDiv">
|
||||
<span>51</span>
|
||||
<p>项目培训人数</p>
|
||||
</div>
|
||||
<div class="textDiv">
|
||||
<span>46.79%</span>
|
||||
<p>项目培训率</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>人员增长趋势</span>
|
||||
<el-date-picker
|
||||
v-model="time2"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
@change="getTime2"
|
||||
></el-date-picker>
|
||||
<div v-if="xdata2.length != 0" class="rightChart" ref="rightChart"></div>
|
||||
<div class="nodata" v-else>
|
||||
<img src="@/assets/images/noData3.png" alt srcset />
|
||||
<p>暂无数据</p>
|
||||
|
||||
<div class="tableDiv">
|
||||
<div class="tableSon">
|
||||
<div class="row">培训主题</div>
|
||||
<div class="row">培训人</div>
|
||||
<div class="row">培训课时(h)</div>
|
||||
<div class="row">培训时间</div>
|
||||
</div>
|
||||
<div class="tbody">
|
||||
<vue-scroll>
|
||||
<div class="row" v-for="i in 20" :key="i">
|
||||
<div class="td">每日安全交底</div>
|
||||
<div class="td">缪维彪</div>
|
||||
<div class="td">45</div>
|
||||
<div class="td">2022-09-28</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="centerC">
|
||||
<div class="text">每日<span style="width:100px;height:100px;border-bottom:1px solid #F56C35;padding:0 0 5px 0">班前</span>喊话</div>
|
||||
|
||||
<div class="textDivBox">
|
||||
<div class="textDiv">
|
||||
<span>3次</span>
|
||||
<p>今日班前喊话次数</p>
|
||||
</div>
|
||||
<div class="textDiv">
|
||||
<span>12</span>
|
||||
<p>班前喊话次数</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tableDiv">
|
||||
<div class="tableSon">
|
||||
<div class="row">时间</div>
|
||||
<div class="row">负责人</div>
|
||||
<div class="row">班组</div>
|
||||
<div class="row">照片</div>
|
||||
</div>
|
||||
<div class="tbody">
|
||||
<vue-scroll>
|
||||
<div class="row" v-for="i in 20" :key="i">
|
||||
<div class="td">2022-09-28</div>
|
||||
<div class="td">缪维彪</div>
|
||||
<div class="td">钢筋班组</div>
|
||||
<div class="td"><img :src="src" /></div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="centerRight">
|
||||
<div class="text">
|
||||
<!-- <div class="text">每日<span style="width:100px;height:100px;border-bottom:1px solid #F56C35;padding:0 0 5px 0">班前</span>喊话</div> -->
|
||||
|
||||
安<span style="width:100px;height:100px;border-bottom:1px solid #F56C35;padding:0 0 5px 0">全交</span>底
|
||||
</div>
|
||||
|
||||
<div class="textDivBox">
|
||||
<div class="textDiv">
|
||||
<span>67次</span>
|
||||
<p>培训次数</p>
|
||||
</div>
|
||||
<div class="textDiv">
|
||||
<span>23次</span>
|
||||
<p>特种作业</p>
|
||||
</div>
|
||||
<div class="textDiv">
|
||||
<span>11次</span>
|
||||
<p>雨季交底</p>
|
||||
</div>
|
||||
<div class="textDiv">
|
||||
<span>26次</span>
|
||||
<p>用电交底</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tableDiv">
|
||||
<div class="tableSon">
|
||||
<div class="row">交底主题</div>
|
||||
<div class="row">类型</div>
|
||||
<div class="row">负责人</div>
|
||||
<div class="row">交底时间</div>
|
||||
</div>
|
||||
<div class="tbody">
|
||||
<vue-scroll>
|
||||
<div class="row" v-for="i in 20" :key="i">
|
||||
<div class="td">每日安全交底</div>
|
||||
<div class="td">钢筋交底</div>
|
||||
<div class="td">缪维彪</div>
|
||||
<div class="td">2022-09-28</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -82,184 +121,17 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from "../components/Card.vue";
|
||||
import JBarChart from "../../common/jChart/bar/JBarChart.vue";
|
||||
import {
|
||||
getWorkerNumApi,
|
||||
getWorkerGrowthApi,
|
||||
getDeclareAgeApi
|
||||
} from "@/assets/js/api/zhongjianFourth";
|
||||
import echarts from "echarts4";
|
||||
import Card from '../components/Card.vue'
|
||||
export default {
|
||||
components: { Card, JBarChart },
|
||||
components: {
|
||||
Card
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
WorkerNum: {},
|
||||
time1:["2022-08-19","2022-09-19"],
|
||||
time2: ["2022-08-19","2022-09-19"],
|
||||
xData: ["18-24", "25-34", "34-49", "50-55", "未登记"],
|
||||
grid: ["10%", "2%", "18%", "10%"],
|
||||
series: [
|
||||
{
|
||||
// "2200", "4000", "8000", "3000", "8000"
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#DE5F2A" },
|
||||
{ offset: 1, color: "#DE5F2A24" },
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
xdata2: [],
|
||||
ydata2: [],
|
||||
};
|
||||
},
|
||||
created(){
|
||||
this.time1 = this.getDefaultTime();
|
||||
this.time2 = this.getDefaultTime();
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
this.getAgeData();
|
||||
this.getYearData();
|
||||
},
|
||||
watch: {
|
||||
time1: {
|
||||
handler(oldVal, newVal) {
|
||||
if (oldVal != newVal) {
|
||||
this.getAgeData();
|
||||
}
|
||||
},
|
||||
immediate:true,
|
||||
},
|
||||
time2: {
|
||||
handler(oldVal, newVal) {
|
||||
if (oldVal != newVal) {
|
||||
this.getYearData();
|
||||
}
|
||||
},
|
||||
immediate:true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getDefaultTime () {
|
||||
const start = new Date(new Date().getTime() - 3600 * 1000 * 24 * 30)
|
||||
.toISOString()
|
||||
.replace('T', ' ')
|
||||
.split('.')[0].split(' ')[0] //默认开始时间30天前
|
||||
const end = new Date(new Date().getTime())
|
||||
.toISOString()
|
||||
.replace('T', ' ')
|
||||
.split('.')[0].split(' ')[0]//默认结束时间当天日期
|
||||
return [start, end]
|
||||
},
|
||||
getData() {
|
||||
getWorkerNumApi({ projectSn: this.$store.state.projectSn }).then(
|
||||
(res) => {
|
||||
this.WorkerNum = res.result;
|
||||
}
|
||||
);
|
||||
},
|
||||
getTime1(val) {
|
||||
this.time1 = val;
|
||||
},
|
||||
getTime2(val) {
|
||||
this.time2 = val;
|
||||
},
|
||||
getAgeData(){
|
||||
let data = {}
|
||||
data.projectSn = this.$store.state.projectSn;
|
||||
if (this.time1 != null) {
|
||||
data.startDate = this.time1[0];
|
||||
data.endDate = this.time1[1];
|
||||
getDeclareAgeApi(data).then((res)=>{
|
||||
if(JSON.stringify(res.result) != "{}"){
|
||||
this.series[0].data = Object.values(res.result)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
getYearData() {
|
||||
let data = {};
|
||||
data.projectSn = this.$store.state.projectSn;
|
||||
if (this.time2 != null) {
|
||||
data.startDate = this.time2[0];
|
||||
data.endDate = this.time2[1];
|
||||
getWorkerGrowthApi(data).then((res) => {
|
||||
// console.log('---趋势--',res)
|
||||
if (res.reult != null) {
|
||||
this.xdata2 = result.map((item) => {
|
||||
return item.date;
|
||||
});
|
||||
this.ydata2 = result.map((item) => {
|
||||
return item.count;
|
||||
});
|
||||
this.createChart();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
createChart() {
|
||||
let myChart = echarts.init(this.$refs.rightChart);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
right: "2%",
|
||||
bottom: "18%",
|
||||
left: "2%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: this.xdata2,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
color: "#60c5d1",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#777f8a",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "人员数",
|
||||
data: this.ydata2,
|
||||
type: "line",
|
||||
color: "#62c2ce",
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "rgba(194, 92, 50,1)" },
|
||||
{ offset: 1, color: "rgba(99, 193, 204,1)" },
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
src: require('../assets/images/common/bg_redCar.png')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@ -267,84 +139,127 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 2%;
|
||||
.topbox {
|
||||
height: 27%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.item {
|
||||
flex-shrink: 0;
|
||||
width: 14%;
|
||||
height: 70px;
|
||||
margin-right: 5%;
|
||||
margin-left: 5%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.centerLeft,
|
||||
.centerC,
|
||||
.centerRight {
|
||||
width: 340px;
|
||||
height: 95%;
|
||||
.text {
|
||||
text-align: center;
|
||||
background-image: url(../assets/images/common/num_bg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
span {
|
||||
display: block;
|
||||
color: #6ee4f0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
margin-top: 10%;
|
||||
}
|
||||
p {
|
||||
font-size: 26px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
.el-icon-minus {
|
||||
}
|
||||
}
|
||||
.item.margin {
|
||||
margin-top: 1%;
|
||||
}
|
||||
}
|
||||
.bunbox {
|
||||
height: 60%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left,
|
||||
.right {
|
||||
width: 50%;
|
||||
height: 90%;
|
||||
margin-top: 5%;
|
||||
span {
|
||||
color: #6ee4f0;
|
||||
font-size: 16px;
|
||||
margin: 4% 20% 0% 6%;
|
||||
.textDivBox {
|
||||
width: 340px;
|
||||
height: 8%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.textDiv {
|
||||
background: rgba(111, 202, 226, 0.65);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
opacity: 1;
|
||||
font-size: 12px;
|
||||
width: 100px;
|
||||
height: 41px;
|
||||
// background-color: #6fcae2;
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 5px;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.rightChart {
|
||||
}
|
||||
.tableDiv {
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
height: calc(85%);
|
||||
.tableSon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(111, 202, 226, 0.3);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
height: 27px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
// opacity: 0.2;
|
||||
.row {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
.nodata{
|
||||
.tbody {
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.tableSon .row,
|
||||
.tbody .row {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
margin-top: 20%;
|
||||
justify-content: left;
|
||||
//height: 40px;
|
||||
line-height: 38px;
|
||||
.td {
|
||||
color: #fff;
|
||||
opacity: 0.5;
|
||||
&:nth-child(1) {
|
||||
flex: 1;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
flex: 1;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
flex: 1;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
flex: 1;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-date-editor--daterange.el-input__inner {
|
||||
width: 230px;
|
||||
height: 30px;
|
||||
background-color: #182337;
|
||||
border: 1px solid #264b5e;
|
||||
}
|
||||
::v-deep .el-range-input {
|
||||
background-color: #182337;
|
||||
color: #6ee4f0;
|
||||
}
|
||||
::v-deep .el-date-editor {
|
||||
.el-range__icon {
|
||||
line-height: 23px;
|
||||
color: #6ee4f0;
|
||||
.centerC {
|
||||
.textDiv {
|
||||
flex: 1;
|
||||
&:nth-child(2) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 48px;
|
||||
height: 26px;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
.el-range-separator {
|
||||
line-height: 23px;
|
||||
color: #757d88;
|
||||
}
|
||||
.el-range__close-icon {
|
||||
color: #757d88;
|
||||
line-height: 23px;
|
||||
.centerRight {
|
||||
.textDivBox {
|
||||
width: 360px;
|
||||
height: 8%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.textDiv {
|
||||
margin-right: 20px;
|
||||
font-size: 12px;
|
||||
width: 100px;
|
||||
height: 41px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,7 +8,10 @@
|
||||
<div class="top"><CenterTop /></div>
|
||||
<div class="bottom"><CenterBottom /></div>
|
||||
</div>
|
||||
<div class="right"><RightTop /></div>
|
||||
<div class="right">
|
||||
<div class="rightTop"> <RightTop /> </div>
|
||||
<div class="rightbottom"> <RightBottom /> </div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -18,8 +21,9 @@ import LeftBottom from './leftBottom.vue'
|
||||
import CenterTop from './centerTop.vue'
|
||||
import CenterBottom from './centerBottom.vue'
|
||||
import RightTop from './rightTop.vue'
|
||||
import RightBottom from './rightBottom.vue'
|
||||
export default {
|
||||
components: { LeftTop, LeftBottom, CenterTop, CenterBottom, RightTop }
|
||||
components: { LeftTop, LeftBottom, CenterTop, CenterBottom, RightTop,RightBottom }
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -54,6 +58,13 @@ export default {
|
||||
.right {
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
.rightTop{
|
||||
height: 65%;
|
||||
|
||||
}
|
||||
.rightbottom{
|
||||
height: 35%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
214
src/views/projectAdmin/fourEngin/security/rightBottom.vue
Normal file
214
src/views/projectAdmin/fourEngin/security/rightBottom.vue
Normal file
@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<Card title="人员管理" id="text">
|
||||
<div class="table">
|
||||
<!-- 出勤数据结构 -->
|
||||
<div class="topbox">
|
||||
<div>
|
||||
<span>总人数</span>
|
||||
<p class="item">{{ WorkerNum.sumNumber }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>实际出勤人数</span>
|
||||
<p class="item">{{ WorkerNum.attendanceNumber }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>未出勤人数</span>
|
||||
<p class="item">{{ WorkerNum.noAttendanceNumber }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>实名制人数</span>
|
||||
<p class="item">{{ WorkerNum.realNameNumber }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>入职培训人数</span>
|
||||
<p class="item">{{ WorkerNum.inductionTrainingNumber }}</p>
|
||||
</div>
|
||||
|
||||
<div class=" margin">
|
||||
<span>管理人员人数</span>
|
||||
<p class="item">{{ WorkerNum.managerNumber }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 出勤横向柱状图结构 -->
|
||||
<div id="main">
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts4'
|
||||
import Card from '../components/Card.vue'
|
||||
import { getWorkerNumApi } from '@/assets/js/api/zhongjianFourth'
|
||||
export default {
|
||||
components: {
|
||||
Card
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
WorkerNum: {} //出勤数据
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
this.AttendanceData()
|
||||
},
|
||||
methods: {
|
||||
//出勤人员数据
|
||||
getData() {
|
||||
getWorkerNumApi({ projectSn: this.$store.state.projectSn }).then(res => {
|
||||
this.WorkerNum = res.result
|
||||
})
|
||||
},
|
||||
AttendanceData() {
|
||||
let myChart = echarts.init(document.getElementById('main'))
|
||||
//初始化数据
|
||||
var category = ['中建四局出勤人数', '中建四局出勤人数', '中建四局出勤人数', '中建四局出勤人数', '中建四局出勤人数']
|
||||
var barData = [5, 5, 4, 6, 5]
|
||||
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '1%',
|
||||
right: '4%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: { show: false }
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitArea: { show: false },
|
||||
type: 'category',
|
||||
data: category,
|
||||
max: 3.5,
|
||||
boundaryGap: [5, 5],
|
||||
axisLine: {
|
||||
show:false,
|
||||
lineStyle: {
|
||||
color: '#6EE4F0'
|
||||
}
|
||||
},
|
||||
// splitLine: { show: false },
|
||||
|
||||
offset: 0,
|
||||
|
||||
nameTextStyle: {
|
||||
fontSize: 30
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
// emphasis: {
|
||||
// barBorderRadius: 7
|
||||
// },
|
||||
normal: {
|
||||
barBorderRadius: 7,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: '#3977E6' },
|
||||
{ offset: 1, color: '#37BBF8' }
|
||||
])
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '数量',
|
||||
type: 'bar',
|
||||
data: barData,
|
||||
barWidth: 15,
|
||||
barGap: 10,
|
||||
smooth: true,
|
||||
barCategoryGap: 20,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: 'right',
|
||||
offset: [5, 5],
|
||||
// textStyle: {
|
||||
// // color: '#F68300',
|
||||
// fontSize: 13
|
||||
// }
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
barBorderRadius: 7
|
||||
},
|
||||
normal: {
|
||||
barBorderRadius: 7,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: '#E7622A' },
|
||||
{ offset: 1, color: '#162235' }
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#text{
|
||||
font-size: 20px ;
|
||||
z-index: 999;
|
||||
}
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
|
||||
.topbox {
|
||||
margin-top: 10px;
|
||||
height: 27%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.item {
|
||||
margin-top: 5px;
|
||||
// padding-top: 15px;
|
||||
width: 100px;
|
||||
height: 44px;
|
||||
text-align: center;
|
||||
background-image: url(../assets/images/common/num_bg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 44px;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
color: #6ee4f0;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
#main {
|
||||
margin-top: 55px;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user