|
@@ -0,0 +1,519 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <!-- 公共参数 -->
|
|
|
+ <view class="common" v-if="data.common">
|
|
|
+ <view class="item" v-for="(item,index) in data.common" :key="index" @click="show_item(item)">
|
|
|
+ <view class="label">{{item.label}}</view>
|
|
|
+ <view class="value">{{item.value}}</view>
|
|
|
+ <view class="unit">{{item.unit}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 皮带数据 -->
|
|
|
+ <view class="belt" v-if="data.electric_parameter">
|
|
|
+ <view class="icon" v-if="data.state == 1">
|
|
|
+ <image src="./icon/belt_conveyor.gif" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="icon" v-if="data.state == 2">
|
|
|
+ <image src="./icon/belt_conveyor.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="name">{{data.name}}</view>
|
|
|
+ <!-- 电机运行参数 -->
|
|
|
+ <view class="parameter">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image src="./icon/canshu.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">电机运行参数</view>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="label_index">
|
|
|
+ <view class="index_title"></view>
|
|
|
+ <view class="index_box">
|
|
|
+ <view class="index">1号</view>
|
|
|
+ <view class="index">2号</view>
|
|
|
+ <view class="index">3号</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <view class="item" v-for="(item,index) in data.electric_parameter" :key="index"
|
|
|
+ @click="show_value_list(item)">
|
|
|
+ <view class="label">{{item.label}}</view>
|
|
|
+ <view class="value_list">
|
|
|
+ <view class="item" v-for="(item_2,index_2) in item.value_list" :key="index_2">
|
|
|
+ <view class="value">{{item_2.value}}</view>
|
|
|
+ <view class="unit">{{item_2.unit}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 变频器运行参数 -->
|
|
|
+ <view class="parameter converter_parameter">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image src="./icon/canshu.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">变频器运行参数</view>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="label_index">
|
|
|
+ <view class="index_title"></view>
|
|
|
+ <view class="index_box">
|
|
|
+ <view class="index">1号</view>
|
|
|
+ <view class="index">2号</view>
|
|
|
+ <view class="index">3号</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <view class="item" v-for="(item,index) in data.converter_parameter" :key="index"
|
|
|
+ @click="show_value_list(item)">
|
|
|
+ <view class="label">{{item.label}}</view>
|
|
|
+ <view class="value_list">
|
|
|
+ <view class="item" v-for="(item_2,index_2) in item.value_list" :key="index_2">
|
|
|
+ <view class="value">{{item_2.value}}</view>
|
|
|
+ <view class="unit">{{item_2.unit}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 速度选择状态 -->
|
|
|
+ <view class="parameter">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image src="./icon/canshu.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">速度选择状态</view>
|
|
|
+ </view>
|
|
|
+ <view class="state_list">
|
|
|
+ <view class="state" v-for="(item,index) in data.speed_selection_state" :key="index" @click="show_label(item.label)">
|
|
|
+ <view class="label">{{item.label}}</view>
|
|
|
+ <!-- 1-开 2-关 -->
|
|
|
+ <view class="value value_1" v-if="item.state == 1"></view>
|
|
|
+ <view class="value value_2" v-if="item.state == 2"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 皮带控制模式 -->
|
|
|
+ <view class="parameter">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image src="./icon/canshu.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">皮带控制模式</view>
|
|
|
+ </view>
|
|
|
+ <view class="state_list">
|
|
|
+ <view class="state" v-for="(item,index) in data.belt_control_mode" :key="index" @click="show_label(item.label)">
|
|
|
+ <view class="label">{{item.label}}</view>
|
|
|
+ <!-- 1-开 2-关 -->
|
|
|
+ <view class="value value_1" v-if="item.state == 1"></view>
|
|
|
+ <view class="value value_2" v-if="item.state == 2"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 皮带状态 -->
|
|
|
+ <view class="parameter belt_state">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image src="./icon/canshu.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">皮带状态</view>
|
|
|
+ </view>
|
|
|
+ <view class="state_list">
|
|
|
+ <view class="state" v-for="(item,index) in data.belt_state" :key="index" @click="show_label(item.label)">
|
|
|
+ <view class="label">{{item.label}}</view>
|
|
|
+ <!-- 1-开 2-关 -->
|
|
|
+ <view class="value value_1" v-if="item.state == 1"></view>
|
|
|
+ <view class="value value_2" v-if="item.state == 2"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 沿线保护状态 -->
|
|
|
+ <view class="parameter">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image src="./icon/canshu.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">沿线保护状态</view>
|
|
|
+ </view>
|
|
|
+ <view class="state_list">
|
|
|
+ <view class="state" v-for="(item,index) in data.protection" :key="index" @click="show_label(item.label)">
|
|
|
+ <view class="label">{{item.label}}</view>
|
|
|
+ <!-- 1-开 2-关 -->
|
|
|
+ <view class="value value_1" v-if="item.state == 1"></view>
|
|
|
+ <view class="value value_2" v-if="item.state == 2"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 沿线闭锁状态 -->
|
|
|
+ <view class="parameter atresia">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image src="./icon/canshu.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">沿线闭锁状态</view>
|
|
|
+ </view>
|
|
|
+ <view class="state_list">
|
|
|
+ <view class="state" v-for="(item,index) in data.atresia" :key="index" @click="show_label(item.label)">
|
|
|
+ <view class="label">{{item.label}}</view>
|
|
|
+ <!-- 1-开 2-关 -->
|
|
|
+ <view class="value value_1" v-if="item.state == 1"></view>
|
|
|
+ <view class="value value_2" v-if="item.state == 2"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+ import data from './belt_conveyor.json'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ mine_code:"",
|
|
|
+ system_type:"",
|
|
|
+
|
|
|
+ // 数据刷新定时器
|
|
|
+ data_timer:{},
|
|
|
+ data: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title:option.name
|
|
|
+ })
|
|
|
+ this.mine_code = option.mine_code
|
|
|
+ this.system_type = option.system_type
|
|
|
+
|
|
|
+ this.get_data()
|
|
|
+ this.data_timer = setInterval(()=>{
|
|
|
+ this.get_data()
|
|
|
+ },5000)
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ clearInterval(this.data_timer)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ get_data(){
|
|
|
+ this.$api.unified_automation_system({
|
|
|
+ mine_code: this.mine_code,
|
|
|
+ system_type: this.system_type
|
|
|
+ }).then((res)=>{
|
|
|
+ console.log(res.data)
|
|
|
+ this.data = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ show_item(item) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: "none",
|
|
|
+ title: item.label + " " + item.value + " " + item.unit
|
|
|
+ })
|
|
|
+ },
|
|
|
+ show_label(label){
|
|
|
+ uni.showToast({
|
|
|
+ icon: "none",
|
|
|
+ title: label
|
|
|
+ })
|
|
|
+ },
|
|
|
+ show_value_list(item) {
|
|
|
+ console.log(item)
|
|
|
+ uni.showToast({
|
|
|
+ icon: "none",
|
|
|
+ title: item.label + " " + item.value_list[0].value + " " + item.value_list[0].unit + " " +
|
|
|
+ item.value_list[1].value + " " + item.value_list[1].unit + " " + item.value_list[2]
|
|
|
+ .value +
|
|
|
+ " " + item.value_list[2].unit
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ page {
|
|
|
+ background-color: #0B163B;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 30rpx 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .common {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 700rpx;
|
|
|
+
|
|
|
+ background-image: url(./icon/common.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 40rpx;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ height: 50rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ color: #4CB1FF;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ width: 150rpx;
|
|
|
+
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ margin: 0 20rpx;
|
|
|
+ width: 150rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ background: rgba(0, 4, 15, 0.36);
|
|
|
+ border: 2rpx solid #3D55A5;
|
|
|
+
|
|
|
+ color: #FFF600;
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ width: 100rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .belt {
|
|
|
+ margin: 40rpx auto 0;
|
|
|
+ width: 700rpx;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 218rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ margin: 30rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ color: #DEF1FF;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ .parameter {
|
|
|
+ margin-top: 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ width: 260rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ background-image: url(./icon/border.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ margin-right: 20rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: #00FFF6;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ margin-top: 40rpx;
|
|
|
+
|
|
|
+ .label_index {
|
|
|
+ color: #4CB1FF;
|
|
|
+ font-size: 28rpx;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .index_title {
|
|
|
+ width: 160rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .index_box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .index {
|
|
|
+ width: 180rpx;
|
|
|
+ text-indent: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ color: #4CB1FF;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ width: 160rpx;
|
|
|
+
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value_list {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 180rpx;
|
|
|
+
|
|
|
+ .value {
|
|
|
+ width: 110rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ background: rgba(0, 4, 15, 0.36);
|
|
|
+ border: 2rpx solid #3D55A5;
|
|
|
+
|
|
|
+ color: #FFF600;
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ width: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .state_list{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ .state {
|
|
|
+ margin-right: 20rpx;
|
|
|
+ float: left;
|
|
|
+ width: 220rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ width: 140rpx;
|
|
|
+ color: #4CB1FF;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value_1 {
|
|
|
+ background-color: #00FF00;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value_2 {
|
|
|
+ background-color: #7A99FF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .state:nth-child(3n){
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .converter_parameter {
|
|
|
+ .title {
|
|
|
+ width: 300rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .belt_state{
|
|
|
+ .state_list{
|
|
|
+ margin: 20rpx auto 0;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .state {
|
|
|
+ margin: 0;
|
|
|
+ width: 250rpx;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ width: 180rpx;
|
|
|
+ color: #4CB1FF;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .atresia{
|
|
|
+ .state_list{
|
|
|
+ overflow: hidden;
|
|
|
+ .state{
|
|
|
+ margin-right: 20rpx;
|
|
|
+ float: left;
|
|
|
+ width: 160rpx;
|
|
|
+ .label{
|
|
|
+ width: 90rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .state:nth-child(3n){
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ .state:nth-child(4n){
|
|
|
+ margin-right: 0rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|