mt-fe-group/11-main
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

'over'

Browse Source
This commit is contained in:
gtz 2022-10-31 16:26:31 +08:00
parent 883cb56544
commit 4630e292c5
7 changed files with 278 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/baseContainer/index.vue
View File

@ -78,6 +78,7 @@ export default {
background-color: rgba($color: #061027, $alpha: 0.15);
position: relative;
border: 2px solid;
box-shadow: inset 0px 0px 20px 0px rgba(255,255,255,0.15);
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
.line {
position: absolute;

8
src/components/baseTable.vue
View File

@ -9,11 +9,11 @@
<div class="visual-base-table-container">
<el-table
v-loading="isLoading"
:header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
:header-cell-style="{background:'rgba(32, 55, 96, .8)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
:row-style="setRowStyle"
:data="renderData"
border
style="width: 100%; background: transparent"
style="width: 100%; border-radius: 4px; border-right: none; background: transparent"
>
<el-table-column v-if="page && limit && showIndex" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" :width="70 * beilv" align="center" />
<el-table-column
@ -111,7 +111,7 @@ export default {
setRowStyle(v) {
if (v.rowIndex % 2 === 0) {
return {
background: 'rgba(76,97,123,0.2)',
background: 'rgba(14, 32, 62, .8)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
@ -120,7 +120,7 @@ export default {
}
} else {
return {
background: 'rgba(79,114,136,0.29)',
background: 'rgba(32, 55, 96, .8)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',

14
src/icons/svg/jiantou.svg Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>下箭头备份</title>
<g id="4数采平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="数采平台" transform="translate(-1086.000000, -705.000000)" fill-rule="nonzero">
<g id="编组-42备份" transform="translate(810.000000, 704.998514)">
<g id="下箭头备份" transform="translate(288.000000, 12.000000) scale(-1, 1) rotate(-270.000000) translate(-288.000000, -12.000000) translate(276.000000, 0.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
<path d="M13.431,17.625 L20.6685,8.142 C21.0839368,7.59762559 21.1545003,6.86467633 20.8505486,6.25104401 C20.5465969,5.63741168 19.9207853,5.24939923 19.236,5.2499993 L4.76325,5.2499993 C4.07873504,5.2499993 3.45344529,5.63820033 3.14986925,6.25171668 C2.84629321,6.86523304 2.91697759,7.5978405 3.33225,8.142 L10.56975,17.625 C10.9102709,18.0709566 11.4392763,18.3326117 12.000375,18.3326117 C12.5614737,18.3326117 13.0904791,18.0709566 13.431,17.625 L13.431,17.625 Z" id="路径" fill="#6EF9DF"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

14
src/icons/svg/wuliu.svg Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>仓储管理</title>
<g id="4数采平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="数采平台" transform="translate(-48.000000, -793.000000)" fill-rule="nonzero">
<g id="编组-5备份-5" transform="translate(24.000000, 768.000000)">
<g id="仓储管理" transform="translate(24.000000, 25.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
<path d="M15.48393,3.3048696 C16.0703357,3.3048696 16.6219745,3.5418302 17.020607,3.96044665 L17.1354883,4.09142595 L20.6350715,8.39485828 C20.9188368,8.74257074 21.0910685,9.17061787 21.1296926,9.61583822 L21.1380014,9.80751422 L21.1380014,19.8391184 C21.1322712,20.3132162 20.7485971,20.6951304 20.2749174,20.6951304 C19.8363964,20.6951304 19.4755033,20.3679697 19.4225761,19.9439863 L19.4158936,19.8361066 L19.4158936,9.80751422 C19.4158936,9.71899915 19.3924626,9.63027695 19.34999,9.55385509 L19.3013328,9.48199659 L15.8017937,5.17455846 C15.7386891,5.09720442 15.6518741,5.04656647 15.5545895,5.02940545 L15.4798698,5.02291725 L8.52075754,5.02291725 C8.42180102,5.02291725 8.32692629,5.05850593 8.251634,5.12175671 L8.19907868,5.17425759 L4.70103815,9.4757657 C4.64460461,9.54683016 4.60740016,9.62983251 4.59232504,9.71623475 L4.58473377,9.80345406 L4.58473377,19.8320464 C4.58473377,20.3071108 4.20077431,20.6910702 3.72570994,20.6910702 C3.28718898,20.6910702 2.92629588,20.3639095 2.87336866,19.9399261 L2.86668611,19.8320464 L2.86668611,9.80751422 C2.86668611,9.35867624 3.00344716,8.91798843 3.25471186,8.54883734 L3.36934227,8.39519433 L6.86864167,4.09211403 C7.23599734,3.63709393 7.76772247,3.35876787 8.34599664,3.31192363 L8.52075754,3.3048696 L15.48393,3.3048696 Z M17.5343102,17.8849 C18.0093746,17.8849 18.393334,18.2688595 18.393334,18.7439238 C18.393334,19.1813935 18.0636908,19.5431762 17.641617,19.5962465 L17.5343102,19.6029477 L6.45007653,19.6029477 C5.97501215,19.6029477 5.5910527,19.2189882 5.5910527,18.7439238 C5.5910527,18.3054029 5.91821342,17.9445098 6.34219683,17.8915826 L6.45007653,17.8849 L17.5343102,17.8849 Z M17.5343102,14.7748183 C18.0093746,14.7748183 18.393334,15.1587778 18.393334,15.6338422 C18.393334,16.0713119 18.0636908,16.4330945 17.641617,16.4861648 L17.5343102,16.492866 L6.45007653,16.492866 C5.97501215,16.492866 5.5910527,16.1089065 5.5910527,15.6338422 C5.5910527,15.1953212 5.91821342,14.8344281 6.34219683,14.7815009 L6.45007653,14.7748183 L17.5343102,14.7748183 Z M17.5343102,11.6647367 C18.0093746,11.6647367 18.393334,12.0486961 18.393334,12.5237605 C18.393334,12.9612302 18.0636908,13.3230128 17.641617,13.3760831 L17.5343102,13.3827843 L6.45007653,13.3827843 C5.97501215,13.3827843 5.5910527,12.9988249 5.5910527,12.5237605 C5.5910527,12.0852395 5.91821342,11.7243464 6.34219683,11.6714192 L6.45007653,11.6647367 L17.5343102,11.6647367 Z M14.5622739,7.25540416 C15.0373383,7.25540416 15.4212977,7.63936361 15.4212977,8.11442798 C15.4212977,8.55376299 15.0933842,8.91396728 14.6667865,8.96678371 L14.5582137,8.97345181 L9.41805264,8.97345181 C8.94298827,8.97345181 8.55902882,8.58949235 8.55902882,8.11442798 C8.55902882,7.67590702 8.88618954,7.31501392 9.31017295,7.26208671 L9.41805264,7.25540416 L14.5622739,7.25540416 Z" id="形状结合" fill="#6EF9E1"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

19
src/views/components/statusCell.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<svg-icon :icon-class="injectData.status === 1 ? 'signal' : injectData.status === 2 ? 'signal-warning' : 'signal-error'" style="font-size: 24px" />
</template>
<script>
export default {
name: 'StatusCell',
props: {
injectData: {
type: Object,
default: () => {}
}
}
}
</script>
<style lang="scss" scoped>
</style>

227
src/views/factory.vue
View File

@ -16,11 +16,121 @@
</span>
</div>
<el-row class="container-main">
<!-- 上 -->
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="16 * beilv">
<el-row :style="{ padding: '0 ' + 25 * beilv + 'px' }">
<el-col :span="24">
<base-container :beilv="beilv" :height="303">
<img style="width: 90%; margin: auto 5%;" :src="require('../assets/img/choicepart/factory-model.png')" alt="">
<base-container class="swiper-container" :beilv="beilv" :height="303">
<el-carousel ref="swiper1item" :height="303 * beilv - 4 + 'px'" :autoplay="false" arrow="never" indicator-position="none">
<el-carousel-item v-for="item in 4" :key="item">
<img :style="{width: '90%', margin: 'auto 5%', marginTop: 87 * beilv + 'px'}" :src="require('../assets/img/choicepart/factory-model.png')" alt="">
<svg-icon
v-for="(i, index) in wuliuList"
:key="index"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
:style="{ position: 'absolute', fontSize: '24px', left: i.left + '%', top: i.top + '%' }"
/>
<svg-icon
v-for="(i, index) in wuliuList"
:key="index"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
:style="{ position: 'absolute', fontSize: '24px', left: i.left + '%', top: i.top + 22 + '%' }"
/>
</el-carousel-item>
</el-carousel>
<div class="swiper-indicator">
<svg-icon class="item-icon swiper-icon-left" icon-class="jiantou" @click="handleSwiperOneLeft" />
<svg-icon class="item-icon swiper-icon-right" icon-class="jiantou" @click="handleSwiperOneRight" />
<el-carousel ref="swiper1text" class="swiper-indicator-item" height="24px" :autoplay="false" arrow="never" indicator-position="none">
<el-carousel-item v-for="item in 4" :key="item">
<p class="swiper-indicator-text" :title="'这是第' + item + '段文本'">这是第{{ item }}段文本</p>
</el-carousel-item>
</el-carousel>
</div>
</base-container>
</el-col>
</el-row>
<el-row :style="{ padding: '0 ' + 25 * beilv + 'px', marginTop: '17px' }">
<el-col :span="24">
<base-container class="swiper-container" :beilv="beilv" :height="303">
<el-carousel ref="swiper2item" :height="303 * beilv - 4 + 'px'" :autoplay="false" arrow="never" indicator-position="none">
<el-carousel-item v-for="item in 4" :key="item">
<img :style="{width: '90%', margin: 'auto 5%', marginTop: 87 * beilv + 'px'}" :src="require('../assets/img/choicepart/factory-model.png')" alt="">
<svg-icon
v-for="(i, index) in materialList"
:key="index"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
:style="{ position: 'absolute', fontSize: '24px', left: i.left + '%', top: i.top + 22 + '%' }"
/>
<svg-icon
v-for="(i, index) in materialList"
:key="index"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
:style="{ position: 'absolute', fontSize: '24px', left: i.left + '%', top: i.top + '%' }"
/>
</el-carousel-item>
</el-carousel>
<div class="swiper-indicator">
<svg-icon class="item-icon swiper-icon-left" icon-class="jiantou" @click="handleSwiperTwoLeft" />
<svg-icon class="item-icon swiper-icon-right" icon-class="jiantou" @click="handleSwiperTwoRight" />
<el-carousel ref="swiper2text" class="swiper-indicator-item" height="24px" :autoplay="false" arrow="never" indicator-position="none">
<el-carousel-item v-for="item in 4" :key="item">
<p class="swiper-indicator-text" :title="'这是第' + item + '段文本'">这是第{{ item }}段文本</p>
</el-carousel-item>
</el-carousel>
</div>
</base-container>
</el-col>
</el-row>
<el-row :style="{ padding: '0 ' + 25 * beilv + 'px', margin: '17px 0' }">
<el-col :span="12" style="paddingRight: 12px">
<base-container title-icon="wuliu" title="生产物流仓储设备通讯状态" class="swiper-container" :beilv="beilv" :height="279">
<el-row :gutter="12" style="padding: 0 24px">
<el-col :span="12">
<base-table
:page="1"
:limit="7"
:show-index="false"
:beilv="beilv"
:table-config="tableProp"
:table-data="wuliuList"
/>
</el-col>
<el-col :span="12">
<base-table
:page="1"
:limit="7"
:show-index="false"
:beilv="beilv"
:table-config="tableProp"
:table-data="wuliuList"
/>
</el-col>
</el-row>
</base-container>
</el-col>
<el-col :span="12" style="paddingLeft: 12px">
<base-container title-icon="material" title="公用工程设备通信状态" class="swiper-container" :beilv="beilv" :height="279">
<el-row :gutter="12" style="padding: 0 24px">
<el-col :span="12">
<base-table
:page="1"
:limit="7"
:show-index="false"
:beilv="beilv"
:table-config="tableProp"
:table-data="materialList"
/>
</el-col>
<el-col :span="12">
<base-table
:page="1"
:limit="7"
:show-index="false"
:beilv="beilv"
:table-config="tableProp"
:table-data="materialList"
/>
</el-col>
</el-row>
</base-container>
</el-col>
</el-row>
@ -31,7 +141,40 @@
<script>
import baseContainer from '@/components/baseContainer'
import BaseTable from '@/components/baseTable.vue'
import statusCell from './components/statusCell.vue'
let interval = null
const tableProp = [
{
prop: 'equipmentName',
label: '设备名称',
align: 'center'
},
{
prop: 'status',
label: '通讯状态',
align: 'center',
subcomponent: statusCell
}
]
const wuliuList = [
{ equipmentName: '包装机', status: 1, left: 23, top: 23 },
{ equipmentName: '输送线', status: 2, left: 27, top: 23 },
{ equipmentName: '堆垛机', status: 3, left: 38.7, top: 23 },
{ equipmentName: 'AGV', status: 3, left: 47, top: 23 },
{ equipmentName: '包装机', status: 1, left: 51, top: 23 },
{ equipmentName: '输送线', status: 2, left: 57.3, top: 23 },
{ equipmentName: '包装机', status: 1, left: 82.5, top: 23 }
]
const materialList = [
{ equipmentName: '包装机', status: 1, left: 23, top: 23 },
{ equipmentName: '输送线', status: 2, left: 27, top: 23 },
{ equipmentName: '堆垛机', status: 3, left: 38.7, top: 23 },
{ equipmentName: 'AGV', status: 3, left: 47, top: 23 },
{ equipmentName: '包装机', status: 1, left: 51, top: 23 },
{ equipmentName: '输送线', status: 2, left: 57.3, top: 23 },
{ equipmentName: '包装机', status: 1, left: 82.5, top: 23 }
]
export default {
name: 'Factory',
@ -47,7 +190,10 @@ export default {
windowWidth: 0,
date: '',
time: '',
beilv: 1
beilv: 1,
tableProp,
wuliuList,
materialList
}
},
created() {
@ -59,6 +205,10 @@ export default {
this.date = a[0]
this.time = a[1]
}, 1000)
this.beilv = document.body.offsetWidth / 1920
addEventListener('resize', () => {
this.beilv = document.body.offsetWidth / 1920
})
},
destroyed() {
clearInterval(interval)
@ -69,21 +219,37 @@ export default {
const mytime = myDate.toLocaleString('chinese', { hour12: false })
const date = mytime.split(' ')[0].split('/').join('.')
const time = mytime.split(' ')[1]
return new Array(date, time)
return [date, time]
},
handleHome() {
this.$router.push('/index')
},
handleSwiperOneLeft() {
this.$refs.swiper1item.prev()
this.$refs.swiper1text.prev()
},
handleSwiperOneRight() {
this.$refs.swiper1item.next()
this.$refs.swiper1text.next()
},
handleSwiperTwoLeft() {
this.$refs.swiper2item.prev()
this.$refs.swiper2text.prev()
},
handleSwiperTwoRight() {
this.$refs.swiper2item.next()
this.$refs.swiper2text.next()
}
}
}
</script>
<style lang="scss" scoped>
<style lang="scss">
.factory-container {
min-width: 100%;
min-height: 100vh;
// background: linear-gradient(-45deg, rgb(25, 25, 200), rgb(0, 100, 200));
background: url('../assets/img/choicepart/choicepart-back.png') repeat;
background: url('../assets/img/choicepart/factory-back.png') repeat;
background-size: cover;
overflow-x: scroll;
.factory-navbar {
@ -103,6 +269,7 @@ export default {
position: relative;
left: 58px;
font-size: 32px;
line-height: 12vh;
}
.navbar-right {
color: #49E1DE;
@ -110,6 +277,7 @@ export default {
position: relative;
right: 84px;
font-size: 32px;
line-height: 12vh;
span {
position: relative;
.item-icon {
@ -130,6 +298,49 @@ export default {
}
.container-main {
margin-top: 24px;
.swiper-container {
position: relative;
user-select: none;
.swiper-indicator {
position: absolute;
color: #47F8DC;
width: 300px;
text-align: center;
font-size: 22px;
bottom: 22px;
left: 50%;
transform:translate(-50%);
z-index: 2;
.swiper-indicator-item {
max-width: 300px;
.swiper-indicator-text {
max-width: 300px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
margin-block-start: 0;
margin-block-end: 0;
}
}
.item-icon {
cursor: pointer;
position: absolute;
z-index: 3;
}
.swiper-icon-left {
transform: rotateY(180deg);
margin-right: 12px;
left: -36px;
}
.swiper-icon-right {
margin-left: 12px;
right: -36px;
}
}
}
// .el-carousel__arrow, .el-carousel__indicator {
// display: none;
// }
}
}
::-webkit-scrollbar-track-piece {

12
src/views/index.vue
View File

@ -11,7 +11,7 @@
<span class="navbar-right">
<span>
{{ time }}
<svg-icon @click="logout" class="item-icon" icon-class="logout" />
<svg-icon icon-class="logout" class="item-icon" @click="logout" />
</span>
</span>
</div>
@ -58,7 +58,7 @@ export default {
this.date = this.getTime()[0]
this.time = this.getTime()[1]
interval = setInterval(() => {
let a = this.getTime()
const a = this.getTime()
this.date = a[0]
this.time = a[1]
}, 1000)
@ -72,10 +72,10 @@ export default {
const mytime = myDate.toLocaleString('chinese', { hour12: false })
const date = mytime.split(' ')[0].split('/').join('.')
const time = mytime.split(' ')[1]
return new Array(date, time)
return [date, time]
},
handelClick(item) {
if (item.path.substring(0,4) === 'http') {
if (item.path.substring(0, 4) === 'http') {
window.open(`${item.path}?username=${Cookie.get('account')}&password=${Cookie.get('password')}`)
} else {
this.$router.push({
@ -86,7 +86,7 @@ export default {
async logout() {
await this.$store.dispatch('user/logout')
this.$router.push('/')
},
}
}
}
</script>
@ -116,6 +116,7 @@ export default {
position: relative;
left: 58px;
font-size: 32px;
line-height: 12vh;
}
.navbar-right {
color: #49E1DE;
@ -123,6 +124,7 @@ export default {
position: relative;
right: 84px;
font-size: 32px;
line-height: 12vh;
span {
position: relative;
.item-icon {