From 4afea30fa20c6d689ce0f37e6777663535c0934f Mon Sep 17 00:00:00 2001
From: shishuaikang <280848880@qq.com>
Date: 星期五, 01 十二月 2023 09:12:10 +0800
Subject: [PATCH] h5拌合站屏提交
---
web/src/views/MixingInfo/mixRatio.vue | 243 ++++++++++++++++
web/src/assets/mixing/header.png | 0
web/src/views/GoodManage/MixingScreen.vue | 202 +++++++++++++
web/src/router/index.js | 16 +
web/src/api/modules/mixing.js | 5
web/src/assets/mixing/container_90.png | 0
web/src/assets/mixing/name_bg.png | 0
web/src/views/MixingInfo/mixing.vue | 310 ++++++++++++++++++++
web/src/assets/mixing/container_40.png | 0
web/src/assets/mixing/container_60.png | 0
web/src/assets/mixing/container_10.png | 0
web/src/assets/mixing/list_r_bg.png | 0
web/src/assets/mixing/list_l_bg.png | 0
web/src/assets/mixing/container_20.png | 0
web/src/assets/mixing/container_80.png | 0
web/src/assets/mixing/list_bg.png | 0
web/src/assets/mixing/container_100.png | 0
web/src/views/GoodManage/MixRatioScreen.vue | 11
web/src/views/MixingInfo/components/List.vue | 91 ++++++
19 files changed, 877 insertions(+), 1 deletions(-)
diff --git a/web/src/api/modules/mixing.js b/web/src/api/modules/mixing.js
index c017b66..d91fa20 100644
--- a/web/src/api/modules/mixing.js
+++ b/web/src/api/modules/mixing.js
@@ -6,5 +6,8 @@
// H5搅拌站大屏展示数据信息
showHmixings: params =>
axios.get('/materials/suMaterialWarehouse/selectNewOneByTableNum', {params}),
-
+ getMixing: params =>
+ axios.get('/materials/materialRelease/siloList', {params}),
+ getMixRatio: params =>
+ axios.post('/materials/materialRelease/mixingConsumeList', params),
}
\ No newline at end of file
diff --git a/web/src/assets/mixing/container_10.png b/web/src/assets/mixing/container_10.png
new file mode 100644
index 0000000..15291b0
--- /dev/null
+++ b/web/src/assets/mixing/container_10.png
Binary files differ
diff --git a/web/src/assets/mixing/container_100.png b/web/src/assets/mixing/container_100.png
new file mode 100644
index 0000000..5b73dda
--- /dev/null
+++ b/web/src/assets/mixing/container_100.png
Binary files differ
diff --git a/web/src/assets/mixing/container_20.png b/web/src/assets/mixing/container_20.png
new file mode 100644
index 0000000..2bbe0dc
--- /dev/null
+++ b/web/src/assets/mixing/container_20.png
Binary files differ
diff --git a/web/src/assets/mixing/container_40.png b/web/src/assets/mixing/container_40.png
new file mode 100644
index 0000000..d2f52d3
--- /dev/null
+++ b/web/src/assets/mixing/container_40.png
Binary files differ
diff --git a/web/src/assets/mixing/container_60.png b/web/src/assets/mixing/container_60.png
new file mode 100644
index 0000000..5ced4a7
--- /dev/null
+++ b/web/src/assets/mixing/container_60.png
Binary files differ
diff --git a/web/src/assets/mixing/container_80.png b/web/src/assets/mixing/container_80.png
new file mode 100644
index 0000000..38348d1
--- /dev/null
+++ b/web/src/assets/mixing/container_80.png
Binary files differ
diff --git a/web/src/assets/mixing/container_90.png b/web/src/assets/mixing/container_90.png
new file mode 100644
index 0000000..47ee2ac
--- /dev/null
+++ b/web/src/assets/mixing/container_90.png
Binary files differ
diff --git a/web/src/assets/mixing/header.png b/web/src/assets/mixing/header.png
new file mode 100644
index 0000000..be0a727
--- /dev/null
+++ b/web/src/assets/mixing/header.png
Binary files differ
diff --git a/web/src/assets/mixing/list_bg.png b/web/src/assets/mixing/list_bg.png
new file mode 100644
index 0000000..462f5e3
--- /dev/null
+++ b/web/src/assets/mixing/list_bg.png
Binary files differ
diff --git a/web/src/assets/mixing/list_l_bg.png b/web/src/assets/mixing/list_l_bg.png
new file mode 100644
index 0000000..d8c7dc5
--- /dev/null
+++ b/web/src/assets/mixing/list_l_bg.png
Binary files differ
diff --git a/web/src/assets/mixing/list_r_bg.png b/web/src/assets/mixing/list_r_bg.png
new file mode 100644
index 0000000..63add79
--- /dev/null
+++ b/web/src/assets/mixing/list_r_bg.png
Binary files differ
diff --git a/web/src/assets/mixing/name_bg.png b/web/src/assets/mixing/name_bg.png
new file mode 100644
index 0000000..cf1da41
--- /dev/null
+++ b/web/src/assets/mixing/name_bg.png
Binary files differ
diff --git a/web/src/router/index.js b/web/src/router/index.js
index 2d80873..fe7eda0 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -15,6 +15,22 @@
}
},
{
+ path: '/mixing/*',
+ name: 'mixing',
+ meta: {
+ title: '管片场拌合站'
+ },
+ component: () => import('../views/MixingInfo/mixing.vue'),
+ },
+ {
+ path: '/mixratio/*',
+ name: 'mixratio',
+ meta: {
+ title: '管片场拌合站表格'
+ },
+ component: () => import('../views/MixingInfo/mixRatio.vue'),
+ },
+ {
path: `/mixingInfo/num=1`,
name: 'mixingInfo',
meta: {
diff --git a/web/src/views/GoodManage/MixRatioScreen.vue b/web/src/views/GoodManage/MixRatioScreen.vue
new file mode 100644
index 0000000..74753ca
--- /dev/null
+++ b/web/src/views/GoodManage/MixRatioScreen.vue
@@ -0,0 +1,11 @@
+<template>
+ <div>222222222222222</div>
+</template>
+
+<script>
+
+</script>
+
+<style lang="sass" scoped>
+@import '../../style/layout-main.scss';
+</style>
\ No newline at end of file
diff --git a/web/src/views/GoodManage/MixingScreen.vue b/web/src/views/GoodManage/MixingScreen.vue
new file mode 100644
index 0000000..5e6d786
--- /dev/null
+++ b/web/src/views/GoodManage/MixingScreen.vue
@@ -0,0 +1,202 @@
+<!-- 设备管理 ==> 拌合站屏管理-->
+<template>
+ <div class="main">
+ <div class="main_header">
+ <div class="header_item">
+ <span class="header_label">拌合站屏：</span>
+ <el-select size="mini" v-model="queryInfo.screen" placeholder="请选择拌合站屏">
+ <el-option v-for="item in queryInfoScreens" :key="item.value" :label="item.label"
+ :value="item.value"></el-option>
+ </el-select>
+ </div>
+ <div class="header_item">
+ <span class="header_label">录入方式：</span>
+ <el-select size="mini" v-model="queryInfo.inmode" placeholder="请选择录入方式">
+ <el-option v-for="item in queryInfoInmodes" :key="item.value" :label="item.label"
+ :value="item.value"></el-option>
+ </el-select>
+ </div>
+ <div class="header_item">
+ <span class="header_label">创建时间：</span>
+ <el-date-picker type="daterange" v-model="times" value-format="yyyy-MM-dd" start-placeholder="起始时间"
+ end-placeholder="结束时间" @change="changeTime" clear></el-date-picker>
+ </div>
+ <div class="header_item">
+ <el-button icon="el-icon-search" v-permission="'search'" @click="queryReset">查询</el-button>
+ <el-button icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button>
+ </div>
+ </div>
+ <div class="main_content">
+ <div class="main_content_item" v-for="(item, index) in ['', '', '', '', '',]" :key="index">
+
+ </div>
+ </div>
+
+ <!-- 详情dialog -->
+ <el-dialog width="400px" class="prop_dialog" v-if="isRenderDialog" title="详情" :visible.sync="asyncVisible">
+
+ <el-form class="rule_form" label-width="auto">
+
+ <div class="divider"></div>
+
+ <el-form-item label="巡检任务:">{{ info.task }}</el-form-item>
+
+ <el-form-item label="巡检标准:">{{ info.standard }}</el-form-item>
+
+ <el-form-item label="巡检人员:">{{ info.name }}</el-form-item>
+
+ <div class="divider"><span>巡检路线</span></div>
+
+ <div class="regions">
+ <div class="region" v-for=" item in info.regions " :key="item.regionId">{{
+ item.region }}
+ </div>
+ </div>
+ </el-form>
+ </el-dialog>
+
+ </div>
+</template>
+<script>
+export default {
+ data() {
+ return {
+ loading: false,
+ isRenderDialog: false,
+ asyncVisible: false,
+
+ info: { // 详情信息
+ task: '',
+ standard: '',
+ name: '',
+ regions: [],
+ },
+ userId: '', // 存储点击后的用户id
+ taskId: '', // 存储点击后的巡检任务id
+ times: [], // 时间范围
+ queryInfo: {
+ pageNum: 1,
+ pageSize: 10,
+ inmode: '', // 录入方式
+ screen: '', // 拌合站屏
+ startTime: '',
+ endTime: '',
+ },
+ regionInfos: { // 巡检路线详情
+ isRenderDialog: false,
+ asyncVisible: false,
+ time: '', // 巡检时间
+ region: '', // 巡检区域
+ res: '', // 巡检结果
+ img: '', // 上传的图片
+ location: '', // 位置
+ }
+ }
+ },
+ beforeCreate() {
+ this.queryInfoInmodes = [
+ {value: '0', label: '手动'},
+ {value: '1', label: '自动'},
+ ]
+ this.queryInfoScreens = [
+ {value: '0', label: '1-1'},
+ {value: '1', label: '1-2'},
+ ]
+ this.$http = this.$api.Safety.RiskGrad.polling
+ },
+ created() {
+ this.setTableColumn()
+ this.getLists()
+ },
+ methods: {
+ // 获取table列表数据
+ getLists() {
+ let params = this.queryInfo
+ this.loading = true
+ this.$http.taskcardGetlists(params).then(res => {
+ if (res.statusMsg === 'ok') {
+ console.log(res)
+ }
+ this.loading = false
+ })
+ },
+ // 初始化 table 配置
+ setTableColumn() {
+ },
+ addRow() { },
+ // 查询按钮列表信息
+ queryReset() {
+ this.queryInfo.pageNum = 1
+ this.queryInfo.pageSize = 10
+ this.getLists()
+ },
+ changeTime(times) {
+ times = times || ['', '']
+ this.queryInfo.startTime = times[0]
+ this.queryInfo.endTime = times[1]
+ },
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/style/layout-main.scss';
+
+.rule_form {
+ color: #fff;
+
+ ::v-deep .el-form-item__content {
+ display: block;
+ }
+
+ .image {
+ flex: none;
+ width: 91px;
+ height: 120px;
+ margin-right: 15px;
+ border-radius: 5px;
+ border: 1px solid #0c5983;
+
+ img {
+ width: 100%;
+ }
+ }
+}
+
+.regions {
+ text-align: center;
+
+ .region {
+ line-height: 34px;
+ margin-bottom: 16px;
+ background: rgba(56, 175, 247, .25);
+ cursor: pointer;
+ }
+}
+
+.divider {
+ position: relative;
+ margin-bottom: 30px;
+ text-indent: 10px;
+ color: #fff;
+ border-left: 3px solid #18F6F8;
+
+ &::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ bottom: -8px;
+ width: 100%;
+ padding: 20px 0;
+ border-bottom: 1px solid #0C4D6F;
+ }
+}
+
+.main_content .main_content_item {
+ float: left;
+ width: 48%;
+ height: 200px;
+ margin: 1%;
+ border: 1px solid red;
+}
+</style>
\ No newline at end of file
diff --git a/web/src/views/MixingInfo/components/List.vue b/web/src/views/MixingInfo/components/List.vue
new file mode 100644
index 0000000..4642226
--- /dev/null
+++ b/web/src/views/MixingInfo/components/List.vue
@@ -0,0 +1,91 @@
+<template>
+ <div class="list">
+ <div class="item" v-for="item in fieldMap" :key="item.name">
+ <span class="name">{{ item.name }}:</span>
+ <template v-if="item.formatter">
+ <span class="value" :class="item.class(data)">{{ item.formatter(data) }}</span>
+ </template>
+ <template v-else>
+ <span class="value">{{ data && data[item.type] || '' }}</span>
+ </template>
+
+ </div>
+ </div>
+</template>
+<script>
+export default {
+ data() {
+ return {}
+ },
+ props: {
+ data: {
+ type: Object,
+ default: () => { }
+ }
+ },
+ beforeCreate() {
+ // 字段映射表
+ this.fieldMap = [
+ {name: '规格型号', type: 'spec'},
+ {name: '产地名称', type: 'producer'},
+ {name: '炉(批)号', type: 'stove'},
+ {name: '进场数量', type: 'inNum'},
+ {name: '进场日期', type: 'inDate'},
+ {name: '检验日期', type: 'inspectDate'},
+ {
+ name: '检验状态', class(row) {
+ let state = row && row.inspectState
+ return {1: 'style1', 2: 'style2', 3: 'style3'}[state] || ''
+ }, formatter(row) {
+ let state = row && row.inspectState || ''
+ return {1: '合格', 2: '不合格', 3: '待检测'}[state] || ''
+ }
+ },
+ {name: '报告编号', type: 'reportNumber'},
+ ]
+ },
+}
+</script>
+
+<style scoped>
+.list {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ .item {
+ display: flex;
+ flex: 1;
+ margin-top: 4px;
+
+ .name {
+ margin-right: 4px;
+ text-indent: 6px;
+ white-space: nowrap;
+ }
+
+ .value {
+ color: #03F1FF;
+
+ &.style1 {
+ font-size: 1.5rem;
+ line-height: 1.2rem;
+ color: #16F849;
+ }
+
+ &.style2 {
+ font-size: 1.5rem;
+ line-height: 1.2rem;
+ color: red;
+ }
+
+ &.style3 {
+ font-size: 1.5rem;
+ line-height: 1.2rem;
+ color: #FF6600;
+ }
+ }
+
+ }
+}
+</style>
diff --git a/web/src/views/MixingInfo/mixRatio.vue b/web/src/views/MixingInfo/mixRatio.vue
new file mode 100644
index 0000000..0662aa1
--- /dev/null
+++ b/web/src/views/MixingInfo/mixRatio.vue
@@ -0,0 +1,243 @@
+<template>
+ <div class="wrap">
+ <div class="header">
+ <div class="header_name">中铁十四局通甬站前I标管片场拌合站</div>
+ </div>
+ <div class="table">
+ <div class="row title">{{ info.signboardName }}</div>
+
+ <div class="row">
+ <div class="name">工程名称</div>
+ <div class="value">{{ info.proName }}</div>
+ </div>
+
+ <div class="row">
+ <div class="name">施工单位</div>
+ <div class="value">{{ info.constructionUnit }}</div>
+ </div>
+
+ <div class="row line">
+ <div>
+ <div class="name">施工日期</div>
+ <div class="value">{{ info.saveStamp }}</div>
+ </div>
+ <div>
+ <div class="name">施工部位</div>
+ <div class="value">{{ info.construction }}</div>
+ </div>
+ </div>
+
+ <div class="row" v-for="item in dataLists" :key="item.name">
+ <div class="name">{{ item.name }}</div>
+ <div class="column">
+ <div class="column-item" v-for="(sub, index) in item.value" :key="index">{{ sub }}</div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+</template>
+
+<script>
+const interval = function (fn, Vue) {
+ let timer = setInterval(
+ (() => {
+ fn()
+ return fn
+ })(),
+ 1000 * 60 * 5
+ )
+ if (Vue) {
+ Vue.$once('hook:beforeDestroy', function () {
+ timer && clearInterval(timer)
+ })
+ }
+}
+export default {
+ name: 'Page2',
+ data() {
+ return {
+ info: {
+ signboardName: '', // 标识排
+ proName: '', // 工程名称
+ constructionUnit: '', // 施工单位
+ saveStamp: '', // 施工日期
+ construction: '', // 施工部位
+ },
+ dataLists: [
+ {name: '材料名称', type: 'dictName', value: []}, // 材料名称
+ {name: '规格型号', type: 'spec', value: []}, // 规格型号
+ {name: '生产厂家', type: 'manufacturer', value: []}, // 生产厂家
+ {name: '材料含水率(%)', type: 'watFull', value: []}, // 含水率
+ {name: '理论用量(kg/m³)', type: 'planAmnt', value: []}, // 理论用量
+ {name: '实际用量(kg/m³)', type: 'factAmnt', value: []}, // 实际用量
+ ]
+ }
+ },
+ 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`
+ }
+ },
+ methods: {
+ async getLists() {
+ const params = {
+ pageNum: --this.type, // 传 0 1对应两个页面
+ pageSize: 1,
+ }
+ this.$api.Infos.getMixRatio(params).then(res => {
+ if (res.statusMsg === 'ok' && res.data) {
+ const {list} = res.data
+ if (list && list.length) {
+ const item = list[0]
+ const {tmixingConsumes} = item
+
+ this.info.signboardName = item.signboardName
+ this.info.proName = item.proName
+ this.info.constructionUnit = item.constructionUnit
+
+ if (tmixingConsumes && tmixingConsumes.length) {
+ this.info.saveStamp = tmixingConsumes[0].saveStamp
+ this.info.construction = tmixingConsumes[0].construction
+
+ tmixingConsumes.forEach(item => {
+ this.dataLists.forEach(val => {
+ item[val.type] && val.value.push(item[val.type])
+ })
+ })
+ }
+ }
+ } else {
+ this.$message.warning('请检查网络或联系管理员!!!')
+ }
+ })
+
+ },
+ }
+}
+</script>
+<style scoped>
+.wrap {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ font-size: 1rem;
+ background: #040A3F;
+ overflow: hidden;
+}
+
+.header {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 3rem;
+ text-align: center;
+ 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;
+ }
+}
+
+.table {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ top: 4rem;
+ bottom: 2rem;
+ left: 2rem;
+ right: 2rem;
+ font-size: 0.8rem;
+ color: #fff;
+
+ .title {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #BEE2F0;
+ background: rgba(1, 142, 196, .35);
+ }
+
+ .row {
+ flex: 1;
+ width: 100%;
+ height: 2rem;
+ margin: 0 -1px -1px 0;
+ text-align: center;
+ line-height: 2rem;
+ border: 1px solid #01B3EF;
+
+ .name {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ float: left;
+ width: 8rem;
+ height: 100%;
+ margin: -1px -1px -1px 0;
+ color: #BEE2F0;
+ border: 1px solid #01B3EF;
+ background: rgba(1, 142, 196, .75);
+ box-sizing: unset;
+ }
+
+ .value {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ overflow: hidden;
+ }
+
+ .column {
+ display: flex;
+ height: 100%;
+
+ .column-item {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex: 1;
+ margin: -1px -1px -1px 0;
+ border: 1px solid #01B3EF;
+ }
+ }
+ }
+
+ .row.line {
+ display: flex;
+
+ >div {
+ flex: 1;
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/views/MixingInfo/mixing.vue b/web/src/views/MixingInfo/mixing.vue
new file mode 100644
index 0000000..ce3481b
--- /dev/null
+++ b/web/src/views/MixingInfo/mixing.vue
@@ -0,0 +1,310 @@
+<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 * 5
+ )
+ 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`
+ }
+ },
+ 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