123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217 |
- <template>
- <view class="tabs">
- <view class="box">
- <u-tabs :list="tabList" @click="changeTab" lineColor="#052E5D"
- :activeStyle="{ color: '#052E5D', fontWeight: 'bold' }" :inactiveStyle="{
- color: '#BBBBBB',
- }" lineWidth="36" />
- </view>
- <view class="content">
- <view class="gdsz" v-show="showPage == '关断设置'">
- <mpattern ref="关断复位" /><!-- fColor="#000" -->
- <mpattern ref="关断设置" /><!-- fColor="#000" -->
- <!-- <view class="llcj" v-if="llcj.paramname">
- {{ llcj.paramname }}:{{ llcj.lastvalue || ' -- ' }}<text class="unit">{{ llcj.unit || '' }}</text>
- </view> -->
- <view class="yblc">
- <control-item v-show="showPage == '关断设置'" v-for="item in gdszList" :key="item.paramName" :item="item"
- @click.native="onClick(item)" />
- </view>
- </view>
- <view class="yblc" v-show="showPage == '报警设置'">
- <control-item v-show="showPage == '报警设置'" v-for="item in bjszList" :key="item.paramName" :item="item"
- @click.native="onClick(item)" />
- </view>
- <view class="yblc" v-show="showPage == '仪表量程'">
- <control-item v-show="showPage == '仪表量程'" v-for="item in yclbList" :key="item.paramName" :item="item"
- @click.native="onClick(item)" />
- </view>
- <view class="plcsz" v-if="showPage == 'PLC时钟'">
- <view class="label">
- 年月日时分秒
- </view>
- <view class="value" v-if="plc.funcname">
- {{ plc.params.lastvalue || '--' }}
- <view class="plcsz-but" hover-class="navigator-hover" @click="datetimeShow = true">{{
- plc.isfeedback ? '待更新' : '更新' }}</view>
- <u-datetime-picker :show="datetimeShow" title="PLC时钟" v-model="plclastvalue" @cancel="onCancel"
- @confirm="onConfirm" mode="datetime" />
- </view>
- </view>
- </view>
- <My_input ref="MyInput" />
- </view>
- </template>
- <script>
- import mpattern from "./mpattern";
- import { formatTime } from "../../../../utils/getTime";
- export default {
- name: "tabs",
- components: { mpattern },
- props: {
- control: Object
- },
- data() {
- return {
- tabList: [],
- showPage: '关断设置',
- bjszList: [],
- yclbList: [],
- gdszList: [],
- llcj: {},
- plc: {},
- datetimeShow: false,
- plclastvalue: ""
- }
- },
- watch: {
- control: function (newVal) {
- if (newVal) {
- this.tabList = [{
- name: '关断设置',
- }, {
- name: '报警设置',
- }, {
- name: '仪表量程'
- }, {
- name: 'PLC时钟'
- }]
- try {
- this.$refs.关断设置.ctrlModel = this.__proto__.getControlItem(['关断设置'], newVal, { 关断设置: "switch" })[0];
- this.$refs.关断复位.ctrlModel = this.__proto__.getControlItem(['关断复位'], newVal, { 关断复位: "switch" })[0];
- this.llcj = newVal.params.流量采集;
- let nameList = ['关断流量值设定', '关断延时设置']
- this.gdszList = this.__proto__.getControlItem(nameList, newVal)
- } catch (error) {
- console.error("关断设置", error)
- }
- try {
- this.bjszList = this.__proto__.getControlItem(["失压警告", "失压警告设定", "失压报警", "失压报警设定", "超流量警告", "超流量警告设定", "超流量报警", "超流量报警设定"], newVal)
- } catch (error) {
- console.error("报警设置", error)
- }
- try {
- let nameList = ['压力量程高值', '压力量程低值', '流量量程高值', '流量量程低值',]
- this.yclbList = this.__proto__.getControlItem(nameList, newVal)
- } catch (error) {
- console.error("仪表量程", error)
- }
- try {
- this.plc = this.__proto__.getControlItem(['PLC时钟'], newVal, { Ctrl: "datatime" })[0];
- this.plclastvalue = this.plc.params.lastvalue;
- } catch (error) {
- console.error("PLC时钟", error)
- }
- }
- }
- },
- methods: {
- changeTab(e) {
- this.showPage = e.name;
- },
- onClick(item) {
- this.$refs.MyInput.openInput(item)
- },
- onCancel(e) {
- this.datetimeShow = false;
- },
- async onConfirm(e) {
- let date = formatTime(new Date(e.value)),
- plc = this.plc;
- let res = await this.$Http.setControlItem(plc.w_functionid, {
- [`${plc.paramName}`]: date
- });
- this.datetimeShow = false;
- }
- },
- }
- </script>
- <style lang="scss" scoped>
- .tabs {
- position: relative;
- box-sizing: border-box;
- .box {
- background: #fff;
- border: 4px;
- border-radius: 4px;
- box-sizing: border-box;
- }
- /deep/ .controlItem {
- width: 160px !important;
- }
- /deep/ .uni-scroll-view,
- /deep/.u-tabs__wrapper__nav__item {
- height: 35px !important;
- }
- /deep/ .u-tabs__wrapper__nav__item__text {
- font-size: 12px !important;
- }
- .content {
- // padding: 0 10px 10px;
- padding-bottom: 10px;
- box-sizing: border-box;
- width: 100%;
- .gdsz {
- padding-top: 10px;
- .llcj {
- display: flex;
- align-items: center;
- font-size: 3.2vw;
- .unit {
- font-size: 3.2vw;
- }
- }
- }
- .yblc {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- }
- .plcsz {
- font-size: 14px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- box-sizing: border-box;
- padding: 10px 10px 0;
- line-height: 25px;
- color: #fff;
- .value {
- display: flex;
- color: #fff;
- .plcsz-but {
- background-color: #004A92;
- font-size: 12px;
- padding: 0 6px !important;
- margin-right: 6px;
- border-radius: 4px;
- box-sizing: border-box;
- margin-left: 20px;
- color: #fff;
- font-size: 10px;
- height: 22px;
- line-height: 22px;
- }
- }
- }
- }
- }
- </style>
|