Merge branch 'bigPic'
This commit is contained in:
熊丽君
@ -4,7 +4,7 @@
|
||||
<vue-seamless-scroll
|
||||
ref="seamlessScroll"
|
||||
:data="listData"
|
||||
class="warp"
|
||||
class="warp-scroll"
|
||||
:class-option="{
|
||||
openWatch: true,
|
||||
singleHeight: 35,
|
||||
@ -185,7 +185,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
.warp-scroll {
|
||||
height: 280px;
|
||||
width: 440px;
|
||||
margin: 0 auto;
|
||||
|
||||
@ -1,62 +1,82 @@
|
||||
<template>
|
||||
<div>
|
||||
<container4 title="今日动态">
|
||||
<vue-seamless-scroll :data="listData" class="warp" :class-option="{
|
||||
singleHeight: 35
|
||||
}">
|
||||
<vue-seamless-scroll
|
||||
:data="listData"
|
||||
class="warp-scroll"
|
||||
:class-option="{
|
||||
singleHeight: 35,
|
||||
}"
|
||||
>
|
||||
<ul class="item">
|
||||
<li>
|
||||
<el-row>
|
||||
<el-col :span="10"><img src="./img/center2/1.png">今日收入</el-col>
|
||||
<el-col :span="10"
|
||||
><img src="./img/center2/1.png" />今日收入</el-col
|
||||
>
|
||||
<el-col :span="5">1234万</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="10"
|
||||
><img src="./img/center2/2.png" />今日支出</el-col
|
||||
>
|
||||
<el-col :span="5">1234万</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="10"
|
||||
><img src="./img/center2/3.png" />今日新签合同</el-col
|
||||
>
|
||||
<el-col :span="5">1234份</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="10"
|
||||
><img src="./img/center2/4.png" />今日安全问题</el-col
|
||||
>
|
||||
<el-col :span="5">1234个</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="10"
|
||||
><img src="./img/center2/5.png" />今日质量问题</el-col
|
||||
>
|
||||
<el-col :span="5">1234个</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="10"
|
||||
><img src="./img/center2/6.png" />今日设备数</el-col
|
||||
>
|
||||
<el-col :span="5">123台</el-col>
|
||||
<el-col :span="7">运行率：88%</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
<li>
|
||||
<el-row>
|
||||
<el-col :span="10"><img src="./img/center2/7.png">今日职工数</el-col>
|
||||
<el-col :span="10"
|
||||
><img src="./img/center2/7.png" />今日职工数</el-col
|
||||
>
|
||||
<el-col :span="5">890人</el-col>
|
||||
<el-col :span="7">出勤率：73%</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
<li>
|
||||
<el-row>
|
||||
<el-col :span="10"><img src="./img/center2/8.png">今日生产任务</el-col>
|
||||
<el-col :span="10"
|
||||
><img src="./img/center2/8.png" />今日生产任务</el-col
|
||||
>
|
||||
<el-col :span="5">890个</el-col>
|
||||
<el-col :span="7">完成率：66%</el-col>
|
||||
</el-row>
|
||||
@ -65,39 +85,32 @@
|
||||
</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";
|
||||
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],
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
beforeDestroy () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
mounted() {},
|
||||
beforeDestroy() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -133,7 +146,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
.warp-scroll {
|
||||
height: 280px;
|
||||
width: 440px;
|
||||
margin: 0 auto;
|
||||
|
||||
@ -50,11 +50,10 @@
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">产品错、漏检率</span></div>
|
||||
<div class="box">
|
||||
<span
|
||||
>{{ dataInfo.realErrorCheckRate }}%/{{
|
||||
dataInfo.targetErrorCheckRate
|
||||
}}%</span
|
||||
>
|
||||
<span>
|
||||
{{ dataInfo.realErrorCheckRate }}%
|
||||
<!-- /{{dataInfo.targetErrorCheckRate}}% -->
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
@ -110,6 +109,8 @@ export default {
|
||||
commonlyProblemTotal: 0,
|
||||
lowProblemTotal: 0,
|
||||
smallProductCate: 0,
|
||||
realErrorCheckRate: 0,
|
||||
targetErrorCheckRate: 0,
|
||||
errorCheckRate: 0,
|
||||
leakCheckRate: 0,
|
||||
planCompleteRate: 0,
|
||||
|
||||
@ -113,7 +113,7 @@ export default {
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "",
|
||||
min: 0,
|
||||
min: resData.spc.lowerLimit - 50,
|
||||
// max: 250,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
step: 0.5,
|
||||
direction: 2,
|
||||
}"
|
||||
class="warp"
|
||||
class="warp-scroll"
|
||||
>
|
||||
<ul class="ul-item">
|
||||
<li
|
||||
@ -246,7 +246,7 @@ export default {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.warp {
|
||||
.warp-scroll {
|
||||
// height: 100px;
|
||||
margin: 0 auto;
|
||||
margin-top: 25px;
|
||||
|
||||
@ -1,320 +1,343 @@
|
||||
<template>
|
||||
<container1 title="全厂资源动态">
|
||||
<div class="trends">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="trends-item">
|
||||
<div class="trends-item-icon">
|
||||
<img src="./img/trends-item-icon1.png" alt="" />
|
||||
</div>
|
||||
<div class="trends-item-content">
|
||||
<div class="tit">作业工房/总数</div>
|
||||
<div class="value">
|
||||
{{ dataInfo.workingWorkshopTotal }}/<span class="small">{{ dataInfo.workshopTotal }}</span>
|
||||
</div>
|
||||
<div class="progressBar">
|
||||
<progressBar :percentage="percentage" v-if="percentage" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="trends-item">
|
||||
<div class="trends-item-icon">
|
||||
<img src="./img/trends-item-icon2.png" alt="" />
|
||||
</div>
|
||||
<div class="trends-item-content">
|
||||
<div class="tit">人员数量/出勤率</div>
|
||||
<div class="value">
|
||||
{{ dataInfo.realAttendance }}/<span class="small">{{ (dataInfo.attendanceRate - 0).toFixed(0) }}%</span>
|
||||
</div>
|
||||
<div class="progressBar">
|
||||
<progressBar :percentage="dataInfo.attendanceRate" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<div style="height: 27px"></div>
|
||||
</el-col>
|
||||
<container1 title="全厂资源动态">
|
||||
<div class="trends">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="trends-item">
|
||||
<div class="trends-item-icon">
|
||||
<img src="./img/trends-item-icon1.png" alt="" />
|
||||
</div>
|
||||
<div class="trends-item-content">
|
||||
<div class="tit">作业工房/总数</div>
|
||||
<div class="value">
|
||||
{{ dataInfo.workingWorkshopTotal }}/<span class="small">{{
|
||||
dataInfo.workshopTotal
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="progressBar">
|
||||
<progressBar :percentage="percentage" v-if="percentage" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="trends-item">
|
||||
<div class="trends-item-icon">
|
||||
<img src="./img/trends-item-icon2.png" alt="" />
|
||||
</div>
|
||||
<div class="trends-item-content">
|
||||
<div class="tit">人员数量/出勤率</div>
|
||||
<div class="value">
|
||||
{{ dataInfo.realAttendance }}/<span class="small"
|
||||
>{{ (dataInfo.attendanceRate - 0).toFixed(0) }}%</span
|
||||
>
|
||||
</div>
|
||||
<div class="progressBar">
|
||||
<progressBar :percentage="dataInfo.attendanceRate" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<div style="height: 27px"></div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="trends-item">
|
||||
<div class="trends-item-icon">
|
||||
<img src="./img/trends-item-icon3.png" alt="" />
|
||||
</div>
|
||||
<div class="trends-item-content">
|
||||
<div class="tit">设备运行数量/运行率</div>
|
||||
<div class="value">
|
||||
{{ dataInfo.equipmentRunTotal }}/<span class="small">{{ dataInfo.equipmentRunRate }}%</span>
|
||||
</div>
|
||||
<div class="progressBar">
|
||||
<progressBar :percentage="dataInfo.equipmentRunRate" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="trends-item">
|
||||
<div class="trends-item-icon">
|
||||
<img src="./img/trends-item-icon2.png" alt="" />
|
||||
</div>
|
||||
<div class="trends-item-content">
|
||||
<div class="tit">正常采集率</div>
|
||||
<div class="value">{{ dataInfo.videoCollectionRate }}%</div>
|
||||
<div class="progressBar">
|
||||
<progressBar :percentage="dataInfo.videoCollectionRate" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="height: 45px"></div>
|
||||
<div class="car">
|
||||
<div class="car-tit">
|
||||
<div class="left">被使用车辆总数</div>
|
||||
<div class="right">{{ carTotal.useTotal }}<span>辆</span></div>
|
||||
</div>
|
||||
<div style="margin: 5px 0 10px 0">
|
||||
<progressBar :percentage="carTotal.useTotal / carTotal.total || 0" :strokeWidth="12" />
|
||||
</div>
|
||||
<div class="describe">
|
||||
<div class="left">总车辆数：{{ carTotal.total }}</div>
|
||||
<div class="right">使用率：{{ carTotal.useTotal / carTotal.total || 0 }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<vue-seamless-scroll
|
||||
ref="seamlessScroll"
|
||||
:data="listData"
|
||||
class="warp"
|
||||
:class-option="{
|
||||
singleHeight: 48,
|
||||
}"
|
||||
>
|
||||
<ul class="item">
|
||||
<li v-for="item in listData" :key="item.id">
|
||||
<el-row>
|
||||
<el-col :span="10"><img src="./img/1.png" />{{ item.carName }}</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="state success" v-if="item.carStatus == '使用中'">{{ item.carStatus }}</div>
|
||||
<div class="state info" v-if="item.carStatus == '闲置'">{{ item.carStatus }}</div>
|
||||
<div class="state fault" v-if="item.carStatus == '故障'">{{ item.carStatus }}</div>
|
||||
</el-col>
|
||||
<el-col :span="8" style="text-align: right"><img src="./img/2.png" />{{ item.nowAddress }}</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</container1>
|
||||
<el-col :span="12">
|
||||
<div class="trends-item">
|
||||
<div class="trends-item-icon">
|
||||
<img src="./img/trends-item-icon3.png" alt="" />
|
||||
</div>
|
||||
<div class="trends-item-content">
|
||||
<div class="tit">设备运行数量/运行率</div>
|
||||
<div class="value">
|
||||
{{ dataInfo.equipmentRunTotal }}/<span class="small"
|
||||
>{{ dataInfo.equipmentRunRate }}%</span
|
||||
>
|
||||
</div>
|
||||
<div class="progressBar">
|
||||
<progressBar :percentage="dataInfo.equipmentRunRate" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="trends-item">
|
||||
<div class="trends-item-icon">
|
||||
<img src="./img/trends-item-icon2.png" alt="" />
|
||||
</div>
|
||||
<div class="trends-item-content">
|
||||
<div class="tit">正常采集率</div>
|
||||
<div class="value">{{ dataInfo.videoCollectionRate }}%</div>
|
||||
<div class="progressBar">
|
||||
<progressBar :percentage="dataInfo.videoCollectionRate" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="height: 45px"></div>
|
||||
<div class="car">
|
||||
<div class="car-tit">
|
||||
<div class="left">被使用车辆总数</div>
|
||||
<div class="right">{{ carTotal.useTotal }}<span>辆</span></div>
|
||||
</div>
|
||||
<div style="margin: 5px 0 10px 0">
|
||||
<progressBar
|
||||
:percentage="carTotal.useTotal / carTotal.total || 0"
|
||||
:strokeWidth="12"
|
||||
/>
|
||||
</div>
|
||||
<div class="describe">
|
||||
<div class="left">总车辆数：{{ carTotal.total }}</div>
|
||||
<div class="right">
|
||||
使用率：{{ carTotal.useTotal / carTotal.total || 0 }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<vue-seamless-scroll
|
||||
ref="seamlessScroll"
|
||||
:data="listData"
|
||||
class="warp-scroll"
|
||||
:class-option="{
|
||||
singleHeight: 48,
|
||||
}"
|
||||
>
|
||||
<ul class="item">
|
||||
<li v-for="item in listData" :key="item.id">
|
||||
<el-row>
|
||||
<el-col :span="10"
|
||||
><img src="./img/1.png" />{{ item.carName }}</el-col
|
||||
>
|
||||
<el-col :span="6">
|
||||
<div class="state success" v-if="item.carStatus == '使用中'">
|
||||
{{ item.carStatus }}
|
||||
</div>
|
||||
<div class="state info" v-if="item.carStatus == '闲置'">
|
||||
{{ item.carStatus }}
|
||||
</div>
|
||||
<div class="state fault" v-if="item.carStatus == '故障'">
|
||||
{{ item.carStatus }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" style="text-align: right"
|
||||
><img src="./img/2.png" />{{ item.nowAddress }}</el-col
|
||||
>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</container1>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container1 from './components/container1/index.vue'
|
||||
import progressBar from '@/views/bigScreen/components/progress/index.vue'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
import container1 from "./components/container1/index.vue";
|
||||
import progressBar from "@/views/bigScreen/components/progress/index.vue";
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
export default {
|
||||
components: {
|
||||
container1, //#endregion,
|
||||
progressBar,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
listData: [],
|
||||
dataInfo: {
|
||||
workingWorkshopTotal:0,
|
||||
workshopTotal:0,
|
||||
realAttendance:0,
|
||||
attendanceRate:0,
|
||||
equipmentRunTotal:0,
|
||||
equipmentRunRate:0,
|
||||
videoCollectionRate:0,
|
||||
components: {
|
||||
container1, //#endregion,
|
||||
progressBar,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
listData: [],
|
||||
dataInfo: {
|
||||
workingWorkshopTotal: 0,
|
||||
workshopTotal: 0,
|
||||
realAttendance: 0,
|
||||
attendanceRate: 0,
|
||||
equipmentRunTotal: 0,
|
||||
equipmentRunRate: 0,
|
||||
videoCollectionRate: 0,
|
||||
},
|
||||
carTotal: {
|
||||
total:0,
|
||||
useTotal:0
|
||||
carTotal: {
|
||||
total: 0,
|
||||
useTotal: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
percentage() {
|
||||
return (this.dataInfo.workingWorkshopTotal / this.dataInfo.workshopTotal) * 100
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getHxFactoryResourcesPic',
|
||||
}).then(({ data }) => {
|
||||
this.dataInfo = data
|
||||
})
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getHxCarUsePic1',
|
||||
}).then(({ data }) => {
|
||||
this.carTotal = data
|
||||
})
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getHxCarUsePic2',
|
||||
}).then(({ data }) => {
|
||||
this.listData = data
|
||||
this.$refs.seamlessScroll.reset()
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
percentage() {
|
||||
return (
|
||||
(this.dataInfo.workingWorkshopTotal / this.dataInfo.workshopTotal) * 100
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.request({
|
||||
url: "/hx/scientificProduction/getHxFactoryResourcesPic",
|
||||
}).then(({ data }) => {
|
||||
this.dataInfo = data;
|
||||
});
|
||||
this.request({
|
||||
url: "/hx/scientificProduction/getHxCarUsePic1",
|
||||
}).then(({ data }) => {
|
||||
this.carTotal = data;
|
||||
});
|
||||
this.request({
|
||||
url: "/hx/scientificProduction/getHxCarUsePic2",
|
||||
}).then(({ data }) => {
|
||||
this.listData = data;
|
||||
this.$refs.seamlessScroll.reset();
|
||||
});
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.trends {
|
||||
padding: 0 25px;
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
.trends-item {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
.trends-item-icon {
|
||||
width: 50px;
|
||||
height: 111px;
|
||||
background-image: url(./img/trends-item-bg.png);
|
||||
background-size: cover;
|
||||
background-position: center right;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
height: 32px;
|
||||
}
|
||||
width: 50px;
|
||||
height: 111px;
|
||||
background-image: url(./img/trends-item-bg.png);
|
||||
background-size: cover;
|
||||
background-position: center right;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
.trends-item-content {
|
||||
margin-left: 15px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-betweens;
|
||||
.progressBar {
|
||||
height: 20px;
|
||||
width: 100px;
|
||||
}
|
||||
.value {
|
||||
flex: 1;
|
||||
}
|
||||
.tit {
|
||||
padding: 0 10px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
line-height: 32px;
|
||||
background-image: url(./img/tit-bg.png);
|
||||
background-size: 140px 32px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.value {
|
||||
font-size: 36px;
|
||||
font-family: Roboto-Medium, Roboto;
|
||||
font-weight: 500;
|
||||
color: #55c5a2;
|
||||
.small {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
margin-left: 15px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-betweens;
|
||||
.progressBar {
|
||||
height: 20px;
|
||||
width: 100px;
|
||||
}
|
||||
.value {
|
||||
flex: 1;
|
||||
}
|
||||
.tit {
|
||||
padding: 0 10px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
line-height: 32px;
|
||||
background-image: url(./img/tit-bg.png);
|
||||
background-size: 140px 32px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.value {
|
||||
font-size: 36px;
|
||||
font-family: Roboto-Medium, Roboto;
|
||||
font-weight: 500;
|
||||
color: #55c5a2;
|
||||
.small {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.car {
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
.car-tit {
|
||||
.right {
|
||||
font-size: 25px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #1fe7e5;
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #f4f4f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.describe {
|
||||
font-size: 15px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
div {
|
||||
overflow: hidden;
|
||||
}
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
.car-tit {
|
||||
.right {
|
||||
font-size: 25px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #1fe7e5;
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #f4f4f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.describe {
|
||||
font-size: 15px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
div {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
height: 128px;
|
||||
width: 100%;
|
||||
margin: 10px auto 0 auto;
|
||||
overflow: hidden;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
li,
|
||||
a {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
}
|
||||
li {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
display: block;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
|
||||
padding-left: 20px;
|
||||
margin: 0 0 16px 0;
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.state {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 12px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #a9b8c5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.success::before {
|
||||
background: #1890ff;
|
||||
}
|
||||
.warp-scroll {
|
||||
height: 128px;
|
||||
width: 100%;
|
||||
margin: 10px auto 0 auto;
|
||||
overflow: hidden;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
li,
|
||||
a {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
}
|
||||
li {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
display: block;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
|
||||
padding-left: 20px;
|
||||
margin: 0 0 16px 0;
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.state {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 12px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #a9b8c5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.success::before {
|
||||
background: #1890ff;
|
||||
}
|
||||
|
||||
&.fault::before {
|
||||
background: #f75f53;
|
||||
}
|
||||
&.free::before {
|
||||
background: #a9b8c5;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.fault::before {
|
||||
background: #f75f53;
|
||||
}
|
||||
&.free::before {
|
||||
background: #a9b8c5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,302 +1,326 @@
|
||||
<template>
|
||||
<container3 title="全厂作业明细" :width="535" :height="975">
|
||||
<vue-seamless-scroll
|
||||
:data="listData"
|
||||
class="warp"
|
||||
:class-option="{
|
||||
singleHeight: 84,
|
||||
}"
|
||||
>
|
||||
<ul>
|
||||
<li class="item" :class="item.dangerLevel == '一级' ? 'active' : ''" v-for="item in listData" :key="item.id">
|
||||
<div class="item-tit">{{ item.workHome }}</div>
|
||||
<div class="item-content">
|
||||
<el-row>
|
||||
<el-col :span="12"
|
||||
><span class="text-tit">车间:</span><span class="text-val">{{ item.workshop }}</span></el-col
|
||||
>
|
||||
<el-col :span="12"
|
||||
><span class="text-tit">产品:</span><span class="text-val">{{ item.product }}</span></el-col
|
||||
>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"
|
||||
><span class="text-tit">工序:</span><span class="text-val">{{ item.procedure }}</span></el-col
|
||||
>
|
||||
<el-col :span="12">
|
||||
<span class="text-tit">危险级别:</span>
|
||||
<span class="text-val level1" v-if="item.dangerLevel == '一级'">{{ item.dangerLevel }}</span>
|
||||
<span class="text-val level2" v-if="item.dangerLevel == '二级'">{{ item.dangerLevel }}</span>
|
||||
<span class="text-val level3" v-if="item.dangerLevel == '三级'">{{ item.dangerLevel }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
<div class="sub">
|
||||
<div class="sub-left">
|
||||
<div class="sub-tit"><img src="./img/sub/sub1.png" alt="" />装药当前作业内容</div>
|
||||
<div class="sub-content">
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">编 号：</div>
|
||||
<div class="sub-item-val">{{ oneData.numberNo }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">称 量：</div>
|
||||
<div class="sub-item-val">{{ oneData.weighing }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">混 合：</div>
|
||||
<div class="sub-item-val">{{ oneData.blend }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">浇 注：</div>
|
||||
<div class="sub-item-val">{{ oneData.pouring }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">总体推迟时间：</div>
|
||||
<div class="sub-item-val">{{ oneData.createTime }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">倒班车：</div>
|
||||
<div class="sub-item-val">{{ oneData.reverseBus }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-right">
|
||||
<div class="sub-tit"><img src="./img/sub/sub2.png" alt="" />酯生产量</div>
|
||||
<div class="sub-content">
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">{{ twoData.jobContent }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">开车时间：</div>
|
||||
<div class="sub-item-val">{{ twoData.driveDate }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">预计结束时间：</div>
|
||||
<div class="sub-item-val">{{ twoData.forecastEndDate }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">酯生产量：</div>
|
||||
<div class="sub-item-val">{{ twoData.esterProduction }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">粘合剂干燥量：</div>
|
||||
<div class="sub-item-val">{{ twoData.cleanStatus }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</container3>
|
||||
<container3 title="全厂作业明细" :width="535" :height="975">
|
||||
<vue-seamless-scroll
|
||||
:data="listData"
|
||||
class="warp-scroll"
|
||||
:class-option="{
|
||||
singleHeight: 84,
|
||||
}"
|
||||
>
|
||||
<ul>
|
||||
<li
|
||||
class="item"
|
||||
:class="item.dangerLevel == '一级' ? 'active' : ''"
|
||||
v-for="item in listData"
|
||||
:key="item.id"
|
||||
>
|
||||
<div class="item-tit">{{ item.workHome }}</div>
|
||||
<div class="item-content">
|
||||
<el-row>
|
||||
<el-col :span="12"
|
||||
><span class="text-tit">车间:</span
|
||||
><span class="text-val">{{ item.workshop }}</span></el-col
|
||||
>
|
||||
<el-col :span="12"
|
||||
><span class="text-tit">产品:</span
|
||||
><span class="text-val">{{ item.product }}</span></el-col
|
||||
>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"
|
||||
><span class="text-tit">工序:</span
|
||||
><span class="text-val">{{ item.procedure }}</span></el-col
|
||||
>
|
||||
<el-col :span="12">
|
||||
<span class="text-tit">危险级别:</span>
|
||||
<span
|
||||
class="text-val level1"
|
||||
v-if="item.dangerLevel == '一级'"
|
||||
>{{ item.dangerLevel }}</span
|
||||
>
|
||||
<span
|
||||
class="text-val level2"
|
||||
v-if="item.dangerLevel == '二级'"
|
||||
>{{ item.dangerLevel }}</span
|
||||
>
|
||||
<span
|
||||
class="text-val level3"
|
||||
v-if="item.dangerLevel == '三级'"
|
||||
>{{ item.dangerLevel }}</span
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
<div class="sub">
|
||||
<div class="sub-left">
|
||||
<div class="sub-tit">
|
||||
<img src="./img/sub/sub1.png" alt="" />装药当前作业内容
|
||||
</div>
|
||||
<div class="sub-content">
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">编 号：</div>
|
||||
<div class="sub-item-val">{{ oneData.numberNo }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">称 量：</div>
|
||||
<div class="sub-item-val">{{ oneData.weighing }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">混 合：</div>
|
||||
<div class="sub-item-val">{{ oneData.blend }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">浇 注：</div>
|
||||
<div class="sub-item-val">{{ oneData.pouring }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">总体推迟时间：</div>
|
||||
<div class="sub-item-val">{{ oneData.createTime }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">倒班车：</div>
|
||||
<div class="sub-item-val">{{ oneData.reverseBus }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-right">
|
||||
<div class="sub-tit">
|
||||
<img src="./img/sub/sub2.png" alt="" />硝酸酯生产量
|
||||
</div>
|
||||
<div class="sub-content">
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">{{ twoData.jobContent }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">开车时间：</div>
|
||||
<div class="sub-item-val">{{ twoData.driveDate }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">预计结束时间：</div>
|
||||
<div class="sub-item-val">{{ twoData.forecastEndDate }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">硝酸酯生产量：</div>
|
||||
<div class="sub-item-val">{{ twoData.esterProduction }}</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">粘合剂干燥量：</div>
|
||||
<div class="sub-item-val">{{ twoData.cleanStatus }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</container3>
|
||||
</template>
|
||||
<script>
|
||||
import container3 from './components/container3/index.vue'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
import container3 from "./components/container3/index.vue";
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
export default {
|
||||
components: {
|
||||
container3, //#endregion,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
listData: [],
|
||||
oneData: {},
|
||||
twoData: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
// 全厂作业明细
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getHxJobDetailsPic',
|
||||
}).then(({ data }) => {
|
||||
this.listData = data
|
||||
})
|
||||
// 装药当前作业内容
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getChargeJobContentPic',
|
||||
}).then(({ data }) => {
|
||||
this.oneData = data
|
||||
})
|
||||
},
|
||||
getTwoList() {
|
||||
// 酯生产量
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getHxEsterProductionPic',
|
||||
}).then(({ data }) => {
|
||||
this.twoData = data
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getTwoList()
|
||||
},
|
||||
}
|
||||
components: {
|
||||
container3, //#endregion,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
listData: [],
|
||||
oneData: {},
|
||||
twoData: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
// 全厂作业明细
|
||||
this.request({
|
||||
url: "/hx/scientificProduction/getHxJobDetailsPic",
|
||||
}).then(({ data }) => {
|
||||
this.listData = data;
|
||||
});
|
||||
// 装药当前作业内容
|
||||
this.request({
|
||||
url: "/hx/scientificProduction/getChargeJobContentPic",
|
||||
}).then(({ data }) => {
|
||||
this.oneData = data;
|
||||
});
|
||||
},
|
||||
getTwoList() {
|
||||
// 硝酸酯量
|
||||
this.request({
|
||||
url: "/hx/scientificProduction/getHxEsterProductionPic",
|
||||
}).then(({ data }) => {
|
||||
this.twoData = data;
|
||||
});
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getTwoList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
height: 416px;
|
||||
width: 100%;
|
||||
margin: 10px auto 0 auto;
|
||||
overflow: hidden;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
li,
|
||||
a {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
}
|
||||
li {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
display: block;
|
||||
height: 40px;
|
||||
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
|
||||
margin: 0 0 4px 0;
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
box-shadow: inset 0px 0px 20px 0px rgba(0, 255, 255, 0.75);
|
||||
background: #0a1047;
|
||||
height: 80px;
|
||||
&.active {
|
||||
box-shadow: inset 0px 0px 20px 0px #ffd082;
|
||||
}
|
||||
.item-tit {
|
||||
text-align: center;
|
||||
width: 124px;
|
||||
height: 80px;
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #00ffff;
|
||||
line-height: 80px;
|
||||
background: rgba(0, 255, 255, 0.14);
|
||||
}
|
||||
&.active .item-tit {
|
||||
color: #ffd082;
|
||||
background: rgba(255, 208, 130, 0.14);
|
||||
}
|
||||
.item-content {
|
||||
flex: 1;
|
||||
line-height: 30px;
|
||||
padding: 10px 25px;
|
||||
}
|
||||
.text-tit {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #00ffff;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.text-val {
|
||||
font-size: 14px;
|
||||
font-family: PingFang-SC-Regular, PingFang-SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
&.active .text-tit {
|
||||
color: #ffd082;
|
||||
}
|
||||
.warp-scroll {
|
||||
height: 416px;
|
||||
width: 100%;
|
||||
margin: 10px auto 0 auto;
|
||||
overflow: hidden;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
li,
|
||||
a {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
}
|
||||
li {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
display: block;
|
||||
height: 40px;
|
||||
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
|
||||
margin: 0 0 4px 0;
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
box-shadow: inset 0px 0px 20px 0px rgba(0, 255, 255, 0.75);
|
||||
background: #0a1047;
|
||||
height: 80px;
|
||||
&.active {
|
||||
box-shadow: inset 0px 0px 20px 0px #ffd082;
|
||||
}
|
||||
.item-tit {
|
||||
text-align: center;
|
||||
width: 124px;
|
||||
height: 80px;
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #00ffff;
|
||||
line-height: 80px;
|
||||
background: rgba(0, 255, 255, 0.14);
|
||||
}
|
||||
&.active .item-tit {
|
||||
color: #ffd082;
|
||||
background: rgba(255, 208, 130, 0.14);
|
||||
}
|
||||
.item-content {
|
||||
flex: 1;
|
||||
line-height: 30px;
|
||||
padding: 10px 25px;
|
||||
}
|
||||
.text-tit {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #00ffff;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.text-val {
|
||||
font-size: 14px;
|
||||
font-family: PingFang-SC-Regular, PingFang-SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
&.active .text-tit {
|
||||
color: #ffd082;
|
||||
}
|
||||
|
||||
.level1 {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #f64f58;
|
||||
font-size: 14px;
|
||||
color: #f64f58;
|
||||
line-height: 1;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
.level2 {
|
||||
display: inline-block;
|
||||
.level1 {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #f64f58;
|
||||
font-size: 14px;
|
||||
color: #f64f58;
|
||||
line-height: 1;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
.level2 {
|
||||
display: inline-block;
|
||||
|
||||
border-radius: 2px;
|
||||
border: 1px solid #fa8c16;
|
||||
font-size: 14px;
|
||||
color: #fa8c16;
|
||||
line-height: 1;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
.level3 {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #fa8c16;
|
||||
font-size: 14px;
|
||||
color: #fa8c16;
|
||||
line-height: 1;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
.level3 {
|
||||
display: inline-block;
|
||||
|
||||
border-radius: 2px;
|
||||
border: 1px solid #91d5fe;
|
||||
font-size: 14px;
|
||||
color: #91d5fe;
|
||||
line-height: 1;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
border-radius: 2px;
|
||||
border: 1px solid #91d5fe;
|
||||
font-size: 14px;
|
||||
color: #91d5fe;
|
||||
line-height: 1;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sub {
|
||||
overflow: hidden;
|
||||
margin-top: 16px;
|
||||
& > div {
|
||||
width: 260px;
|
||||
height: 472px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sub-left {
|
||||
float: left;
|
||||
}
|
||||
.sub-right {
|
||||
float: right;
|
||||
}
|
||||
.sub-tit {
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
rgba(10, 16, 75, 0) 0%,
|
||||
rgba(8, 56, 105, 0.11) 33%,
|
||||
rgba(6, 116, 151, 0.91) 75%,
|
||||
#00ffff 100%
|
||||
);
|
||||
}
|
||||
.sub-content {
|
||||
flex: 1;
|
||||
box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
|
||||
background-color: rgba(139, 177, 237, 0.15);
|
||||
}
|
||||
.sub-item {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
padding: 0 32px;
|
||||
margin: 16px 0;
|
||||
.sub-item-tit {
|
||||
color: #00ffff;
|
||||
}
|
||||
}
|
||||
overflow: hidden;
|
||||
margin-top: 16px;
|
||||
& > div {
|
||||
width: 260px;
|
||||
height: 472px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sub-left {
|
||||
float: left;
|
||||
}
|
||||
.sub-right {
|
||||
float: right;
|
||||
}
|
||||
.sub-tit {
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
rgba(10, 16, 75, 0) 0%,
|
||||
rgba(8, 56, 105, 0.11) 33%,
|
||||
rgba(6, 116, 151, 0.91) 75%,
|
||||
#00ffff 100%
|
||||
);
|
||||
}
|
||||
.sub-content {
|
||||
flex: 1;
|
||||
box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
|
||||
background-color: rgba(139, 177, 237, 0.15);
|
||||
}
|
||||
.sub-item {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
padding: 0 32px;
|
||||
margin: 16px 0;
|
||||
.sub-item-tit {
|
||||
color: #00ffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,29 +3,54 @@
|
||||
<container1 title="物资计划">
|
||||
<div class="left3-content">
|
||||
<el-col :span="24" style="margin-bottom: 1px">
|
||||
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||
<el-row
|
||||
style="
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: rgba(0, 255, 255, 0.3);
|
||||
"
|
||||
>
|
||||
<el-col style="text-align: center" :span="4">序号</el-col>
|
||||
<el-col style="text-align: center" :span="4">物资名称</el-col>
|
||||
<el-col style="text-align: center" :span="3">现有库存</el-col>
|
||||
<el-col style="text-align: center" :span="6">是否开始备货采购</el-col>
|
||||
<el-col style="text-align: center" :span="6"
|
||||
>是否开始备货采购</el-col
|
||||
>
|
||||
<el-col style="text-align: center" :span="3">采购数量</el-col>
|
||||
<el-col style="text-align: center" :span="4">入库时间</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<vue-seamless-scroll ref="seamlessScroll" :data="listData" class="warp" :class-option="{singleHeight: 42,}">
|
||||
<vue-seamless-scroll
|
||||
ref="seamlessScroll"
|
||||
:data="listData"
|
||||
class="warp-scroll"
|
||||
:class-option="{ singleHeight: 42 }"
|
||||
>
|
||||
<ul class="item">
|
||||
<li v-for="item in scrollList" :key="item.id">
|
||||
<el-row>
|
||||
<el-col style="text-align: center" :span="4">{{item.id}}</el-col>
|
||||
<el-col style="text-align: center" :title="item.materialName" :span="4">{{item.materialName}}</el-col>
|
||||
<el-col style="text-align: center" :span="3">{{item.stock}}</el-col>
|
||||
<el-col style="text-align: center" :span="4">{{
|
||||
item.id
|
||||
}}</el-col>
|
||||
<el-col
|
||||
style="text-align: center"
|
||||
:title="item.materialName"
|
||||
:span="4"
|
||||
>{{ item.materialName }}</el-col
|
||||
>
|
||||
<el-col style="text-align: center" :span="3">{{
|
||||
item.stock
|
||||
}}</el-col>
|
||||
|
||||
<el-col style="text-align: center" :span="6">
|
||||
{{item.startPurchase}}
|
||||
{{ item.startPurchase }}
|
||||
</el-col>
|
||||
<el-col style="text-align: center" :span="3">{{item.purchaseNumber}}</el-col>
|
||||
<el-col style="text-align: center" :span="4">{{item.createTime}}</el-col>
|
||||
|
||||
<el-col style="text-align: center" :span="3">{{
|
||||
item.purchaseNumber
|
||||
}}</el-col>
|
||||
<el-col style="text-align: center" :span="4">{{
|
||||
item.createTime
|
||||
}}</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
@ -33,49 +58,48 @@
|
||||
</div>
|
||||
</container1>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container1 from "./components/container1/index.vue";
|
||||
|
||||
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 vueSeamlessScroll from "vue-seamless-scroll";
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left2',
|
||||
name: "left2",
|
||||
components: {
|
||||
container1,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
scrollList: [],
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
this.getData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getData () {
|
||||
getData() {
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getMaterialPlanPic',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
url: "/hx/scientificProduction/getMaterialPlanPic",
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
this.scrollList = res.data;
|
||||
this.listData = Array(this.scrollList.length).fill(0);
|
||||
this.$refs.seamlessScroll.reset();
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -84,7 +108,7 @@ export default {
|
||||
|
||||
font-size: 14px;
|
||||
}
|
||||
.warp {
|
||||
.warp-scroll {
|
||||
height: 168px;
|
||||
width: 100%;
|
||||
margin: 10px auto 0 auto;
|
||||
|
||||
@ -1,12 +1,30 @@
|
||||
<template>
|
||||
<div>
|
||||
<container1 title="里程牌及瓶颈短线工作计划">
|
||||
<el-select clearable slot="datePicker" v-model="value" size="mini" placeholder="请选择">
|
||||
<el-option v-for="item in selectData" :key="item" :label="item" :value="item"> </el-option>
|
||||
<el-select
|
||||
clearable
|
||||
slot="datePicker"
|
||||
v-model="value"
|
||||
size="mini"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in selectData"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div class="left3-content">
|
||||
<el-col :span="24" style="margin-bottom: 1px">
|
||||
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||
<el-row
|
||||
style="
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: rgba(0, 255, 255, 0.3);
|
||||
"
|
||||
>
|
||||
<el-col style="text-align: center" :span="3">项目</el-col>
|
||||
<el-col style="text-align: center" :span="5">工作内容</el-col>
|
||||
<el-col style="text-align: center" :span="5">进展情况</el-col>
|
||||
@ -14,26 +32,47 @@
|
||||
<el-col style="text-align: center" :span="4">目标完成时间</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<vue-seamless-scroll ref="seamlessScroll" :data="listData" class="warp" :class-option="{singleHeight: 42,}">
|
||||
<vue-seamless-scroll
|
||||
ref="seamlessScroll"
|
||||
:data="listData"
|
||||
class="warp-scroll"
|
||||
:class-option="{ singleHeight: 42 }"
|
||||
>
|
||||
<ul class="item">
|
||||
<li v-for="item in scrollList" :key="item.id">
|
||||
<el-row>
|
||||
<el-col style="text-align: center" :title="item.projectName" :span="3">{{ item.projectName }}</el-col>
|
||||
<el-col style="text-align: center" :title="item.jobContent" :span="5">{{ item.jobContent }}</el-col>
|
||||
<el-col
|
||||
style="text-align: center"
|
||||
:title="item.projectName"
|
||||
:span="3"
|
||||
>{{ item.projectName }}</el-col
|
||||
>
|
||||
<el-col
|
||||
style="text-align: center"
|
||||
:title="item.jobContent"
|
||||
:span="5"
|
||||
>{{ item.jobContent }}</el-col
|
||||
>
|
||||
<el-col style="text-align: center" :span="5">
|
||||
<span class="state" :class="{success: item.progress == '已完成',
|
||||
fault: item.progress == '未完成',
|
||||
progress: item.progress == '未开始',
|
||||
}">
|
||||
<span
|
||||
class="state"
|
||||
:class="{
|
||||
success: item.progress == '已完成',
|
||||
fault: item.progress == '未完成',
|
||||
progress: item.progress == '未开始',
|
||||
}"
|
||||
>
|
||||
<section v-if="item.progress == 1">已完成</section>
|
||||
<section v-else-if="item.progress == 3">未完成</section>
|
||||
<section v-else>未开始</section>
|
||||
</span>
|
||||
|
||||
</el-col>
|
||||
<el-col style="text-align: center" :span="7">{{item.forecastCompleteTime}}</el-col>
|
||||
<el-col style="text-align: center" :span="4">{{item.targetCompleteTime}}</el-col>
|
||||
|
||||
<el-col style="text-align: center" :span="7">{{
|
||||
item.forecastCompleteTime
|
||||
}}</el-col>
|
||||
<el-col style="text-align: center" :span="4">{{
|
||||
item.targetCompleteTime
|
||||
}}</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
@ -41,52 +80,51 @@
|
||||
</div>
|
||||
</container1>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container1 from "./components/container1/index.vue";
|
||||
|
||||
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 vueSeamlessScroll from "vue-seamless-scroll";
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left2',
|
||||
name: "left2",
|
||||
components: {
|
||||
container1,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
selectData: [],
|
||||
value: '',
|
||||
value: "",
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
scrollList: [],
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value (newVal, oldVal) {
|
||||
this.getData(newVal)
|
||||
value(newVal, oldVal) {
|
||||
this.getData(newVal);
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
this.getData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getData (projectName) {
|
||||
getData(projectName) {
|
||||
let params = {};
|
||||
if (projectName) {
|
||||
params['projectName'] = projectName
|
||||
params["projectName"] = projectName;
|
||||
}
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getMilepostAndBottleneckPic',
|
||||
method: 'get',
|
||||
url: "/hx/scientificProduction/getMilepostAndBottleneckPic",
|
||||
method: "get",
|
||||
params,
|
||||
}).then(res => {
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
this.scrollList = res.data.list;
|
||||
this.listData = Array(this.scrollList.length).fill(0);
|
||||
@ -95,10 +133,10 @@ export default {
|
||||
this.selectData = res.data.allProject;
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -107,7 +145,7 @@ export default {
|
||||
|
||||
font-size: 14px;
|
||||
}
|
||||
.warp {
|
||||
.warp-scroll {
|
||||
height: 168px;
|
||||
width: 100%;
|
||||
margin: 10px auto 0 auto;
|
||||
|
||||
@ -3,7 +3,13 @@
|
||||
<container1 title="调度会">
|
||||
<div class="left3-content">
|
||||
<el-col :span="24" style="margin-bottom: 1px">
|
||||
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||
<el-row
|
||||
style="
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: rgba(0, 255, 255, 0.3);
|
||||
"
|
||||
>
|
||||
<el-col style="text-align: center" :span="4">工作内容</el-col>
|
||||
<el-col style="text-align: center" :span="5">会议名称</el-col>
|
||||
<el-col style="text-align: center" :span="5">督办领导</el-col>
|
||||
@ -11,22 +17,50 @@
|
||||
<el-col style="text-align: center" :span="3">工作进展</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<vue-seamless-scroll ref="seamlessScroll" :data="listData" class="warp" :class-option="{singleHeight: 42,}">
|
||||
<vue-seamless-scroll
|
||||
ref="seamlessScroll"
|
||||
:data="listData"
|
||||
class="warp-scroll"
|
||||
:class-option="{ singleHeight: 42 }"
|
||||
>
|
||||
<ul class="item">
|
||||
<li v-for="item in scrollList" :key="item.id">
|
||||
<el-row>
|
||||
<el-col style="text-align: center" :title="item.jobContent" :span="4">{{item.jobContent}}</el-col>
|
||||
<el-col style="text-align: center" :title="item.meetingName" :span="5">{{item.meetingName}}</el-col>
|
||||
<el-col style="text-align: center" :title="item.checkLeader" :span="5">
|
||||
{{item.checkLeader}}
|
||||
<el-col
|
||||
style="text-align: center"
|
||||
:title="item.jobContent"
|
||||
:span="4"
|
||||
>{{ item.jobContent }}</el-col
|
||||
>
|
||||
<el-col
|
||||
style="text-align: center"
|
||||
:title="item.meetingName"
|
||||
:span="5"
|
||||
>{{ item.meetingName }}</el-col
|
||||
>
|
||||
<el-col
|
||||
style="text-align: center"
|
||||
:title="item.checkLeader"
|
||||
:span="5"
|
||||
>
|
||||
{{ item.checkLeader }}
|
||||
</el-col>
|
||||
<el-col style="text-align: center" :title="item.responsibleUnit" :span="7">{{item.responsibleUnit}}</el-col>
|
||||
<el-col
|
||||
style="text-align: center"
|
||||
:title="item.responsibleUnit"
|
||||
:span="7"
|
||||
>{{ item.responsibleUnit }}</el-col
|
||||
>
|
||||
<el-col style="text-align: center" :span="3">
|
||||
<span class="state" :class="{success: item.workProgress == '已完成',
|
||||
fault: item.workProgress == '未完成',
|
||||
progress: item.workProgress == '未开始',
|
||||
}">
|
||||
<section>{{item.workProgress|| '未开始'}}</section>
|
||||
<span
|
||||
class="state"
|
||||
:class="{
|
||||
success: item.workProgress == '已完成',
|
||||
fault: item.workProgress == '未完成',
|
||||
progress: item.workProgress == '未开始',
|
||||
}"
|
||||
>
|
||||
<section>{{ item.workProgress || "未开始" }}</section>
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -36,50 +70,48 @@
|
||||
</div>
|
||||
</container1>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container1 from "./components/container1/index.vue";
|
||||
|
||||
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 vueSeamlessScroll from "vue-seamless-scroll";
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left2',
|
||||
name: "left2",
|
||||
components: {
|
||||
container1,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
scrollList: [
|
||||
],
|
||||
}
|
||||
scrollList: [],
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
this.getData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getData () {
|
||||
getData() {
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getDispatchMeetingPic',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
url: "/hx/scientificProduction/getDispatchMeetingPic",
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
this.scrollList = res.data;
|
||||
this.listData = Array(this.scrollList.length).fill(0);
|
||||
this.$refs.seamlessScroll.reset();
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -88,7 +120,7 @@ export default {
|
||||
|
||||
font-size: 14px;
|
||||
}
|
||||
.warp {
|
||||
.warp-scroll {
|
||||
height: 168px;
|
||||
width: 100%;
|
||||
margin: 10px auto 0 auto;
|
||||
|
||||
@ -3,7 +3,13 @@
|
||||
<container1 title="人员管理">
|
||||
<div class="left3-content">
|
||||
<el-col :span="24" style="margin-bottom: 1px">
|
||||
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||
<el-row
|
||||
style="
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: rgba(0, 255, 255, 0.3);
|
||||
"
|
||||
>
|
||||
<el-col style="text-align: center" :span="4">班组名称</el-col>
|
||||
<el-col style="text-align: center" :span="4">人员数量</el-col>
|
||||
<el-col style="text-align: center" :span="4">班次数</el-col>
|
||||
@ -11,16 +17,33 @@
|
||||
<el-col style="text-align: center" :span="8">到岗人员</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<vue-seamless-scroll ref="seamlessScroll" :data="listData" class="warp" :class-option="{singleHeight: 42,}">
|
||||
<vue-seamless-scroll
|
||||
ref="seamlessScroll"
|
||||
:data="listData"
|
||||
class="warp-scroll"
|
||||
:class-option="{ singleHeight: 42 }"
|
||||
>
|
||||
<ul class="item">
|
||||
<li v-for="item in scrollList" :key="item.id">
|
||||
<el-row>
|
||||
<el-col style="text-align: center" :span="4">{{item.teamName}}</el-col>
|
||||
<el-col style="text-align: center" :span="4">{{item.peopleTotal}}人</el-col>
|
||||
<el-col style="text-align: center" :span="4">{{item.shift}}
|
||||
<el-col style="text-align: center" :span="4">{{
|
||||
item.teamName
|
||||
}}</el-col>
|
||||
<el-col style="text-align: center" :span="4"
|
||||
>{{ item.peopleTotal }}人</el-col
|
||||
>
|
||||
<el-col style="text-align: center" :span="4"
|
||||
>{{ item.shift }}
|
||||
</el-col>
|
||||
<el-col style="text-align: center" :span="4">{{item.realWorkerTotal}}人</el-col>
|
||||
<el-col style="text-align: center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :span="8" :title="item.peopleList">{{item.peopleList}}</el-col>
|
||||
<el-col style="text-align: center" :span="4"
|
||||
>{{ item.realWorkerTotal }}人</el-col
|
||||
>
|
||||
<el-col
|
||||
style="text-align: center"
|
||||
:span="8"
|
||||
:title="item.peopleList"
|
||||
>{{ item.peopleList }}</el-col
|
||||
>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
@ -28,49 +51,48 @@
|
||||
</div>
|
||||
</container1>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container1 from "./components/container1/index.vue";
|
||||
|
||||
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 vueSeamlessScroll from "vue-seamless-scroll";
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left2',
|
||||
name: "left2",
|
||||
components: {
|
||||
container1,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
scrollList: [],
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
this.getData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getData () {
|
||||
getData() {
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getTeamAttendancePic',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
url: "/hx/scientificProduction/getTeamAttendancePic",
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
this.scrollList = res.data;
|
||||
this.listData = Array(this.scrollList.length).fill(0);
|
||||
this.$refs.seamlessScroll.reset();
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -79,7 +101,7 @@ export default {
|
||||
|
||||
font-size: 14px;
|
||||
}
|
||||
.warp {
|
||||
.warp-scroll {
|
||||
height: 168px;
|
||||
width: 100%;
|
||||
margin: 10px auto 0 auto;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,53 +1,69 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-divider content-position="left"><span class="text-bold-18">全厂资源动态</span></el-divider>
|
||||
<left1 />
|
||||
<el-divider content-position="left"><span class="text-bold-18">车辆管理</span></el-divider>
|
||||
<left2 />
|
||||
<el-divider content-position="left"><span class="text-bold-18">本周计划</span></el-divider>
|
||||
<left3 />
|
||||
<el-divider content-position="left"><span class="text-bold-18">全厂工房作业信息</span></el-divider>
|
||||
<center1 />
|
||||
<el-divider content-position="left"><span class="text-bold-18">危险点、工房图片管理</span></el-divider>
|
||||
<center2 />
|
||||
<el-divider content-position="left"><span class="text-bold-18">全厂作业明细</span></el-divider>
|
||||
<right1 />
|
||||
<el-divider content-position="left"><span class="text-bold-18">装药当前作业内容</span></el-divider>
|
||||
<right2 />
|
||||
<el-divider content-position="left"><span class="text-bold-18">酯生产量</span></el-divider>
|
||||
<right3 />
|
||||
</div>
|
||||
<div class="app-container">
|
||||
<el-divider content-position="left"
|
||||
><span class="text-bold-18">全厂资源动态</span></el-divider
|
||||
>
|
||||
<left1 />
|
||||
<el-divider content-position="left"
|
||||
><span class="text-bold-18">车辆管理</span></el-divider
|
||||
>
|
||||
<left2 />
|
||||
<el-divider content-position="left"
|
||||
><span class="text-bold-18">本周计划</span></el-divider
|
||||
>
|
||||
<left3 />
|
||||
<el-divider content-position="left"
|
||||
><span class="text-bold-18">全厂工房作业信息</span></el-divider
|
||||
>
|
||||
<center1 />
|
||||
<el-divider content-position="left"
|
||||
><span class="text-bold-18">危险点、工房图片管理</span></el-divider
|
||||
>
|
||||
<center2 />
|
||||
<el-divider content-position="left"
|
||||
><span class="text-bold-18">全厂作业明细</span></el-divider
|
||||
>
|
||||
<right1 />
|
||||
<el-divider content-position="left"
|
||||
><span class="text-bold-18">装药当前作业内容</span></el-divider
|
||||
>
|
||||
<right2 />
|
||||
<el-divider content-position="left"
|
||||
><span class="text-bold-18">硝酸酯生产量</span></el-divider
|
||||
>
|
||||
<right3 />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import left1 from './left1.vue'
|
||||
import left2 from './left2.vue'
|
||||
import left3 from './left3.vue'
|
||||
import center1 from './center1.vue'
|
||||
import center2 from './center2.vue'
|
||||
import right1 from './right1.vue'
|
||||
import right2 from './right2.vue'
|
||||
import right3 from './right3.vue'
|
||||
import left1 from "./left1.vue";
|
||||
import left2 from "./left2.vue";
|
||||
import left3 from "./left3.vue";
|
||||
import center1 from "./center1.vue";
|
||||
import center2 from "./center2.vue";
|
||||
import right1 from "./right1.vue";
|
||||
import right2 from "./right2.vue";
|
||||
import right3 from "./right3.vue";
|
||||
export default {
|
||||
components: {
|
||||
left1,
|
||||
left2,
|
||||
left3,
|
||||
center1,
|
||||
center2,
|
||||
right1,
|
||||
right2,
|
||||
right3,
|
||||
},
|
||||
}
|
||||
components: {
|
||||
left1,
|
||||
left2,
|
||||
left3,
|
||||
center1,
|
||||
center2,
|
||||
right1,
|
||||
right2,
|
||||
right3,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
.el-divider:nth-child(n + 2) {
|
||||
margin-top: 50px;
|
||||
}
|
||||
.el-divider:nth-child(n + 2) {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
.text-bold-18 {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,174 +1,198 @@
|
||||
<template>
|
||||
<el-row :gutter="20">
|
||||
<!--用户数据-->
|
||||
<el-col :span="24" :xs="24">
|
||||
<el-row :gutter="10" class="mb8 fr">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport">导入</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
:loading="exportLoading"
|
||||
@click="importTemplate"
|
||||
>导出模板</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<!--用户数据-->
|
||||
<el-col :span="24" :xs="24">
|
||||
<el-row :gutter="10" class="mb8 fr">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="info"
|
||||
plain
|
||||
icon="el-icon-upload2"
|
||||
size="mini"
|
||||
@click="handleImport"
|
||||
>导入</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
:loading="exportLoading"
|
||||
@click="importTemplate"
|
||||
>导出模板</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="userList">
|
||||
<el-table-column label="序号" align="center" prop="id" width="80" />
|
||||
<el-table-column label="酯工作内容" align="center" prop="jobContent" />
|
||||
<el-table-column label="开车时间" align="center" prop="driveDate" />
|
||||
<el-table-column label="预计结束时间" align="center" prop="forecastEndDate" />
|
||||
<el-table-column label="酯生产量" align="center" prop="esterProduction" />
|
||||
<el-table-column label="粘合剂干燥情况" align="center" prop="cleanStatus" />
|
||||
</el-table>
|
||||
<el-table v-loading="loading" :data="userList">
|
||||
<el-table-column label="序号" align="center" prop="id" width="80" />
|
||||
<el-table-column label="酯工作内容" align="center" prop="jobContent" />
|
||||
<el-table-column label="开车时间" align="center" prop="driveDate" />
|
||||
<el-table-column
|
||||
label="预计结束时间"
|
||||
align="center"
|
||||
prop="forecastEndDate"
|
||||
/>
|
||||
<el-table-column
|
||||
label="硝酸酯生产量"
|
||||
align="center"
|
||||
prop="esterProduction"
|
||||
/>
|
||||
<el-table-column
|
||||
label="粘合剂干燥情况"
|
||||
align="center"
|
||||
prop="cleanStatus"
|
||||
/>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:autoScroll="false"
|
||||
:pageSizes="[2, 5, 10, 20]"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-col>
|
||||
<!-- 用户导入对话框 -->
|
||||
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:limit="1"
|
||||
accept=".xlsx, .xls"
|
||||
:headers="upload.headers"
|
||||
:action="upload.url"
|
||||
:disabled="upload.isUploading"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
:auto-upload="false"
|
||||
drag
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">
|
||||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||
</div>
|
||||
</el-upload>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
||||
<el-button @click="upload.open = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-row>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:autoScroll="false"
|
||||
:pageSizes="[2, 5, 10, 20]"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-col>
|
||||
<!-- 用户导入对话框 -->
|
||||
<el-dialog
|
||||
:title="upload.title"
|
||||
:visible.sync="upload.open"
|
||||
width="400px"
|
||||
append-to-body
|
||||
>
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:limit="1"
|
||||
accept=".xlsx, .xls"
|
||||
:headers="upload.headers"
|
||||
:action="upload.url"
|
||||
:disabled="upload.isUploading"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
:auto-upload="false"
|
||||
drag
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">
|
||||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||
</div>
|
||||
</el-upload>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
||||
<el-button @click="upload.open = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-row>
|
||||
</template>
|
||||
<script>
|
||||
import { rightThreeList, rightThreeImportTemplate } from './indexApi'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import { rightThreeList, rightThreeImportTemplate } from "./indexApi";
|
||||
import { getToken } from "@/utils/auth";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 导出遮罩层
|
||||
exportLoading: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: this.page_size,
|
||||
},
|
||||
// 用户信息
|
||||
userList: [],
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 用户导入参数
|
||||
upload: {
|
||||
// 是否显示弹出层（用户导入）
|
||||
open: false,
|
||||
// 弹出层标题（用户导入）
|
||||
title: '',
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 是否更新已经存在的用户数据
|
||||
updateSupport: 0,
|
||||
// 设置上传的请求头部
|
||||
headers: { Authorization: 'Bearer ' + getToken() },
|
||||
// 上传的地址
|
||||
url: process.env.VUE_APP_BASE_API + '/hx/esterProduction/importData',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 查询用户列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
rightThreeList(this.queryParams).then(res => {
|
||||
this.userList = res.rows
|
||||
this.total = res.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
// handleDelete(row) {
|
||||
// this.$modal
|
||||
// .confirm('是否确认删除编号为"' + row.id + '"的数据项？')
|
||||
// .then(function () {
|
||||
// return rightTwoDel({ id: row.id })
|
||||
// })
|
||||
// .then(() => {
|
||||
// this.getList()
|
||||
// this.$modal.msgSuccess('删除成功')
|
||||
// })
|
||||
// .catch(() => {})
|
||||
// },
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams
|
||||
this.$modal
|
||||
.confirm('是否确认导出所有数据项？')
|
||||
.then(() => {
|
||||
this.exportLoading = true
|
||||
return exportUser(queryParams)
|
||||
})
|
||||
.then(response => {
|
||||
this.$download.name(response.msg)
|
||||
this.exportLoading = false
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
/** 导入按钮操作 */
|
||||
handleImport() {
|
||||
this.upload.title = '数据导入'
|
||||
this.upload.open = true
|
||||
},
|
||||
/** 下载模板操作 */
|
||||
importTemplate() {
|
||||
rightThreeImportTemplate().then(response => {
|
||||
this.$download.name(response.msg)
|
||||
})
|
||||
},
|
||||
// 文件上传中处理
|
||||
handleFileUploadProgress(event, file, fileList) {
|
||||
this.upload.isUploading = true
|
||||
},
|
||||
// 文件上传成功处理
|
||||
handleFileSuccess(response, file, fileList) {
|
||||
this.upload.open = false
|
||||
this.upload.isUploading = false
|
||||
this.$refs.upload.clearFiles()
|
||||
this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
|
||||
this.getList()
|
||||
},
|
||||
// 提交上传文件
|
||||
submitFileForm() {
|
||||
this.$refs.upload.submit()
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 导出遮罩层
|
||||
exportLoading: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: this.page_size,
|
||||
},
|
||||
// 用户信息
|
||||
userList: [],
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 用户导入参数
|
||||
upload: {
|
||||
// 是否显示弹出层（用户导入）
|
||||
open: false,
|
||||
// 弹出层标题（用户导入）
|
||||
title: "",
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 是否更新已经存在的用户数据
|
||||
updateSupport: 0,
|
||||
// 设置上传的请求头部
|
||||
headers: { Authorization: "Bearer " + getToken() },
|
||||
// 上传的地址
|
||||
url: process.env.VUE_APP_BASE_API + "/hx/esterProduction/importData",
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/** 查询用户列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
rightThreeList(this.queryParams).then((res) => {
|
||||
this.userList = res.rows;
|
||||
this.total = res.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
// handleDelete(row) {
|
||||
// this.$modal
|
||||
// .confirm('是否确认删除编号为"' + row.id + '"的数据项？')
|
||||
// .then(function () {
|
||||
// return rightTwoDel({ id: row.id })
|
||||
// })
|
||||
// .then(() => {
|
||||
// this.getList()
|
||||
// this.$modal.msgSuccess('删除成功')
|
||||
// })
|
||||
// .catch(() => {})
|
||||
// },
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$modal
|
||||
.confirm("是否确认导出所有数据项？")
|
||||
.then(() => {
|
||||
this.exportLoading = true;
|
||||
return exportUser(queryParams);
|
||||
})
|
||||
.then((response) => {
|
||||
this.$download.name(response.msg);
|
||||
this.exportLoading = false;
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
/** 导入按钮操作 */
|
||||
handleImport() {
|
||||
this.upload.title = "数据导入";
|
||||
this.upload.open = true;
|
||||
},
|
||||
/** 下载模板操作 */
|
||||
importTemplate() {
|
||||
rightThreeImportTemplate().then((response) => {
|
||||
this.$download.name(response.msg);
|
||||
});
|
||||
},
|
||||
// 文件上传中处理
|
||||
handleFileUploadProgress(event, file, fileList) {
|
||||
this.upload.isUploading = true;
|
||||
},
|
||||
// 文件上传成功处理
|
||||
handleFileSuccess(response, file, fileList) {
|
||||
this.upload.open = false;
|
||||
this.upload.isUploading = false;
|
||||
this.$refs.upload.clearFiles();
|
||||
this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
|
||||
this.getList();
|
||||
},
|
||||
// 提交上传文件
|
||||
submitFileForm() {
|
||||
this.$refs.upload.submit();
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -35,7 +35,7 @@ module.exports = {
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
// target: `http://localhost:1818`,
|
||||
// target: `http://120.26.107.74:1818`,
|
||||
target: `http://192.168.0.115:1818`,
|
||||
target: `http://192.168.0.154:1818`,
|
||||
// target: `http://124.70.138.50:1818`,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
|
||||
Reference in New Issue
Block a user