From 5efd01db698683e95a63053da43aaa08fa35a185 Mon Sep 17 00:00:00 2001
From: 叶松 <2217086471@qq.com>
Date: 星期五, 01 十二月 2023 11:20:28 +0800
Subject: [PATCH] Merge branch 'master' of http://111.30.93.211:10101/r/supipe
---
web/src/views/MixingInfo/mixing.vue | 314 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 314 insertions(+), 0 deletions(-)
diff --git a/web/src/views/MixingInfo/mixing.vue b/web/src/views/MixingInfo/mixing.vue
new file mode 100644
index 0000000..55d42a7
--- /dev/null
+++ b/web/src/views/MixingInfo/mixing.vue
@@ -0,0 +1,314 @@
+<template>
+ <div class="wrap">
+ <div class="header">
+ <div class="header_name">中铁十四局通甬站前I标管片场拌合站</div>
+ </div>
+ <div class="container">
+ <div class="con_name">
+ <div class="line left"></div>
+ <div class="name">
+ <p class="p">{{ infoL.siloName }}</p>
+ <p class="p">{{ infoR.siloName }}</p>
+ </div>
+ <div class="line right"></div>
+ </div>
+ <div class="con_main">
+ <div class="con_main_item con_main_l">
+ <div class="placeholder"></div>
+ <div class="list_wrap">
+ <list :data="infoL.mixing"></list>
+ </div>
+ </div>
+ <div class="con_main_item con_main_c">
+ <div :class="`image ${infoL.percentImgName || ''}`">
+ <p>{{ infoL.siloName }}</p>
+ </div>
+ <div :class="`image ${infoR.percentImgName || ''}`">
+ <p>{{ infoR.siloName }}</p>
+ </div>
+ </div>
+ <div class="con_main_item con_main_r">
+ <div class="placeholder"></div>
+ <div class="list_wrap">
+ <list :data="infoR.mixing"></list>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import List from './components/List'
+const interval = function (fn, Vue) {
+ let timer = setInterval(
+ (() => {
+ fn()
+ return fn
+ })(),
+ 1000 * 60 * 1
+ )
+ if (Vue) {
+ Vue.$once('hook:beforeDestroy', function () {
+ timer && clearInterval(timer)
+ })
+ }
+}
+export default {
+ name: 'mixing',
+ data() {
+ return {
+ type: '',
+ infoL: {},
+ infoR: {},
+ percents: {
+ 0: 'container_10',
+ 10: 'container_10',
+ 20: 'container_20',
+ 40: 'container_40',
+ 60: 'container_60',
+ 80: 'container_80',
+ 90: 'container_90',
+ 100: 'container_100',
+ }
+ };
+ },
+ components: {
+ List
+ },
+ beforeCreate() {
+ this.$http = this.$api.Infos
+ },
+ beforeRouteEnter(to, form, next) {
+ const {path} = to
+
+ const type = path.slice(-1)
+
+ next(vm => {
+ vm.type = type
+ interval(vm.getLists, vm)
+ })
+ },
+ mounted() {
+ let width = document.getElementsByClassName('wrap')[0].clientWidth
+ let $html = document.getElementsByTagName('html')[0]
+ let fontsize = width / 1920 * 35.2
+ $html.style.fontSize = `${fontsize}px`
+ window.onresize = () => {
+ let width = document.getElementById('app').clientWidth
+ let fontsize = width / 1920 * 35.2
+ $html.style.fontSize = `${fontsize}px`
+ }
+ },
+ beforeDestroy() {
+ let $html = document.getElementsByTagName('html')[0]
+ $html.style.fontSize = ''
+ },
+ methods: {
+ getLists() {
+ const percentArr = Object.keys(this.percents)
+ this.$api.Infos.getMixing({types: this.type}).then(res => {
+ if (res.statusMsg === 'ok' && res.data && res.data.length) {
+ res.data.forEach((item, index) => {
+ if (item && item.mixing && item.mixing.percentage) {
+ let targetVal = +item.mixing.percentage
+ for (let index = 0; index < percentArr.length - 1; index++) {
+ const val = percentArr[index]
+ const valNext = percentArr[index + 1]
+ if (val <= targetVal && targetVal <= valNext) {
+ item.percentImgName = this.percents[val]
+ break
+ }
+ }
+ } else {
+ item.percentImgName = this.percents[0]
+ }
+ index === 0 && (this.infoL = item)
+ index === 1 && (this.infoR = item)
+ })
+ } else {
+ this.$message.warning('请检查网络或联系管理员!!!')
+ }
+ })
+
+
+
+ },
+ }
+}
+</script>
+<style scoped>
+li {
+ list-style: none;
+}
+
+.wrap {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ font-size: 1rem;
+ background: #040A3F;
+ overflow: hidden;
+}
+
+.header {
+ position: absolute;
+ width: 100%;
+ height: 3rem;
+ text-align: center;
+ font-family: 'Microsoft YaHei';
+ color: #fff;
+ background: url('../../assets/mixing/header.png') no-repeat center center;
+ background-size: 100% auto;
+
+ .header_name {
+ font-size: 1.6rem;
+ font-weight: bold;
+ line-height: 3.2rem;
+ letter-spacing: 2px;
+ text-shadow: 0px 3px 3px rgba(25, 63, 95, 0.05);
+ background: -webkit-linear-gradient(90deg, #2AC0FF 0%, #FFFFFF 70%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+}
+
+.container {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ left: 20px;
+ right: 20px;
+ top: 3.6rem;
+ bottom: 20px;
+ color: #fff;
+
+ .con_name {
+ display: flex;
+ align-items: center;
+ height: 2.2rem;
+
+ .name {
+ width: 20rem;
+ display: flex;
+ justify-content: space-evenly;
+
+ .p {
+ height: 2rem;
+ padding: 0 2rem;
+ line-height: 2rem;
+ font-size: 1.2rem;
+ font-weight: bold;
+ white-space: nowrap;
+ background: url(../../assets/mixing/name_bg.png) no-repeat;
+ background-size: 100% 100%;
+ }
+ }
+
+ .line {
+ flex: 1;
+ height: 14px;
+
+ &.left {
+ background: -webkit-linear-gradient(right, rgba(18, 99, 162, 1) 0, rgba(18, 99, 162, 0) 100%);
+ }
+
+ &.right {
+ background: -webkit-linear-gradient(left, rgba(18, 99, 162, 1) 0, rgba(18, 99, 162, 0) 100%);
+ }
+ }
+ }
+
+ .con_main {
+ margin-top: 10px;
+ flex: 1;
+ display: flex;
+
+ .con_main_item {
+ padding: 15px 15px 0 15px;
+ position: relative;
+ flex: 1;
+
+ &.con_main_l,
+ &.con_main_r {
+ background: url(../../assets/mixing/list_bg.png) no-repeat;
+ background-size: 100% 100%;
+ }
+
+ &.con_main_l .placeholder {
+ width: 100%;
+ height: 8%;
+ background: url(../../assets/mixing/list_l_bg.png) no-repeat;
+ background-size: 100% 100%;
+ }
+
+ &.con_main_r .placeholder {
+ width: 100%;
+ height: 8%;
+ background: url(../../assets/mixing/list_r_bg.png) no-repeat;
+ background-size: 100% 100%;
+ }
+
+ &.con_main_c .image {
+ position: relative;
+ float: left;
+ width: 50%;
+ height: 100%;
+ min-height: 480px;
+ text-align: center;
+
+ >p {
+ position: absolute;
+ left: 50%;
+ top: 21%;
+ white-space: nowrap;
+ transform: translate(-50%, -50%);
+ }
+
+ &.container_10 {
+ background: url(../../assets/mixing/container_10.png) center 30% no-repeat;
+ background-size: auto 70%;
+ }
+
+ &.container_20 {
+ background: url(../../assets/mixing/container_20.png) center 30% no-repeat;
+ background-size: auto 70%;
+ }
+
+ &.container_40 {
+ background: url(../../assets/mixing/container_40.png) center 30% no-repeat;
+ background-size: auto 70%;
+ }
+
+ &.container_60 {
+ background: url(../../assets/mixing/container_60.png) center 30% no-repeat;
+ background-size: auto 70%;
+ }
+
+ &.container_80 {
+ background: url(../../assets/mixing/container_80.png) center 30% no-repeat;
+ background-size: auto 70%;
+ }
+
+ &.container_90 {
+ background: url(../../assets/mixing/container_90.png) center 30% no-repeat;
+ background-size: auto 70%;
+ }
+
+ &.container_100 {
+ background: url(../../assets/mixing/container_100.png) center 30% no-repeat;
+ background-size: auto 70%;
+ }
+ }
+
+ .list_wrap {
+ position: absolute;
+ top: 12%;
+ bottom: 0;
+ }
+
+ }
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3