williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

轮播文本超出处理,折线最小值处理

Browse Source
This commit is contained in:
熊丽君
2022-01-24 14:50:16 +08:00
parent b376bedc66
commit 4c5c6fb6d4
15 changed files with 1731 additions and 1468 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/bigScreen/drivingCabin/center2.vue
View File

@ -4,7 +4,7 @@
<vue-seamless-scroll <vue-seamless-scroll
ref="seamlessScroll" ref="seamlessScroll"
:data="listData" :data="listData"
class="warp" class="warp-scroll"
:class-option="{ :class-option="{
openWatch: true, openWatch: true,
singleHeight: 35, singleHeight: 35,
@ -185,7 +185,7 @@ export default {
} }
} }
.warp { .warp-scroll {
height: 280px; height: 280px;
width: 440px; width: 440px;
margin: 0 auto; margin: 0 auto;

75
src/views/bigScreen/management/center2.vue
View File

@ -1,62 +1,82 @@
<template> <template>
<div> <div>
<container4 title="今日动态"> <container4 title="今日动态">
<vue-seamless-scroll :data="listData" class="warp" :class-option="{ <vue-seamless-scroll
singleHeight: 35 :data="listData"
}"> class="warp-scroll"
:class-option="{
singleHeight: 35,
}"
>
<ul class="item"> <ul class="item">
<li> <li>
<el-row> <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="5">1234万</el-col>
<el-col :span="7"></el-col> <el-col :span="7"></el-col>
</el-row> </el-row>
</li> </li>
<li> <li>
<el-row> <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="5">1234万</el-col>
<el-col :span="7"></el-col> <el-col :span="7"></el-col>
</el-row> </el-row>
</li> </li>
<li> <li>
<el-row> <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="5">1234份</el-col>
<el-col :span="7"></el-col> <el-col :span="7"></el-col>
</el-row> </el-row>
</li> </li>
<li> <li>
<el-row> <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="5">1234个</el-col>
<el-col :span="7"></el-col> <el-col :span="7"></el-col>
</el-row> </el-row>
</li> </li>
<li> <li>
<el-row> <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="5">1234个</el-col>
<el-col :span="7"></el-col> <el-col :span="7"></el-col>
</el-row> </el-row>
</li> </li>
<li> <li>
<el-row> <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="5">123台</el-col>
<el-col :span="7">运行率：88%</el-col> <el-col :span="7">运行率：88%</el-col>
</el-row> </el-row>
</li> </li>
<li> <li>
<el-row> <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="5">890人</el-col>
<el-col :span="7">出勤率：73%</el-col> <el-col :span="7">出勤率：73%</el-col>
</el-row> </el-row>
</li> </li>
<li> <li>
<el-row> <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="5">890个</el-col>
<el-col :span="7">完成率：66%</el-col> <el-col :span="7">完成率：66%</el-col>
</el-row> </el-row>
@ -65,39 +85,32 @@
</vue-seamless-scroll> </vue-seamless-scroll>
</container4> </container4>
</div> </div>
</template> </template>
<script> <script>
import container4 from "./components/container4/index.vue"; import container4 from "./components/container4/index.vue";
import rocketTit from "../components/rocketTit/index.vue"; import rocketTit from "../components/rocketTit/index.vue";
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from "vue-seamless-scroll";
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from '../../dashboard/mixins/resize' import resize from "../../dashboard/mixins/resize";
export default { export default {
mixins: [resize], mixins: [resize],
name: 'left1', name: "left1",
components: { components: {
container4, container4,
rocketTit, rocketTit,
vueSeamlessScroll vueSeamlessScroll,
}, },
data () { data() {
return { return {
listData: [1, 2, 3, 4, 5, 6, 7, 8], listData: [1, 2, 3, 4, 5, 6, 7, 8],
} };
}, },
mounted () { mounted() {},
beforeDestroy() {},
}, methods: {},
beforeDestroy () { };
},
methods: {
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -133,7 +146,7 @@ export default {
} }
} }
.warp { .warp-scroll {
height: 280px; height: 280px;
width: 440px; width: 440px;
margin: 0 auto; margin: 0 auto;

11
src/views/bigScreen/qualityManage/center.vue
View File

@ -50,11 +50,10 @@
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">产品错、漏检率</span></div> <div><span style="font-weight: bold">产品错、漏检率</span></div>
<div class="box"> <div class="box">
<span <span>
>{{ dataInfo.realErrorCheckRate }}%/{{ {{ dataInfo.realErrorCheckRate }}%
dataInfo.targetErrorCheckRate <!-- /{{dataInfo.targetErrorCheckRate}}% -->
}}%</span </span>
>
</div> </div>
</div> </div>
<div class="data-item"> <div class="data-item">
@ -110,6 +109,8 @@ export default {
commonlyProblemTotal: 0, commonlyProblemTotal: 0,
lowProblemTotal: 0, lowProblemTotal: 0,
smallProductCate: 0, smallProductCate: 0,
realErrorCheckRate: 0,
targetErrorCheckRate: 0,
errorCheckRate: 0, errorCheckRate: 0,
leakCheckRate: 0, leakCheckRate: 0,
planCompleteRate: 0, planCompleteRate: 0,

2
src/views/bigScreen/qualityManage/center2.vue
View File

@ -113,7 +113,7 @@ export default {
yAxis: { yAxis: {
type: "value", type: "value",
name: "", name: "",
min: 0, min: resData.spc.lowerLimit - 50,
// max: 250, // max: 250,
// interval: 50, // interval: 50,
axisLabel: { axisLabel: {

4
src/views/bigScreen/scientific/tab1/center1.vue
View File

@ -53,7 +53,7 @@
step: 0.5, step: 0.5,
direction: 2, direction: 2,
}" }"
class="warp" class="warp-scroll"
> >
<ul class="ul-item"> <ul class="ul-item">
<li <li
@ -246,7 +246,7 @@ export default {
float: right; float: right;
} }
} }
.warp { .warp-scroll {
// height: 100px; // height: 100px;
margin: 0 auto; margin: 0 auto;
margin-top: 25px; margin-top: 25px;

609
src/views/bigScreen/scientific/tab1/left1.vue
View File

@ -1,320 +1,343 @@
<template> <template>
<container1 title="全厂资源动态"> <container1 title="全厂资源动态">
<div class="trends"> <div class="trends">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<div class="trends-item"> <div class="trends-item">
<div class="trends-item-icon"> <div class="trends-item-icon">
<img src="./img/trends-item-icon1.png" alt="" /> <img src="./img/trends-item-icon1.png" alt="" />
</div> </div>
<div class="trends-item-content"> <div class="trends-item-content">
<div class="tit">作业工房/总数</div> <div class="tit">作业工房/总数</div>
<div class="value"> <div class="value">
{{ dataInfo.workingWorkshopTotal }}/<span class="small">{{ dataInfo.workshopTotal }}</span> {{ dataInfo.workingWorkshopTotal }}/<span class="small">{{
</div> dataInfo.workshopTotal
<div class="progressBar"> }}</span>
<progressBar :percentage="percentage" v-if="percentage" /> </div>
</div> <div class="progressBar">
</div> <progressBar :percentage="percentage" v-if="percentage" />
</div> </div>
</el-col> </div>
<el-col :span="12"> </div>
<div class="trends-item"> </el-col>
<div class="trends-item-icon"> <el-col :span="12">
<img src="./img/trends-item-icon2.png" alt="" /> <div class="trends-item">
</div> <div class="trends-item-icon">
<div class="trends-item-content"> <img src="./img/trends-item-icon2.png" alt="" />
<div class="tit">人员数量/出勤率</div> </div>
<div class="value"> <div class="trends-item-content">
{{ dataInfo.realAttendance }}/<span class="small">{{ (dataInfo.attendanceRate - 0).toFixed(0) }}%</span> <div class="tit">人员数量/出勤率</div>
</div> <div class="value">
<div class="progressBar"> {{ dataInfo.realAttendance }}/<span class="small"
<progressBar :percentage="dataInfo.attendanceRate" /> >{{ (dataInfo.attendanceRate - 0).toFixed(0) }}%</span
</div> >
</div> </div>
</div> <div class="progressBar">
</el-col> <progressBar :percentage="dataInfo.attendanceRate" />
<el-col :span="24"> </div>
<div style="height: 27px"></div> </div>
</el-col> </div>
</el-col>
<el-col :span="24">
<div style="height: 27px"></div>
</el-col>
<el-col :span="12"> <el-col :span="12">
<div class="trends-item"> <div class="trends-item">
<div class="trends-item-icon"> <div class="trends-item-icon">
<img src="./img/trends-item-icon3.png" alt="" /> <img src="./img/trends-item-icon3.png" alt="" />
</div> </div>
<div class="trends-item-content"> <div class="trends-item-content">
<div class="tit">设备运行数量/运行率</div> <div class="tit">设备运行数量/运行率</div>
<div class="value"> <div class="value">
{{ dataInfo.equipmentRunTotal }}/<span class="small">{{ dataInfo.equipmentRunRate }}%</span> {{ dataInfo.equipmentRunTotal }}/<span class="small"
</div> >{{ dataInfo.equipmentRunRate }}%</span
<div class="progressBar"> >
<progressBar :percentage="dataInfo.equipmentRunRate" /> </div>
</div> <div class="progressBar">
</div> <progressBar :percentage="dataInfo.equipmentRunRate" />
</div> </div>
</el-col> </div>
<el-col :span="12"> </div>
<div class="trends-item"> </el-col>
<div class="trends-item-icon"> <el-col :span="12">
<img src="./img/trends-item-icon2.png" alt="" /> <div class="trends-item">
</div> <div class="trends-item-icon">
<div class="trends-item-content"> <img src="./img/trends-item-icon2.png" alt="" />
<div class="tit">正常采集率</div> </div>
<div class="value">{{ dataInfo.videoCollectionRate }}%</div> <div class="trends-item-content">
<div class="progressBar"> <div class="tit">正常采集率</div>
<progressBar :percentage="dataInfo.videoCollectionRate" /> <div class="value">{{ dataInfo.videoCollectionRate }}%</div>
</div> <div class="progressBar">
</div> <progressBar :percentage="dataInfo.videoCollectionRate" />
</div> </div>
</el-col> </div>
</el-row> </div>
<div style="height: 45px"></div> </el-col>
<div class="car"> </el-row>
<div class="car-tit"> <div style="height: 45px"></div>
<div class="left">被使用车辆总数</div> <div class="car">
<div class="right">{{ carTotal.useTotal }}<span>辆</span></div> <div class="car-tit">
</div> <div class="left">被使用车辆总数</div>
<div style="margin: 5px 0 10px 0"> <div class="right">{{ carTotal.useTotal }}<span>辆</span></div>
<progressBar :percentage="carTotal.useTotal / carTotal.total || 0" :strokeWidth="12" /> </div>
</div> <div style="margin: 5px 0 10px 0">
<div class="describe"> <progressBar
<div class="left">总车辆数：{{ carTotal.total }}</div> :percentage="carTotal.useTotal / carTotal.total || 0"
<div class="right">使用率：{{ carTotal.useTotal / carTotal.total || 0 }}%</div> :strokeWidth="12"
</div> />
</div> </div>
<vue-seamless-scroll <div class="describe">
ref="seamlessScroll" <div class="left">总车辆数：{{ carTotal.total }}</div>
:data="listData" <div class="right">
class="warp" 使用率：{{ carTotal.useTotal / carTotal.total || 0 }}%
:class-option="{ </div>
singleHeight: 48, </div>
}" </div>
> <vue-seamless-scroll
<ul class="item"> ref="seamlessScroll"
<li v-for="item in listData" :key="item.id"> :data="listData"
<el-row> class="warp-scroll"
<el-col :span="10"><img src="./img/1.png" />{{ item.carName }}</el-col> :class-option="{
<el-col :span="6"> singleHeight: 48,
<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> <ul class="item">
</el-col> <li v-for="item in listData" :key="item.id">
<el-col :span="8" style="text-align: right"><img src="./img/2.png" />{{ item.nowAddress }}</el-col> <el-row>
</el-row> <el-col :span="10"
</li> ><img src="./img/1.png" />{{ item.carName }}</el-col
</ul> >
</vue-seamless-scroll> <el-col :span="6">
</div> <div class="state success" v-if="item.carStatus == '使用中'">
</container1> {{ 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> </template>
<script> <script>
import container1 from './components/container1/index.vue' import container1 from "./components/container1/index.vue";
import progressBar from '@/views/bigScreen/components/progress/index.vue' import progressBar from "@/views/bigScreen/components/progress/index.vue";
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from "vue-seamless-scroll";
export default { export default {
components: { components: {
container1, //#endregion, container1, //#endregion,
progressBar, progressBar,
vueSeamlessScroll, vueSeamlessScroll,
}, },
data() { data() {
return { return {
listData: [], listData: [],
dataInfo: { dataInfo: {
workingWorkshopTotal:0, workingWorkshopTotal: 0,
workshopTotal:0, workshopTotal: 0,
realAttendance:0, realAttendance: 0,
attendanceRate:0, attendanceRate: 0,
equipmentRunTotal:0, equipmentRunTotal: 0,
equipmentRunRate:0, equipmentRunRate: 0,
videoCollectionRate:0, videoCollectionRate: 0,
}, },
carTotal: { carTotal: {
total:0, total: 0,
useTotal:0 useTotal: 0,
}, },
} };
}, },
computed: { computed: {
percentage() { percentage() {
return (this.dataInfo.workingWorkshopTotal / this.dataInfo.workshopTotal) * 100 return (
}, (this.dataInfo.workingWorkshopTotal / this.dataInfo.workshopTotal) * 100
}, );
methods: { },
getList() { },
this.request({ methods: {
url: '/hx/scientificProduction/getHxFactoryResourcesPic', getList() {
}).then(({ data }) => { this.request({
this.dataInfo = data url: "/hx/scientificProduction/getHxFactoryResourcesPic",
}) }).then(({ data }) => {
this.request({ this.dataInfo = data;
url: '/hx/scientificProduction/getHxCarUsePic1', });
}).then(({ data }) => { this.request({
this.carTotal = data url: "/hx/scientificProduction/getHxCarUsePic1",
}) }).then(({ data }) => {
this.request({ this.carTotal = data;
url: '/hx/scientificProduction/getHxCarUsePic2', });
}).then(({ data }) => { this.request({
this.listData = data url: "/hx/scientificProduction/getHxCarUsePic2",
this.$refs.seamlessScroll.reset() }).then(({ data }) => {
}) this.listData = data;
}, this.$refs.seamlessScroll.reset();
}, });
created() { },
this.getList() },
}, created() {
} this.getList();
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.trends { .trends {
padding: 0 25px; padding: 0 25px;
} }
.trends-item { .trends-item {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
} }
.trends-item-icon { .trends-item-icon {
width: 50px; width: 50px;
height: 111px; height: 111px;
background-image: url(./img/trends-item-bg.png); background-image: url(./img/trends-item-bg.png);
background-size: cover; background-size: cover;
background-position: center right; background-position: center right;
background-repeat: no-repeat; background-repeat: no-repeat;
display: flex; display: flex;
align-items: center; align-items: center;
img { img {
height: 32px; height: 32px;
} }
} }
.trends-item-content { .trends-item-content {
margin-left: 15px; margin-left: 15px;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-betweens; justify-content: space-betweens;
.progressBar { .progressBar {
height: 20px; height: 20px;
width: 100px; width: 100px;
} }
.value { .value {
flex: 1; flex: 1;
} }
.tit { .tit {
padding: 0 10px; padding: 0 10px;
height: 32px; height: 32px;
font-size: 16px; font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: #ffffff; color: #ffffff;
line-height: 32px; line-height: 32px;
background-image: url(./img/tit-bg.png); background-image: url(./img/tit-bg.png);
background-size: 140px 32px; background-size: 140px 32px;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.value { .value {
font-size: 36px; font-size: 36px;
font-family: Roboto-Medium, Roboto; font-family: Roboto-Medium, Roboto;
font-weight: 500; font-weight: 500;
color: #55c5a2; color: #55c5a2;
.small { .small {
font-size: 28px; font-size: 28px;
} }
} }
} }
.car { .car {
font-weight: 500; font-weight: 500;
color: #ffffff; color: #ffffff;
.left { .left {
float: left; float: left;
} }
.right { .right {
float: right; float: right;
} }
.car-tit { .car-tit {
.right { .right {
font-size: 25px; font-size: 25px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #1fe7e5; color: #1fe7e5;
span { span {
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #f4f4f4; color: #f4f4f4;
} }
} }
} }
.describe { .describe {
font-size: 15px; font-size: 15px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #ffffff; color: #ffffff;
} }
div { div {
overflow: hidden; overflow: hidden;
} }
} }
.warp { .warp-scroll {
height: 128px; height: 128px;
width: 100%; width: 100%;
margin: 10px auto 0 auto; margin: 10px auto 0 auto;
overflow: hidden; overflow: hidden;
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0 auto; margin: 0 auto;
li, li,
a { a {
display: block; display: block;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 15px; font-size: 15px;
} }
li { li {
font-weight: 400; font-weight: 400;
color: #fff; color: #fff;
display: block; display: block;
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%); background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
padding-left: 20px; padding-left: 20px;
margin: 0 0 16px 0; margin: 0 0 16px 0;
img { img {
vertical-align: sub; vertical-align: sub;
margin-right: 5px; margin-right: 5px;
} }
} }
.state { .state {
position: relative; position: relative;
&::before { &::before {
content: ''; content: "";
display: block; display: block;
position: absolute; position: absolute;
left: -16px; left: -16px;
top: 12px; top: 12px;
width: 8px; width: 8px;
height: 8px; height: 8px;
background: #a9b8c5; background: #a9b8c5;
border-radius: 50%; border-radius: 50%;
} }
&.success::before { &.success::before {
background: #1890ff; background: #1890ff;
} }
&.fault::before { &.fault::before {
background: #f75f53; background: #f75f53;
} }
&.free::before { &.free::before {
background: #a9b8c5; background: #a9b8c5;
} }
} }
} }
} }
</style> </style>

600
src/views/bigScreen/scientific/tab1/right1.vue
View File

@ -1,302 +1,326 @@
<template> <template>
<container3 title="全厂作业明细" :width="535" :height="975"> <container3 title="全厂作业明细" :width="535" :height="975">
<vue-seamless-scroll <vue-seamless-scroll
:data="listData" :data="listData"
class="warp" class="warp-scroll"
:class-option="{ :class-option="{
singleHeight: 84, singleHeight: 84,
}" }"
> >
<ul> <ul>
<li class="item" :class="item.dangerLevel == '一级' ? 'active' : ''" v-for="item in listData" :key="item.id"> <li
<div class="item-tit">{{ item.workHome }}</div> class="item"
<div class="item-content"> :class="item.dangerLevel == '一级' ? 'active' : ''"
<el-row> v-for="item in listData"
<el-col :span="12" :key="item.id"
><span class="text-tit">车间:</span><span class="text-val">{{ item.workshop }}</span></el-col >
> <div class="item-tit">{{ item.workHome }}</div>
<el-col :span="12" <div class="item-content">
><span class="text-tit">产品:</span><span class="text-val">{{ item.product }}</span></el-col <el-row>
> <el-col :span="12"
</el-row> ><span class="text-tit">车间:</span
<el-row> ><span class="text-val">{{ item.workshop }}</span></el-col
<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
<el-col :span="12"> ><span class="text-val">{{ item.product }}</span></el-col
<span class="text-tit">危险级别:</span> >
<span class="text-val level1" v-if="item.dangerLevel == '一级'">{{ item.dangerLevel }}</span> </el-row>
<span class="text-val level2" v-if="item.dangerLevel == '二级'">{{ item.dangerLevel }}</span> <el-row>
<span class="text-val level3" v-if="item.dangerLevel == '三级'">{{ item.dangerLevel }}</span> <el-col :span="12"
</el-col> ><span class="text-tit">工序:</span
</el-row> ><span class="text-val">{{ item.procedure }}</span></el-col
</div> >
</li> <el-col :span="12">
</ul> <span class="text-tit">危险级别:</span>
</vue-seamless-scroll> <span
<div class="sub"> class="text-val level1"
<div class="sub-left"> v-if="item.dangerLevel == '一级'"
<div class="sub-tit"><img src="./img/sub/sub1.png" alt="" />装药当前作业内容</div> >{{ item.dangerLevel }}</span
<div class="sub-content"> >
<div class="sub-item"> <span
<div class="sub-item-tit">编 号：</div> class="text-val level2"
<div class="sub-item-val">{{ oneData.numberNo }}</div> v-if="item.dangerLevel == '二级'"
</div> >{{ item.dangerLevel }}</span
<div class="sub-item"> >
<div class="sub-item-tit">称 量：</div> <span
<div class="sub-item-val">{{ oneData.weighing }}</div> class="text-val level3"
</div> v-if="item.dangerLevel == '三级'"
<div class="sub-item"> >{{ item.dangerLevel }}</span
<div class="sub-item-tit">混 合：</div> >
<div class="sub-item-val">{{ oneData.blend }}</div> </el-col>
</div> </el-row>
<div class="sub-item"> </div>
<div class="sub-item-tit">浇 注：</div> </li>
<div class="sub-item-val">{{ oneData.pouring }}</div> </ul>
</div> </vue-seamless-scroll>
<div class="sub-item"> <div class="sub">
<div class="sub-item-tit">总体推迟时间：</div> <div class="sub-left">
<div class="sub-item-val">{{ oneData.createTime }}</div> <div class="sub-tit">
</div> <img src="./img/sub/sub1.png" alt="" />装药当前作业内容
<div class="sub-item"> </div>
<div class="sub-item-tit">倒班车：</div> <div class="sub-content">
<div class="sub-item-val">{{ oneData.reverseBus }}</div> <div class="sub-item">
</div> <div class="sub-item-tit">编 号：</div>
</div> <div class="sub-item-val">{{ oneData.numberNo }}</div>
</div> </div>
<div class="sub-right"> <div class="sub-item">
<div class="sub-tit"><img src="./img/sub/sub2.png" alt="" />酯生产量</div> <div class="sub-item-tit">称 量：</div>
<div class="sub-content"> <div class="sub-item-val">{{ oneData.weighing }}</div>
<div class="sub-item"> </div>
<div class="sub-item-tit">{{ twoData.jobContent }}</div> <div class="sub-item">
</div> <div class="sub-item-tit">混 合：</div>
<div class="sub-item"> <div class="sub-item-val">{{ oneData.blend }}</div>
<div class="sub-item-tit">开车时间：</div> </div>
<div class="sub-item-val">{{ twoData.driveDate }}</div> <div class="sub-item">
</div> <div class="sub-item-tit">浇 注：</div>
<div class="sub-item"> <div class="sub-item-val">{{ oneData.pouring }}</div>
<div class="sub-item-tit">预计结束时间：</div> </div>
<div class="sub-item-val">{{ twoData.forecastEndDate }}</div> <div class="sub-item">
</div> <div class="sub-item-tit">总体推迟时间：</div>
<div class="sub-item"> <div class="sub-item-val">{{ oneData.createTime }}</div>
<div class="sub-item-tit">酯生产量：</div> </div>
<div class="sub-item-val">{{ twoData.esterProduction }}</div> <div class="sub-item">
</div> <div class="sub-item-tit">倒班车：</div>
<div class="sub-item"> <div class="sub-item-val">{{ oneData.reverseBus }}</div>
<div class="sub-item-tit">粘合剂干燥量：</div> </div>
<div class="sub-item-val">{{ twoData.cleanStatus }}</div> </div>
</div> </div>
</div> <div class="sub-right">
</div> <div class="sub-tit">
</div> <img src="./img/sub/sub2.png" alt="" />硝酸酯生产量
</container3> </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> </template>
<script> <script>
import container3 from './components/container3/index.vue' import container3 from "./components/container3/index.vue";
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from "vue-seamless-scroll";
export default { export default {
components: { components: {
container3, //#endregion, container3, //#endregion,
vueSeamlessScroll, vueSeamlessScroll,
}, },
data() { data() {
return { return {
listData: [], listData: [],
oneData: {}, oneData: {},
twoData: {}, twoData: {},
} };
}, },
methods: { methods: {
getList() { getList() {
// 全厂作业明细 // 全厂作业明细
this.request({ this.request({
url: '/hx/scientificProduction/getHxJobDetailsPic', url: "/hx/scientificProduction/getHxJobDetailsPic",
}).then(({ data }) => { }).then(({ data }) => {
this.listData = data this.listData = data;
}) });
// 装药当前作业内容 // 装药当前作业内容
this.request({ this.request({
url: '/hx/scientificProduction/getChargeJobContentPic', url: "/hx/scientificProduction/getChargeJobContentPic",
}).then(({ data }) => { }).then(({ data }) => {
this.oneData = data this.oneData = data;
}) });
}, },
getTwoList() { getTwoList() {
// 酯生产量 // 硝酸酯量
this.request({ this.request({
url: '/hx/scientificProduction/getHxEsterProductionPic', url: "/hx/scientificProduction/getHxEsterProductionPic",
}).then(({ data }) => { }).then(({ data }) => {
this.twoData = data this.twoData = data;
}) });
}, },
}, },
created() { created() {
this.getList() this.getList();
this.getTwoList() this.getTwoList();
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.warp { .warp-scroll {
height: 416px; height: 416px;
width: 100%; width: 100%;
margin: 10px auto 0 auto; margin: 10px auto 0 auto;
overflow: hidden; overflow: hidden;
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0 auto; margin: 0 auto;
li, li,
a { a {
display: block; display: block;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 15px; font-size: 15px;
} }
li { li {
font-weight: 400; font-weight: 400;
color: #fff; color: #fff;
display: block; display: block;
height: 40px; height: 40px;
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%); background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
margin: 0 0 4px 0; margin: 0 0 4px 0;
img { img {
vertical-align: sub; vertical-align: sub;
margin-right: 5px; margin-right: 5px;
} }
} }
.item { .item {
display: flex; display: flex;
box-shadow: inset 0px 0px 20px 0px rgba(0, 255, 255, 0.75); box-shadow: inset 0px 0px 20px 0px rgba(0, 255, 255, 0.75);
background: #0a1047; background: #0a1047;
height: 80px; height: 80px;
&.active { &.active {
box-shadow: inset 0px 0px 20px 0px #ffd082; box-shadow: inset 0px 0px 20px 0px #ffd082;
} }
.item-tit { .item-tit {
text-align: center; text-align: center;
width: 124px; width: 124px;
height: 80px; height: 80px;
font-size: 18px; font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #00ffff; color: #00ffff;
line-height: 80px; line-height: 80px;
background: rgba(0, 255, 255, 0.14); background: rgba(0, 255, 255, 0.14);
} }
&.active .item-tit { &.active .item-tit {
color: #ffd082; color: #ffd082;
background: rgba(255, 208, 130, 0.14); background: rgba(255, 208, 130, 0.14);
} }
.item-content { .item-content {
flex: 1; flex: 1;
line-height: 30px; line-height: 30px;
padding: 10px 25px; padding: 10px 25px;
} }
.text-tit { .text-tit {
font-size: 16px; font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #00ffff; color: #00ffff;
margin-right: 8px; margin-right: 8px;
} }
.text-val { .text-val {
font-size: 14px; font-size: 14px;
font-family: PingFang-SC-Regular, PingFang-SC; font-family: PingFang-SC-Regular, PingFang-SC;
font-weight: 400; font-weight: 400;
color: #ffffff; color: #ffffff;
} }
&.active .text-tit { &.active .text-tit {
color: #ffd082; color: #ffd082;
} }
.level1 { .level1 {
display: inline-block; display: inline-block;
border-radius: 2px; border-radius: 2px;
border: 1px solid #f64f58; border: 1px solid #f64f58;
font-size: 14px; font-size: 14px;
color: #f64f58; color: #f64f58;
line-height: 1; line-height: 1;
padding: 5px 5px; padding: 5px 5px;
} }
.level2 { .level2 {
display: inline-block; display: inline-block;
border-radius: 2px; border-radius: 2px;
border: 1px solid #fa8c16; border: 1px solid #fa8c16;
font-size: 14px; font-size: 14px;
color: #fa8c16; color: #fa8c16;
line-height: 1; line-height: 1;
padding: 5px 5px; padding: 5px 5px;
} }
.level3 { .level3 {
display: inline-block; display: inline-block;
border-radius: 2px; border-radius: 2px;
border: 1px solid #91d5fe; border: 1px solid #91d5fe;
font-size: 14px; font-size: 14px;
color: #91d5fe; color: #91d5fe;
line-height: 1; line-height: 1;
padding: 5px 5px; padding: 5px 5px;
} }
} }
} }
} }
.sub { .sub {
overflow: hidden; overflow: hidden;
margin-top: 16px; margin-top: 16px;
& > div { & > div {
width: 260px; width: 260px;
height: 472px; height: 472px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.sub-left { .sub-left {
float: left; float: left;
} }
.sub-right { .sub-right {
float: right; float: right;
} }
.sub-tit { .sub-tit {
img { img {
width: 20px; width: 20px;
height: 20px; height: 20px;
vertical-align: sub; vertical-align: sub;
margin-right: 5px; margin-right: 5px;
} }
width: 100%; width: 100%;
padding-left: 20px; padding-left: 20px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
font-size: 16px; font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: #ffffff; color: #ffffff;
background: linear-gradient( background: linear-gradient(
270deg, 270deg,
rgba(10, 16, 75, 0) 0%, rgba(10, 16, 75, 0) 0%,
rgba(8, 56, 105, 0.11) 33%, rgba(8, 56, 105, 0.11) 33%,
rgba(6, 116, 151, 0.91) 75%, rgba(6, 116, 151, 0.91) 75%,
#00ffff 100% #00ffff 100%
); );
} }
.sub-content { .sub-content {
flex: 1; flex: 1;
box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5); box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
background-color: rgba(139, 177, 237, 0.15); background-color: rgba(139, 177, 237, 0.15);
} }
.sub-item { .sub-item {
font-size: 16px; font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #ffffff; color: #ffffff;
line-height: 22px; line-height: 22px;
padding: 0 32px; padding: 0 32px;
margin: 16px 0; margin: 16px 0;
.sub-item-tit { .sub-item-tit {
color: #00ffff; color: #00ffff;
} }
} }
} }
</style> </style>

82
src/views/bigScreen/scientific/tab2/center3.vue
View File

@ -3,29 +3,54 @@
<container1 title="物资计划"> <container1 title="物资计划">
<div class="left3-content"> <div class="left3-content">
<el-col :span="24" style="margin-bottom: 1px"> <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> <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="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="3">采购数量</el-col>
<el-col style="text-align: center" :span="4">入库时间</el-col> <el-col style="text-align: center" :span="4">入库时间</el-col>
</el-row> </el-row>
</el-col> </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"> <ul class="item">
<li v-for="item in scrollList" :key="item.id"> <li v-for="item in scrollList" :key="item.id">
<el-row> <el-row>
<el-col style="text-align: center" :span="4">{{item.id}}</el-col> <el-col style="text-align: center" :span="4">{{
<el-col style="text-align: center" :title="item.materialName" :span="4">{{item.materialName}}</el-col> item.id
<el-col style="text-align: center" :span="3">{{item.stock}}</el-col> }}</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"> <el-col style="text-align: center" :span="6">
{{item.startPurchase}} {{ item.startPurchase }}
</el-col> </el-col>
<el-col style="text-align: center" :span="3">{{item.purchaseNumber}}</el-col> <el-col style="text-align: center" :span="3">{{
<el-col style="text-align: center" :span="4">{{item.createTime}}</el-col> item.purchaseNumber
}}</el-col>
<el-col style="text-align: center" :span="4">{{
item.createTime
}}</el-col>
</el-row> </el-row>
</li> </li>
</ul> </ul>
@ -33,49 +58,48 @@
</div> </div>
</container1> </container1>
</div> </div>
</template> </template>
<script> <script>
import container1 from "./components/container1/index.vue"; import container1 from "./components/container1/index.vue";
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from '../../../dashboard/mixins/resize' import resize from "../../../dashboard/mixins/resize";
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from "vue-seamless-scroll";
export default { export default {
mixins: [resize], mixins: [resize],
name: 'left2', name: "left2",
components: { components: {
container1, container1,
vueSeamlessScroll, vueSeamlessScroll,
}, },
data () { data() {
return { return {
listData: [1, 2, 3, 4, 5, 6, 7, 8], listData: [1, 2, 3, 4, 5, 6, 7, 8],
scrollList: [], scrollList: [],
} };
}, },
mounted () { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.getData() this.getData();
}) });
}, },
methods: { methods: {
getData () { getData() {
this.request({ this.request({
url: '/hx/scientificProduction/getMaterialPlanPic', url: "/hx/scientificProduction/getMaterialPlanPic",
method: 'get', method: "get",
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
this.scrollList = res.data; this.scrollList = res.data;
this.listData = Array(this.scrollList.length).fill(0); this.listData = Array(this.scrollList.length).fill(0);
this.$refs.seamlessScroll.reset(); this.$refs.seamlessScroll.reset();
} }
}) });
}, },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -84,7 +108,7 @@ export default {
font-size: 14px; font-size: 14px;
} }
.warp { .warp-scroll {
height: 168px; height: 168px;
width: 100%; width: 100%;
margin: 10px auto 0 auto; margin: 10px auto 0 auto;

112
src/views/bigScreen/scientific/tab2/left3.vue
View File

@ -1,12 +1,30 @@
<template> <template>
<div> <div>
<container1 title="里程牌及瓶颈短线工作计划"> <container1 title="里程牌及瓶颈短线工作计划">
<el-select clearable slot="datePicker" v-model="value" size="mini" placeholder="请选择"> <el-select
<el-option v-for="item in selectData" :key="item" :label="item" :value="item"> </el-option> 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> </el-select>
<div class="left3-content"> <div class="left3-content">
<el-col :span="24" style="margin-bottom: 1px"> <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="3">项目</el-col>
<el-col style="text-align: center" :span="5">工作内容</el-col> <el-col style="text-align: center" :span="5">工作内容</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-col style="text-align: center" :span="4">目标完成时间</el-col>
</el-row> </el-row>
</el-col> </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"> <ul class="item">
<li v-for="item in scrollList" :key="item.id"> <li v-for="item in scrollList" :key="item.id">
<el-row> <el-row>
<el-col style="text-align: center" :title="item.projectName" :span="3">{{ item.projectName }}</el-col> <el-col
<el-col style="text-align: center" :title="item.jobContent" :span="5">{{ item.jobContent }}</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"> <el-col style="text-align: center" :span="5">
<span class="state" :class="{success: item.progress == '已完成', <span
fault: item.progress == '未完成', class="state"
progress: item.progress == '未开始', :class="{
}"> success: item.progress == '已完成',
fault: item.progress == '未完成',
progress: item.progress == '未开始',
}"
>
<section v-if="item.progress == 1">已完成</section> <section v-if="item.progress == 1">已完成</section>
<section v-else-if="item.progress == 3">未完成</section> <section v-else-if="item.progress == 3">未完成</section>
<section v-else>未开始</section> <section v-else>未开始</section>
</span> </span>
</el-col> </el-col>
<el-col style="text-align: center" :span="7">{{item.forecastCompleteTime}}</el-col> <el-col style="text-align: center" :span="7">{{
<el-col style="text-align: center" :span="4">{{item.targetCompleteTime}}</el-col> item.forecastCompleteTime
}}</el-col>
<el-col style="text-align: center" :span="4">{{
item.targetCompleteTime
}}</el-col>
</el-row> </el-row>
</li> </li>
</ul> </ul>
@ -41,52 +80,51 @@
</div> </div>
</container1> </container1>
</div> </div>
</template> </template>
<script> <script>
import container1 from "./components/container1/index.vue"; import container1 from "./components/container1/index.vue";
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from '../../../dashboard/mixins/resize' import resize from "../../../dashboard/mixins/resize";
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from "vue-seamless-scroll";
export default { export default {
mixins: [resize], mixins: [resize],
name: 'left2', name: "left2",
components: { components: {
container1, container1,
vueSeamlessScroll, vueSeamlessScroll,
}, },
data () { data() {
return { return {
selectData: [], selectData: [],
value: '', value: "",
listData: [1, 2, 3, 4, 5, 6, 7, 8], listData: [1, 2, 3, 4, 5, 6, 7, 8],
scrollList: [], scrollList: [],
} };
}, },
watch: { watch: {
value (newVal, oldVal) { value(newVal, oldVal) {
this.getData(newVal) this.getData(newVal);
}, },
}, },
mounted () { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.getData() this.getData();
}) });
}, },
methods: { methods: {
getData (projectName) { getData(projectName) {
let params = {}; let params = {};
if (projectName) { if (projectName) {
params['projectName'] = projectName params["projectName"] = projectName;
} }
this.request({ this.request({
url: '/hx/scientificProduction/getMilepostAndBottleneckPic', url: "/hx/scientificProduction/getMilepostAndBottleneckPic",
method: 'get', method: "get",
params, params,
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
this.scrollList = res.data.list; this.scrollList = res.data.list;
this.listData = Array(this.scrollList.length).fill(0); this.listData = Array(this.scrollList.length).fill(0);
@ -95,10 +133,10 @@ export default {
this.selectData = res.data.allProject; this.selectData = res.data.allProject;
} }
} }
}) });
}, },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -107,7 +145,7 @@ export default {
font-size: 14px; font-size: 14px;
} }
.warp { .warp-scroll {
height: 168px; height: 168px;
width: 100%; width: 100%;
margin: 10px auto 0 auto; margin: 10px auto 0 auto;

98
src/views/bigScreen/scientific/tab2/right2.vue
View File

@ -3,7 +3,13 @@
<container1 title="调度会"> <container1 title="调度会">
<div class="left3-content"> <div class="left3-content">
<el-col :span="24" style="margin-bottom: 1px"> <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="5">会议名称</el-col> <el-col style="text-align: center" :span="5">会议名称</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-col style="text-align: center" :span="3">工作进展</el-col>
</el-row> </el-row>
</el-col> </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"> <ul class="item">
<li v-for="item in scrollList" :key="item.id"> <li v-for="item in scrollList" :key="item.id">
<el-row> <el-row>
<el-col style="text-align: center" :title="item.jobContent" :span="4">{{item.jobContent}}</el-col> <el-col
<el-col style="text-align: center" :title="item.meetingName" :span="5">{{item.meetingName}}</el-col> style="text-align: center"
<el-col style="text-align: center" :title="item.checkLeader" :span="5"> :title="item.jobContent"
{{item.checkLeader}} :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>
<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"> <el-col style="text-align: center" :span="3">
<span class="state" :class="{success: item.workProgress == '已完成', <span
fault: item.workProgress == '未完成', class="state"
progress: item.workProgress == '未开始', :class="{
}"> success: item.workProgress == '已完成',
<section>{{item.workProgress|| '未开始'}}</section> fault: item.workProgress == '未完成',
progress: item.workProgress == '未开始',
}"
>
<section>{{ item.workProgress || "未开始" }}</section>
</span> </span>
</el-col> </el-col>
</el-row> </el-row>
@ -36,50 +70,48 @@
</div> </div>
</container1> </container1>
</div> </div>
</template> </template>
<script> <script>
import container1 from "./components/container1/index.vue"; import container1 from "./components/container1/index.vue";
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from '../../../dashboard/mixins/resize' import resize from "../../../dashboard/mixins/resize";
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from "vue-seamless-scroll";
export default { export default {
mixins: [resize], mixins: [resize],
name: 'left2', name: "left2",
components: { components: {
container1, container1,
vueSeamlessScroll, vueSeamlessScroll,
}, },
data () { data() {
return { return {
listData: [1, 2, 3, 4, 5, 6, 7, 8], listData: [1, 2, 3, 4, 5, 6, 7, 8],
scrollList: [ scrollList: [],
], };
}
}, },
mounted () { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.getData() this.getData();
}) });
}, },
methods: { methods: {
getData () { getData() {
this.request({ this.request({
url: '/hx/scientificProduction/getDispatchMeetingPic', url: "/hx/scientificProduction/getDispatchMeetingPic",
method: 'get', method: "get",
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
this.scrollList = res.data; this.scrollList = res.data;
this.listData = Array(this.scrollList.length).fill(0); this.listData = Array(this.scrollList.length).fill(0);
this.$refs.seamlessScroll.reset(); this.$refs.seamlessScroll.reset();
} }
}) });
}, },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -88,7 +120,7 @@ export default {
font-size: 14px; font-size: 14px;
} }
.warp { .warp-scroll {
height: 168px; height: 168px;
width: 100%; width: 100%;
margin: 10px auto 0 auto; margin: 10px auto 0 auto;

74
src/views/bigScreen/scientific/tab2/right3.vue
View File

@ -3,7 +3,13 @@
<container1 title="人员管理"> <container1 title="人员管理">
<div class="left3-content"> <div class="left3-content">
<el-col :span="24" style="margin-bottom: 1px"> <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> <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-col style="text-align: center" :span="8">到岗人员</el-col>
</el-row> </el-row>
</el-col> </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"> <ul class="item">
<li v-for="item in scrollList" :key="item.id"> <li v-for="item in scrollList" :key="item.id">
<el-row> <el-row>
<el-col style="text-align: center" :span="4">{{item.teamName}}</el-col> <el-col style="text-align: center" :span="4">{{
<el-col style="text-align: center" :span="4">{{item.peopleTotal}}人</el-col> item.teamName
<el-col style="text-align: center" :span="4">{{item.shift}} }}</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>
<el-col style="text-align: center" :span="4">{{item.realWorkerTotal}}人</el-col> <el-col style="text-align: center" :span="4"
<el-col style="text-align: center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :span="8" :title="item.peopleList">{{item.peopleList}}</el-col> >{{ item.realWorkerTotal }}人</el-col
>
<el-col
style="text-align: center"
:span="8"
:title="item.peopleList"
>{{ item.peopleList }}</el-col
>
</el-row> </el-row>
</li> </li>
</ul> </ul>
@ -28,49 +51,48 @@
</div> </div>
</container1> </container1>
</div> </div>
</template> </template>
<script> <script>
import container1 from "./components/container1/index.vue"; import container1 from "./components/container1/index.vue";
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from '../../../dashboard/mixins/resize' import resize from "../../../dashboard/mixins/resize";
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from "vue-seamless-scroll";
export default { export default {
mixins: [resize], mixins: [resize],
name: 'left2', name: "left2",
components: { components: {
container1, container1,
vueSeamlessScroll, vueSeamlessScroll,
}, },
data () { data() {
return { return {
listData: [1, 2, 3, 4, 5, 6, 7, 8], listData: [1, 2, 3, 4, 5, 6, 7, 8],
scrollList: [], scrollList: [],
} };
}, },
mounted () { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.getData() this.getData();
}) });
}, },
methods: { methods: {
getData () { getData() {
this.request({ this.request({
url: '/hx/scientificProduction/getTeamAttendancePic', url: "/hx/scientificProduction/getTeamAttendancePic",
method: 'get', method: "get",
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
this.scrollList = res.data; this.scrollList = res.data;
this.listData = Array(this.scrollList.length).fill(0); this.listData = Array(this.scrollList.length).fill(0);
this.$refs.seamlessScroll.reset(); this.$refs.seamlessScroll.reset();
} }
}) });
}, },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -79,7 +101,7 @@ export default {
font-size: 14px; font-size: 14px;
} }
.warp { .warp-scroll {
height: 168px; height: 168px;
width: 100%; width: 100%;
margin: 10px auto 0 auto; margin: 10px auto 0 auto;

1068
src/views/bigScreen/scientific/tab3/left2.vue
View File

File diff suppressed because it is too large Load Diff

100
src/views/chartList/page2/one/index.vue
View File

@ -1,53 +1,69 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-divider content-position="left"><span class="text-bold-18">全厂资源动态</span></el-divider> <el-divider content-position="left"
<left1 /> ><span class="text-bold-18">全厂资源动态</span></el-divider
<el-divider content-position="left"><span class="text-bold-18">车辆管理</span></el-divider> >
<left2 /> <left1 />
<el-divider content-position="left"><span class="text-bold-18">本周计划</span></el-divider> <el-divider content-position="left"
<left3 /> ><span class="text-bold-18">车辆管理</span></el-divider
<el-divider content-position="left"><span class="text-bold-18">全厂工房作业信息</span></el-divider> >
<center1 /> <left2 />
<el-divider content-position="left"><span class="text-bold-18">危险点、工房图片管理</span></el-divider> <el-divider content-position="left"
<center2 /> ><span class="text-bold-18">本周计划</span></el-divider
<el-divider content-position="left"><span class="text-bold-18">全厂作业明细</span></el-divider> >
<right1 /> <left3 />
<el-divider content-position="left"><span class="text-bold-18">装药当前作业内容</span></el-divider> <el-divider content-position="left"
<right2 /> ><span class="text-bold-18">全厂工房作业信息</span></el-divider
<el-divider content-position="left"><span class="text-bold-18">酯生产量</span></el-divider> >
<right3 /> <center1 />
</div> <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> </template>
<script> <script>
import left1 from './left1.vue' import left1 from "./left1.vue";
import left2 from './left2.vue' import left2 from "./left2.vue";
import left3 from './left3.vue' import left3 from "./left3.vue";
import center1 from './center1.vue' import center1 from "./center1.vue";
import center2 from './center2.vue' import center2 from "./center2.vue";
import right1 from './right1.vue' import right1 from "./right1.vue";
import right2 from './right2.vue' import right2 from "./right2.vue";
import right3 from './right3.vue' import right3 from "./right3.vue";
export default { export default {
components: { components: {
left1, left1,
left2, left2,
left3, left3,
center1, center1,
center2, center2,
right1, right1,
right2, right2,
right3, right3,
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-container { .app-container {
.el-divider:nth-child(n + 2) { .el-divider:nth-child(n + 2) {
margin-top: 50px; margin-top: 50px;
} }
} }
.text-bold-18 { .text-bold-18 {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
} }
</style> </style>

358
src/views/chartList/page2/one/right3.vue
View File

@ -1,174 +1,198 @@
<template> <template>
<el-row :gutter="20"> <el-row :gutter="20">
<!--用户数据--> <!--用户数据-->
<el-col :span="24" :xs="24"> <el-col :span="24" :xs="24">
<el-row :gutter="10" class="mb8 fr"> <el-row :gutter="10" class="mb8 fr">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport">导入</el-button> <el-button
</el-col> type="info"
<el-col :span="1.5"> plain
<el-button icon="el-icon-upload2"
type="warning" size="mini"
plain @click="handleImport"
icon="el-icon-download" >导入</el-button
size="mini" >
:loading="exportLoading" </el-col>
@click="importTemplate" <el-col :span="1.5">
>导出模板</el-button <el-button
> type="warning"
</el-col> plain
</el-row> 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 v-loading="loading" :data="userList">
<el-table-column label="序号" align="center" prop="id" width="80" /> <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="jobContent" />
<el-table-column label="开车时间" align="center" prop="driveDate" /> <el-table-column label="开车时间" align="center" prop="driveDate" />
<el-table-column label="预计结束时间" align="center" prop="forecastEndDate" /> <el-table-column
<el-table-column label="酯生产量" align="center" prop="esterProduction" /> label="预计结束时间"
<el-table-column label="粘合剂干燥情况" align="center" prop="cleanStatus" /> align="center"
</el-table> prop="forecastEndDate"
/>
<el-table-column
label="硝酸酯生产量"
align="center"
prop="esterProduction"
/>
<el-table-column
label="粘合剂干燥情况"
align="center"
prop="cleanStatus"
/>
</el-table>
<pagination <pagination
v-show="total > 0" v-show="total > 0"
:total="total" :total="total"
:autoScroll="false" :autoScroll="false"
:pageSizes="[2, 5, 10, 20]" :pageSizes="[2, 5, 10, 20]"
:page.sync="queryParams.pageNum" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" :limit.sync="queryParams.pageSize"
@pagination="getList" @pagination="getList"
/> />
</el-col> </el-col>
<!-- 用户导入对话框 --> <!-- 用户导入对话框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> <el-dialog
<el-upload :title="upload.title"
ref="upload" :visible.sync="upload.open"
:limit="1" width="400px"
accept=".xlsx, .xls" append-to-body
:headers="upload.headers" >
:action="upload.url" <el-upload
:disabled="upload.isUploading" ref="upload"
:on-progress="handleFileUploadProgress" :limit="1"
:on-success="handleFileSuccess" accept=".xlsx, .xls"
:auto-upload="false" :headers="upload.headers"
drag :action="upload.url"
> :disabled="upload.isUploading"
<i class="el-icon-upload"></i> :on-progress="handleFileUploadProgress"
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> :on-success="handleFileSuccess"
<div class="el-upload__tip" slot="tip"> :auto-upload="false"
<span>仅允许导入xls、xlsx格式文件。</span> drag
</div> >
</el-upload> <i class="el-icon-upload"></i>
<div slot="footer" class="dialog-footer"> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<el-button type="primary" @click="submitFileForm">确 定</el-button> <div class="el-upload__tip" slot="tip">
<el-button @click="upload.open = false">取 消</el-button> <span>仅允许导入xls、xlsx格式文件。</span>
</div> </div>
</el-dialog> </el-upload>
</el-row> <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> </template>
<script> <script>
import { rightThreeList, rightThreeImportTemplate } from './indexApi' import { rightThreeList, rightThreeImportTemplate } from "./indexApi";
import { getToken } from '@/utils/auth' import { getToken } from "@/utils/auth";
export default { export default {
data() { data() {
return { return {
// 遮罩层 // 遮罩层
loading: true, loading: true,
// 导出遮罩层 // 导出遮罩层
exportLoading: false, exportLoading: false,
// 查询参数 // 查询参数
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: this.page_size, pageSize: this.page_size,
}, },
// 用户信息 // 用户信息
userList: [], userList: [],
// 总条数 // 总条数
total: 0, total: 0,
// 用户导入参数 // 用户导入参数
upload: { upload: {
// 是否显示弹出层（用户导入） // 是否显示弹出层（用户导入）
open: false, open: false,
// 弹出层标题（用户导入） // 弹出层标题（用户导入）
title: '', title: "",
// 是否禁用上传 // 是否禁用上传
isUploading: false, isUploading: false,
// 是否更新已经存在的用户数据 // 是否更新已经存在的用户数据
updateSupport: 0, updateSupport: 0,
// 设置上传的请求头部 // 设置上传的请求头部
headers: { Authorization: 'Bearer ' + getToken() }, headers: { Authorization: "Bearer " + getToken() },
// 上传的地址 // 上传的地址
url: process.env.VUE_APP_BASE_API + '/hx/esterProduction/importData', url: process.env.VUE_APP_BASE_API + "/hx/esterProduction/importData",
}, },
} };
}, },
methods: { methods: {
/** 查询用户列表 */ /** 查询用户列表 */
getList() { getList() {
this.loading = true this.loading = true;
rightThreeList(this.queryParams).then(res => { rightThreeList(this.queryParams).then((res) => {
this.userList = res.rows this.userList = res.rows;
this.total = res.total this.total = res.total;
this.loading = false this.loading = false;
}) });
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
// handleDelete(row) { // handleDelete(row) {
// this.$modal // this.$modal
// .confirm('是否确认删除编号为"' + row.id + '"的数据项？') // .confirm('是否确认删除编号为"' + row.id + '"的数据项？')
// .then(function () { // .then(function () {
// return rightTwoDel({ id: row.id }) // return rightTwoDel({ id: row.id })
// }) // })
// .then(() => { // .then(() => {
// this.getList() // this.getList()
// this.$modal.msgSuccess('删除成功') // this.$modal.msgSuccess('删除成功')
// }) // })
// .catch(() => {}) // .catch(() => {})
// }, // },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
const queryParams = this.queryParams const queryParams = this.queryParams;
this.$modal this.$modal
.confirm('是否确认导出所有数据项？') .confirm("是否确认导出所有数据项？")
.then(() => { .then(() => {
this.exportLoading = true this.exportLoading = true;
return exportUser(queryParams) return exportUser(queryParams);
}) })
.then(response => { .then((response) => {
this.$download.name(response.msg) this.$download.name(response.msg);
this.exportLoading = false this.exportLoading = false;
}) })
.catch(() => {}) .catch(() => {});
}, },
/** 导入按钮操作 */ /** 导入按钮操作 */
handleImport() { handleImport() {
this.upload.title = '数据导入' this.upload.title = "数据导入";
this.upload.open = true this.upload.open = true;
}, },
/** 下载模板操作 */ /** 下载模板操作 */
importTemplate() { importTemplate() {
rightThreeImportTemplate().then(response => { rightThreeImportTemplate().then((response) => {
this.$download.name(response.msg) this.$download.name(response.msg);
}) });
}, },
// 文件上传中处理 // 文件上传中处理
handleFileUploadProgress(event, file, fileList) { handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true this.upload.isUploading = true;
}, },
// 文件上传成功处理 // 文件上传成功处理
handleFileSuccess(response, file, fileList) { handleFileSuccess(response, file, fileList) {
this.upload.open = false this.upload.open = false;
this.upload.isUploading = false this.upload.isUploading = false;
this.$refs.upload.clearFiles() this.$refs.upload.clearFiles();
this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true }) this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
this.getList() this.getList();
}, },
// 提交上传文件 // 提交上传文件
submitFileForm() { submitFileForm() {
this.$refs.upload.submit() this.$refs.upload.submit();
}, },
}, },
created() { created() {
this.getList() this.getList();
}, },
} };
</script> </script>

2
vue.config.js
View File

@ -35,7 +35,7 @@ module.exports = {
[process.env.VUE_APP_BASE_API]: { [process.env.VUE_APP_BASE_API]: {
// target: `http://localhost:1818`, // target: `http://localhost:1818`,
// target: `http://120.26.107.74: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`, // target: `http://124.70.138.50:1818`,
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {