123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- <template>
- <view class="controlItem" hover-class="navigator-hover">
- <view class="funcname u-line-1" :style="{ paddingRight: item.isfeedback ? '10px' : '' }">
- {{ item.funcname }}
- </view>
- <view class="row">
- <view v-if="item.inputType == 'switch'" class="value u-line-1">
- {{ switchRes(item) }}
- </view>
- <view v-else class="value u-line-1">{{ item.showValue || item.params.lastvalue || ' --' }}</view>
- <view class="unit u-line-1">{{ item.params.unit }}</view>
- </view>
- <view v-if="item.isfeedback" class="dot" />
- </view>
- </template>
- <script>
- export default {
- name: "ControlItem",
- props: {
- item: Object
- },
- computed: {
- switchRes: function () {
- return item => {
- try {
- if (item.showValue) return item.showValue;
- let value = item.paramValue || item.params.lastvalue,
- res = item.params.options.find(v => v.value == value);
- return res ? res.label : '暂未设置'
- } catch (error) {
- }
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .controlItem {
- position: relative;
- width: 175px;
- height: 60px;
- border-radius: 4px;
- padding: 4px 6px 0;
- box-sizing: border-box;
- background-color: #fff;
- margin-top: 5px;
- .funcname {
- font-size: 15px;
- color: #333;
- }
- .dot {
- position: absolute;
- right: 2px;
- top: 2px;
- width: 10px;
- height: 10px;
- background: #D9001B;
- border-radius: 50%;
- }
- .row {
- display: flex;
- margin-top: 10px;
- align-items: flex-end;
- .value {
- width: 0;
- flex: 1;
- color: #333;
- font-size: 16px;
- flex-shrink: 0;
- font-weight: bold;
- }
- .unit {
- font-size: 12px;
- color: #666;
- flex-shrink: 0;
- max-width: 50px;
- }
- }
- }
- </style>
|