h5拌合站屏提交

shishuaikang

2023-12-01 4afea30fa20c6d689ce0f37e6777663535c0934f

h5拌合站屏提交

 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),
 }

 web/src/assets/mixing/container_10.png

 web/src/assets/mixing/container_100.png

 web/src/assets/mixing/container_20.png

 web/src/assets/mixing/container_40.png

 web/src/assets/mixing/container_60.png

 web/src/assets/mixing/container_80.png

 web/src/assets/mixing/container_90.png

 web/src/assets/mixing/header.png

 web/src/assets/mixing/list_bg.png

 web/src/assets/mixing/list_l_bg.png

 web/src/assets/mixing/list_r_bg.png

 web/src/assets/mixing/name_bg.png

 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: {

 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>

 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>

 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>

 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>

 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>