雷达分页
This commit is contained in:
熊丽君
@ -1,7 +1,18 @@
|
||||
<template>
|
||||
<div>
|
||||
<container3>
|
||||
<img class="img" :src="val.bigPic" style="width: 100%; height: 100%" />
|
||||
<img
|
||||
v-if="val.bigPic && val.bigPic.length"
|
||||
class="img"
|
||||
:src="val.bigPic"
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
class="img"
|
||||
src="./conter.png"
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
<rocketTit class="tit">全年目标</rocketTit>
|
||||
<div class="data">
|
||||
<div class="data-item">
|
||||
@ -11,9 +22,9 @@
|
||||
>
|
||||
</div>
|
||||
<div class="box">
|
||||
<i>{{ val.completedIncome }}/</i
|
||||
><i class="num">{{ val.targetIncome }}</i
|
||||
><span class="num2">万</span>
|
||||
<i>{{ handleMillion(val.completedIncome) }}/</i
|
||||
><i class="num">{{ handleMillion(val.targetIncome) }}</i
|
||||
><span class="num2">亿</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<progressBar
|
||||
@ -28,9 +39,9 @@
|
||||
>
|
||||
</div>
|
||||
<div class="box">
|
||||
<i>{{ val.completedProfit }}/</i
|
||||
><i class="num">{{ val.targetProfit }}</i
|
||||
><span class="num2">万</span>
|
||||
<i>{{ handleMillion(val.completedProfit) }}/</i
|
||||
><i class="num">{{ handleMillion(val.targetProfit) }}</i
|
||||
><span class="num2">亿</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<progressBar
|
||||
@ -45,9 +56,9 @@
|
||||
>
|
||||
</div>
|
||||
<div class="box">
|
||||
<i>{{ val.completedChargeQuantity }}/</i
|
||||
><i class="num">{{ val.targetChargeQuantity }}</i
|
||||
><span class="num2">万件</span>
|
||||
<i>{{ handleMillion(val.completedChargeQuantity) }}/</i
|
||||
><i class="num">{{ handleMillion(val.targetChargeQuantity) }}</i
|
||||
><span class="num2">亿件</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<progressBar
|
||||
@ -64,9 +75,9 @@
|
||||
>
|
||||
</div>
|
||||
<div class="box">
|
||||
<i>{{ val.completedDeliveryQuantity }}/</i
|
||||
><i class="num">{{ val.targetDeliveryQuantity }}</i
|
||||
><span class="num2">万件</span>
|
||||
<i>{{ handleMillion(val.completedDeliveryQuantity) }}/</i
|
||||
><i class="num">{{ handleMillion(val.targetDeliveryQuantity) }}</i
|
||||
><span class="num2">亿件</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<progressBar
|
||||
|
||||
@ -1,140 +1,155 @@
|
||||
<template>
|
||||
<div>
|
||||
<container4 title="今日动态">
|
||||
<vue-seamless-scroll ref="seamlessScroll" :data="listData" class="warp" :class-option="{
|
||||
openWatch: true,
|
||||
singleHeight: 35
|
||||
}">
|
||||
<container4 title="动态信息">
|
||||
<vue-seamless-scroll
|
||||
ref="seamlessScroll"
|
||||
:data="listData"
|
||||
class="warp"
|
||||
:class-option="{
|
||||
openWatch: true,
|
||||
singleHeight: 35,
|
||||
}"
|
||||
>
|
||||
<ul class="item">
|
||||
<li>
|
||||
<el-row>
|
||||
<el-col :span="10"><img src="./img/center2/1.png">今日收入</el-col>
|
||||
<el-col :span="5">{{val.income}}万</el-col>
|
||||
<el-col :span="10"
|
||||
><img src="./img/center2/1.png" />本月收入</el-col
|
||||
>
|
||||
<el-col :span="5">{{ month.income }}万</el-col>
|
||||
<el-col :span="7"></el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
<li>
|
||||
<el-row>
|
||||
<el-col :span="10"><img src="./img/center2/2.png">今日支出</el-col>
|
||||
<el-col :span="5">{{val.expenditure}}万</el-col>
|
||||
<el-col :span="10"
|
||||
><img src="./img/center2/2.png" />本月支出</el-col
|
||||
>
|
||||
<el-col :span="5">{{ month.expenditure }}万</el-col>
|
||||
<el-col :span="7"></el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
<li>
|
||||
<el-row>
|
||||
<el-col :span="10"><img src="./img/center2/3.png">今日新签合同</el-col>
|
||||
<el-col :span="5">{{val.newContract}}份</el-col>
|
||||
<el-col :span="10"
|
||||
><img src="./img/center2/3.png" />本月新签合同</el-col
|
||||
>
|
||||
<el-col :span="5">{{ month.newContract }}份</el-col>
|
||||
<el-col :span="7"></el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
<li>
|
||||
<el-row>
|
||||
<el-col :span="10"><img src="./img/center2/4.png">今日安全问题</el-col>
|
||||
<el-col :span="5">{{val.safetyProblem}}个</el-col>
|
||||
<el-col :span="10"
|
||||
><img src="./img/center2/4.png" />本月安全问题</el-col
|
||||
>
|
||||
<el-col :span="5">{{ month.safetyProblem }}个</el-col>
|
||||
<el-col :span="7"></el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
<li>
|
||||
<el-row>
|
||||
<el-col :span="10"><img src="./img/center2/5.png">今日质量问题</el-col>
|
||||
<el-col :span="5">{{val.qualityProblem}}个</el-col>
|
||||
<el-col :span="10"
|
||||
><img src="./img/center2/5.png" />本月质量问题</el-col
|
||||
>
|
||||
<el-col :span="5">{{ month.qualityProblem }}个</el-col>
|
||||
<el-col :span="7"></el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
<li>
|
||||
<el-row>
|
||||
<el-col :span="10"><img src="./img/center2/6.png">今日设备数</el-col>
|
||||
<el-col :span="5">{{val.operatingEquipment}}台</el-col>
|
||||
<el-col :span="7">运行率：{{val.equipmentRate}}%</el-col>
|
||||
<el-col :span="10"
|
||||
><img src="./img/center2/6.png" />今日设备数</el-col
|
||||
>
|
||||
<el-col :span="5">{{ today.operatingEquipment }}台</el-col>
|
||||
<el-col :span="7">运行率：{{ today.equipmentRate }}%</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
<li>
|
||||
<el-row>
|
||||
<el-col :span="10"><img src="./img/center2/7.png">今日职工数</el-col>
|
||||
<el-col :span="5">{{val.totalWorker}}人</el-col>
|
||||
<el-col :span="7">出勤率：{{val.workerRate}}%</el-col>
|
||||
<el-col :span="10"
|
||||
><img src="./img/center2/7.png" />今日职工数</el-col
|
||||
>
|
||||
<el-col :span="5">{{ today.totalWorker }}人</el-col>
|
||||
<el-col :span="7">出勤率：{{ today.workerRate }}%</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
<li>
|
||||
<el-row>
|
||||
<el-col :span="10"><img src="./img/center2/8.png">今日生产任务</el-col>
|
||||
<el-col :span="5">{{val.totalTask}}个</el-col>
|
||||
<el-col :span="7">完成率：{{val.taskRate}}%</el-col>
|
||||
<el-col :span="10"
|
||||
><img src="./img/center2/8.png" />今日生产任务</el-col
|
||||
>
|
||||
<el-col :span="5">{{ today.totalTask }}个</el-col>
|
||||
<el-col :span="7">完成率：{{ today.taskRate }}%</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</container4>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container4 from "./components/container4/index.vue";
|
||||
import rocketTit from "../components/rocketTit/index.vue";
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
import echarts from "echarts";
|
||||
require("echarts/theme/macarons"); // echarts theme
|
||||
import resize from "../../dashboard/mixins/resize";
|
||||
|
||||
import request from '@/utils/request'
|
||||
import request from "@/utils/request";
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left1',
|
||||
name: "left1",
|
||||
components: {
|
||||
container4,
|
||||
rocketTit,
|
||||
vueSeamlessScroll
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
val: {
|
||||
attendanceWorker: "0",
|
||||
completeTask: "0",
|
||||
equipmentRate: "0",
|
||||
month: {
|
||||
expenditure: "0",
|
||||
id: 1,
|
||||
income: "0",
|
||||
newContract: "0",
|
||||
operatingEquipment: "0",
|
||||
qualityProblem: "0",
|
||||
safetyProblem: "0",
|
||||
},
|
||||
today: {
|
||||
equipmentRate: "0",
|
||||
operatingEquipment: "0",
|
||||
taskRate: "0",
|
||||
todayDate: "0",
|
||||
totalEquipment: "0",
|
||||
totalTask: "0",
|
||||
totalWorker: "0",
|
||||
workerRate: "0",
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
beforeDestroy () {
|
||||
|
||||
this.getData();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
getData() {
|
||||
request({
|
||||
url: '/hx/cockpitOverview/todayDynamics',
|
||||
method: 'get',
|
||||
}).then(res=> {
|
||||
url: "/hx/cockpitOverview/todayDynamics",
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
if (200 == res.code) {
|
||||
if(res.data[0] != undefined) {
|
||||
this.val = res.data[0];
|
||||
}
|
||||
this.month = res.data.month;
|
||||
this.today = res.data.today;
|
||||
this.$refs.seamlessScroll.reset();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
<template>
|
||||
<div class="drivingCabin">
|
||||
<div class="left1">
|
||||
<left1></left1>
|
||||
</div>
|
||||
<div class="left2">
|
||||
<left2></left2>
|
||||
</div>
|
||||
<!-- <div class="bg1"></div> -->
|
||||
<div class="drivingCabin">
|
||||
<div class="left1">
|
||||
<left1></left1>
|
||||
</div>
|
||||
<div class="left2">
|
||||
<left2></left2>
|
||||
</div>
|
||||
<!-- <div class="bg1"></div> -->
|
||||
|
||||
<div class="center1">
|
||||
<center1></center1>
|
||||
</div>
|
||||
<div class="center2">
|
||||
<center2></center2>
|
||||
</div>
|
||||
<div class="right1">
|
||||
<right1></right1>
|
||||
</div>
|
||||
<div class="center1">
|
||||
<center1></center1>
|
||||
</div>
|
||||
<div class="center2">
|
||||
<center2></center2>
|
||||
</div>
|
||||
<div class="right1">
|
||||
<right1></right1>
|
||||
</div>
|
||||
|
||||
<div class="right2">
|
||||
<right2></right2>
|
||||
</div>
|
||||
<!-- <div class="right1">
|
||||
<div class="right2">
|
||||
<right2></right2>
|
||||
</div>
|
||||
<!-- <div class="right1">
|
||||
<right1></right1>
|
||||
</div>
|
||||
<div class="right2">
|
||||
@ -33,98 +33,98 @@
|
||||
<div class="bottom2">
|
||||
<bottom2></bottom2>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scalseBox from '../components/scaleBox.vue'
|
||||
import bigScreenHead from '../components/bigScreenHead/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import container1 from '../components/container1/index.vue'
|
||||
import scalseBox from "../components/scaleBox.vue";
|
||||
import bigScreenHead from "../components/bigScreenHead/index.vue";
|
||||
import rocketTit from "../components/rocketTit/index.vue";
|
||||
import container1 from "../components/container1/index.vue";
|
||||
|
||||
import left1 from './left1.vue'
|
||||
import left2 from './left2.vue'
|
||||
import center1 from './center.vue'
|
||||
import center2 from './center2.vue'
|
||||
import right1 from './right1.vue'
|
||||
import right2 from './right2.vue'
|
||||
import bottom1 from './bottom1.vue'
|
||||
import bottom2 from './bottom2.vue'
|
||||
import left1 from "./left1.vue";
|
||||
import left2 from "./left2.vue";
|
||||
import center1 from "./center.vue";
|
||||
import center2 from "./center2.vue";
|
||||
import right1 from "./right1.vue";
|
||||
import right2 from "./right2.vue";
|
||||
import bottom1 from "./bottom1.vue";
|
||||
import bottom2 from "./bottom2.vue";
|
||||
export default {
|
||||
name: 'DrivingCabin',
|
||||
components: {
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
rocketTit,
|
||||
container1,
|
||||
left1,
|
||||
left2,
|
||||
center1,
|
||||
right1,
|
||||
right2,
|
||||
bottom1,
|
||||
bottom2,
|
||||
center2,
|
||||
},
|
||||
}
|
||||
name: "DrivingCabin",
|
||||
components: {
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
rocketTit,
|
||||
container1,
|
||||
left1,
|
||||
left2,
|
||||
center1,
|
||||
right1,
|
||||
right2,
|
||||
bottom1,
|
||||
bottom2,
|
||||
center2,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.drivingCabin {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// background-image: url("../img/bg.png");
|
||||
background-size: cover;
|
||||
.bg1 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 485px;
|
||||
background-image: url('../img/bg-1.png');
|
||||
background-size: cover;
|
||||
}
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// background-image: url("../img/bg.png");
|
||||
background-size: cover;
|
||||
.bg1 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 485px;
|
||||
background-image: url("../img/bg-1.png");
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.left1 {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 24px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 24px;
|
||||
}
|
||||
.left2 {
|
||||
position: absolute;
|
||||
top: 605px;
|
||||
left: 24px;
|
||||
position: absolute;
|
||||
top: 605px;
|
||||
left: 24px;
|
||||
}
|
||||
.center1 {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 578px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 578px;
|
||||
}
|
||||
.center2 {
|
||||
position: absolute;
|
||||
top: 605px;
|
||||
left: 710px;
|
||||
position: absolute;
|
||||
top: 605px;
|
||||
left: 710px;
|
||||
}
|
||||
|
||||
.right1 {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 24px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 24px;
|
||||
}
|
||||
.right2 {
|
||||
position: absolute;
|
||||
top: 605px;
|
||||
right: 24px;
|
||||
position: absolute;
|
||||
top: 605px;
|
||||
right: 24px;
|
||||
}
|
||||
.bottom1 {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 24px;
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 24px;
|
||||
}
|
||||
.bottom2 {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 24px;
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -110,13 +110,18 @@ export default {
|
||||
data: titData,
|
||||
orient: "vertical",
|
||||
// left: '60%',
|
||||
right: "2%",
|
||||
right: "10%",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
pageTextStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
pageIconColor: "#fff",
|
||||
pageIconInactiveColor: "#ccc",
|
||||
// formatter: value => {
|
||||
// return value + calcAverageValue(this.data, value)
|
||||
// },
|
||||
|
||||
Reference in New Issue
Block a user