| | |
| | | <template> |
| | | <div class="main"> |
| | | <div class="switch-info"> |
| | | <div class="name">DK-11</div> |
| | | <div class="state"> |
| | | <el-switch |
| | | style="display: block" |
| | | v-model="DK11" |
| | | active-color="#13ce66" |
| | | inactive-color="#ccc" |
| | | active-text="合闸" |
| | | inactive-text="分闸" |
| | | > |
| | | </el-switch> |
| | | </div> |
| | | <div class="name">DK-12</div> |
| | | <div class="state"> |
| | | <el-switch |
| | | style="display: block" |
| | | v-model="DK12" |
| | | active-color="#13ce66" |
| | | inactive-color="#ccc" |
| | | active-text="合闸" |
| | | inactive-text="分闸" |
| | | > |
| | | </el-switch> |
| | | </div> |
| | | <div class="name">DK-13</div> |
| | | <div class="state"> |
| | | <el-switch |
| | | style="display: block" |
| | | v-model="DK13" |
| | | active-color="#13ce66" |
| | | inactive-color="#ccc" |
| | | active-text="合闸" |
| | | inactive-text="分闸" |
| | | > |
| | | </el-switch> |
| | | </div> |
| | | <div class="name">DK-14</div> |
| | | <div class="state"> |
| | | <el-switch |
| | | style="display: block" |
| | | v-model="DK14" |
| | | active-color="#13ce66" |
| | | inactive-color="#ccc" |
| | | active-text="合闸" |
| | | inactive-text="分闸" |
| | | > |
| | | </el-switch> |
| | | </div> |
| | | <div class="name">DK-15</div> |
| | | <div class="state"> |
| | | <el-switch |
| | | style="display: block" |
| | | v-model="DK15" |
| | | active-color="#13ce66" |
| | | inactive-color="#ccc" |
| | | active-text="合闸" |
| | | inactive-text="分闸" |
| | | > |
| | | </el-switch> |
| | | </div> |
| | | <div class="name">DK-16</div> |
| | | <div class="state"> |
| | | <el-switch |
| | | style="display: block" |
| | | v-model="DK16" |
| | | active-color="#13ce66" |
| | | inactive-color="#ccc" |
| | | active-text="合闸" |
| | | inactive-text="分闸" |
| | | > |
| | | </el-switch> |
| | | </div> |
| | | <div class="name">DK-17</div> |
| | | <div class="state"> |
| | | <el-switch |
| | | style="display: block" |
| | | v-model="DK17" |
| | | active-color="#13ce66" |
| | | inactive-color="#ccc" |
| | | active-text="合闸" |
| | | inactive-text="分闸" |
| | | > |
| | | </el-switch> |
| | | </div> |
| | | <div class="name">DK-18</div> |
| | | <div class="state"> |
| | | <el-switch |
| | | v-model="DK18" |
| | | active-color="#13ce66" |
| | | inactive-color="#ccc" |
| | | active-text="合闸" |
| | | inactive-text="分闸" |
| | | > |
| | | </el-switch> |
| | | </div> |
| | | </div> |
| | | <div class="footer"> |
| | | <three-btn @click="getParams()">读取</three-btn> |
| | | <three-btn :disabled="!setTestFlag" @click="submitFrom">设定</three-btn> |
| | | <three-btn @click="$emit('close')" |
| | | >取消</three-btn |
| | | > |
| | | <div class="tbl-data-body"> |
| | | <el-table stripe size="small" :data="switchInfo"> |
| | | <el-table-column |
| | | v-for="header in table.headers" |
| | | :key="header.prop" |
| | | :prop="header.prop" |
| | | :label="header.label" |
| | | align="center" |
| | | ></el-table-column> |
| | | <el-table-column label="操作" width="100"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | v-if="!scope.row.state1" |
| | | type="primary" |
| | | size="mini" |
| | | :disabled="scope.row.control1" |
| | | @click="switchControl(scope.row, 1)" |
| | | >合闸</el-button |
| | | > |
| | | <el-button |
| | | v-else |
| | | type="danger" |
| | | :disabled="scope.row.control1" |
| | | size="mini" |
| | | @click="switchControl(scope.row, 0)" |
| | | >分闸</el-button |
| | | > |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { setDev6159Swtich } from "../js/realTime"; |
| | | |
| | | export default { |
| | | name: "", |
| | | props: { |
| | | devId: { |
| | | type: [String, Number], |
| | | required: true |
| | | required: true, |
| | | }, |
| | | switchInfo: { |
| | | type: Array, |
| | | required: true, |
| | | }, |
| | | }, |
| | | data() { |
| | | return { |
| | | table: { |
| | | headers: [ |
| | | { |
| | | prop: "name", |
| | | label: "开关名称", |
| | | }, |
| | | { |
| | | prop: "control", |
| | | label: "控制方式", |
| | | }, |
| | | { |
| | | prop: "state", |
| | | label: "状态", |
| | | }, |
| | | ], |
| | | }, |
| | | setTestFlag: false, |
| | | DK11: false, |
| | | DK12: false, |
| | |
| | | }, |
| | | components: {}, |
| | | methods: { |
| | | getParams(){ |
| | | |
| | | getParams() {}, |
| | | switchControl(obj, state) { |
| | | let loading = this.$layer.loading(1); |
| | | setDev6159Swtich(this.devId, obj.ctrlName, !obj.state1 * 1) |
| | | .then((res) => { |
| | | let { code, data } = res.data; |
| | | if (code && data) { |
| | | // console.log(data); |
| | | this.$layer.msg("操作成功"); |
| | | } else { |
| | | this.$layer.msg("操作失败"); |
| | | } |
| | | // 关闭等待框 |
| | | this.$layer.close(loading); |
| | | }) |
| | | .catch((err) => { |
| | | console.log(err); |
| | | // 关闭等待框 |
| | | this.$layer.close(loading); |
| | | }); |
| | | }, |
| | | submitFrom() { |
| | | |
| | | }, |
| | | |
| | | }, |
| | | |
| | | mounted() {}, |
| | |
| | | font-weight: bold; |
| | | color: #f7b33c; |
| | | &::after { |
| | | content: ':'; |
| | | content: ":"; |
| | | } |
| | | } |
| | | .state { |