单兵设备、音柱

zhanghua

2022-10-31 feebf68645a0c91e07c7eadeb04ae970001f1fc1

单兵设备、音柱

 src/api/system/handheldTerminal.js

New file
@@ -0,0 +1,37 @@
import axios from "axios";
import {
    getToken
} from '@/utils/helper'
const baseUrl = '/sccg/equipment_handheld_terminal'
const token = {
    'Authorization': getToken()
}
export default {
    // 获取列表
    getHandheldTerminalList: (data) => axios({
        method: 'get',
        url: baseUrl + '/query',
        headers: {
            ...token
        },
        params: data
    }),
    // 新增
    saveHandheldTerminal: (data) => axios({
        method: 'post',
        url: baseUrl + '/add',
        headers: {
            ...token
        },
        data: data
    }),
    // 新增
    updateHandheldTerminal: (data) => axios({
        method: 'put',
        url: baseUrl + '/update',
        headers: {
            ...token
        },
        data: data
    })
};

 src/api/system/loudspeaker.js

New file
@@ -0,0 +1,37 @@
import axios from "axios";
import {
    getToken
} from '@/utils/helper'
const baseUrl = '/sccg/equipment_loudspeaker'
const token = {
    'Authorization': getToken()
}
export default {
    // 获取列表
    getLoudspeakerList: (data) => axios({
        method: 'get',
        url: baseUrl + '/query',
        headers: {
            ...token
        },
        params: data
    }),
    // 新增
    saveLoudspeaker: (data) => axios({
        method: 'post',
        url: baseUrl + '/add',
        headers: {
            ...token
        },
        data: data
    }),
    // 新增
    updateLoudspeaker: (data) => axios({
        method: 'put',
        url: baseUrl + '/update',
        headers: {
            ...token
        },
        data: data
    })
};

 src/router/index.js

@@ -84,6 +84,17 @@
                path: 'point',
                name: 'point',
                component: () => import('@/views/systemSetting/device/point'),
              },
              {
                path: 'handheldTerminal',
                name: 'handheldTerminal',
                component: () => import('@/views/systemSetting/device/handheldTerminal'),
              }
              ,
              {
                path: 'loudspeaker',
                name: 'loudspeaker',
                component: () => import('@/views/systemSetting/device/loudspeaker'),
              }
            ]
          }

 src/store/index.js

@@ -3,19 +3,22 @@
import users from "./users"
import logs from "./logs"
import bayonet from './system/bayonet'
import loudspeaker from './system/loudspeaker'
import handheldTerminal from './system/handheldTerminal'
import shortMessage from './operate/managenment/shortMessage'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    users,logs,bayonet,shortMessage
    users,
    logs,
    bayonet,
    shortMessage,
    loudspeaker,
    handheldTerminal
  }
})
})

 src/store/system/handheldTerminal/index.js

New file
@@ -0,0 +1,18 @@
import loudspeakerApi from "@/api/system/loudspeaker";
export default {
    namespaced: true,
    state: {
        userInfo: {},
    },
    actions: {
        getLoudspeakerList(context, params) {
            return loudspeakerApi.getLoudspeakerList(params);
        },
        saveLoudspeaker(context, params) {
            return loudspeakerApi.saveLoudspeaker(params);
        },
        updateLoudspeaker(context, params) {
            return loudspeakerApi.updateLoudspeaker(params);
        },
    },
};

 src/store/system/loudspeaker/index.js

New file
@@ -0,0 +1,18 @@
import loudspeakerApi from "@/api/system/loudspeaker";
export default {
    namespaced: true,
    state: {
        userInfo: {},
    },
    actions: {
        getLoudspeakerList(context, params) {
            return loudspeakerApi.getLoudspeakerList(params);
        },
        saveLoudspeaker(context, params) {
            return loudspeakerApi.saveLoudspeaker(params);
        },
        updateLoudspeaker(context, params) {
            return loudspeakerApi.updateLoudspeaker(params);
        },
    },
};

 src/views/layout/components/Menu/index.vue

@@ -82,7 +82,6 @@
      if (info && info.menus) {
        clearTimeout(timer);
        this.menuList = info.menus;
        console.log(info.menus);
      } else {
        timer = setInterval(() => {
          this.loadMenu();

 src/views/systemSetting/device/handheldTerminal/components/dialogForm.vue

New file
@@ -0,0 +1,340 @@
<template>
  <div class="create">
    <main>
      <div class="mainContent">
        <el-form
          ref="formRef"
          label-width="140px"
          :rules="createRules"
          autoComplete="on"
          :model="form"
          label-position="right"
        >
          <!-- 单兵名称 -->
          <el-form-item class="optionItem" label="单兵名称:" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请填写单兵名称"
            ></el-input>
          </el-form-item>
          <!-- 单兵编号 -->
          <el-form-item class="optionItem" label="单兵编号:" prop="code">
            <el-input
              v-model="form.code"
              placeholder="请填写单兵编号"
            ></el-input>
          </el-form-item>
          <!-- 使用人员 -->
          <el-form-item class="optionItem" label="使用人员:" prop="user">
            <el-input
              v-model="form.user"
              placeholder="请填写使用人员"
            ></el-input>
          </el-form-item>
          <!-- 联系方式 -->
          <el-form-item class="optionItem" label="联系方式:" prop="phone">
            <el-input
              v-model="form.phone"
              placeholder="请填写联系方式"
            ></el-input>
          </el-form-item>
          <!-- 部门 -->
          <el-form-item class="optionItems" label="所属部门:" prop="departId">
            <el-select v-model="form.departId" placeholder="请输入所属部门">
              <el-option :value="mylabel">
                <el-tree
                  ref="tree"
                  :check-strictly="true"
                  :data="departList"
                  :props="defaultProps"
                  show-checkbox
                  @check-change="handleCheck"
                  default-expand-all
                  node-key="id"
                >
                </el-tree>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="optionBtn">
              <el-button
                type="primary"
                class="btn submit"
                @click.native.prevent="handleUpdateLawCar"
                >确认
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </main>
  </div>
</template>
  <script>
import { validatePhone, validateName } from "@/utils/validate";
export default {
  data() {
    const checkName = (rule, value, callback) => {
      if (value) {
        if (validateName(value)) {
          callback();
        } else {
          callback(new Error("请正确输入单兵名称"));
        }
      } else {
        callback(new Error("单兵名称不能为空"));
      }
    };
    const checkCode = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error("单兵编码不能为空"));
      }
    };
    const checkDepartId = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error("所属部门不能为空"));
      }
    };
    const checkUser = (rule, value, callback) => {
      if (value) {
        if (validateName(value)) {
          callback();
        } else {
          callback(new Error("请正确输入使用人员"));
        }
      } else {
        callback(new Error("使用人员不能为空"));
      }
    };
    const checkPhone = (rule, value, callback) => {
      if (value) {
        if (validatePhone(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的手机号"));
        }
      } else {
        callback(new Error("手机号码不能为空"));
      }
    };
    return {
      form: {
        carNumber: "",
        contact: "",
        ownerName: "",
        trajectory: "",
        vehicleUser: "",
        departName: "",
        departId: 0,
      },
      createRules: {
        departId: [
          {
            required: true,
            trigger: "blur",
            validator: checkDepartId,
          },
        ],
        name: [
          {
            required: true,
            trigger: "blur",
            validator: checkName,
          },
        ],
        code: [
          {
            required: true,
            trigger: "blur",
            validator: checkCode,
          },
        ],
        user: [
          {
            required: true,
            trigger: "blur",
            validator: checkUser,
          },
        ],
        phone: [
          {
            required: true,
            trigger: "blur",
            validator: checkPhone,
          },
        ],
        // id: 0,
        ownerName: [
          {
            required: true,
            trigger: "blur",
            validator: checkName,
          },
        ],
        // vehicleUser: [
        //     {
        //         required: true, trigger: 'blur', validator: checkUser
        //     }
        // ]
      },
      selectOrg: {
        orgsid: [],
      },
      mylabel: "",
      departList: [],
      defaultProps: {
        children: "children",
        label: "departName",
      },
    };
  },
  created() {
    const { getDepartTree } = this;
    // 初始化部门树
    getDepartTree();
    // 初始化数据
    this.form = JSON.parse(JSON.stringify(this.info));
    if (!this.form.departName) {
      this.form.departName = this.form.pdepartName;
    }
  },
  methods: {
    // 修改执法车
    handleUpdateLawCar() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          const { form } = this;
          this.$axios({
            method: "put",
            url: "sccg/car_Manage/modification_enforce",
            data: {
              ...form,
            },
          }).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "修改车辆成功",
              });
              this.$emit("closeDialog", { flag: false, index: 1 });
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    // 部门修改
    handleCheck(data, checked) {
      this.form.departId = data.id;
      this.form.departName = data.departName;
      // 获取当前选择的id在数组中的索引
      const indexs = this.selectOrg.orgsid.indexOf(data.id);
      // 如果不存在数组中，并且数组中已经有一个id并且checked为true的时候，代表不能再次选择。
      if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) {
        this.$message({
          message: "只能选择一个部门！",
          type: "warning",
          showClose: true,
        });
        // 设置已选择的节点为false 很重要
        this.$refs.tree.setChecked(data, false);
      } else if (this.selectOrg.orgsid.length === 0 && checked) {
        // 发现数组为空 并且是已选择
        // 防止数组有值，首先清空，再push
        this.selectOrg.orgsid = [];
        this.selectOrg.orgsid.push(data.id);
      } else if (
        indexs >= 0 &&
        this.selectOrg.orgsid.length === 1 &&
        !checked
      ) {
        // 再次直接进行赋值为空操作
        this.selectOrg.orgsid = [];
        this.form.departName = "";
      }
    },
    // 获取部门树
    getDepartTree() {
      this.$axios.get("/sccg/depart/tree").then((res) => {
        this.departList = res.data;
      });
    },
  },
  props: ["info", "closeDialog"],
};
</script>
  <style lang="scss" scoped>
.create {
  border-radius: 1px;
  background-color: #09152f;

  main {
    // border: 1px solid #fff;
    text-align: left;
    padding: 0 55px;
    background-color: #09152f;
    padding-bottom: 50px;

    .mainContent {
      display: flex;
      justify-content: center;
      padding-top: 50px;

      .el-form-item__content {
        width: 400px;

        .el-select {
          width: 100%;
        }
      }

      .optionHandleSp {
        display: flex;

        .areaNumber,
        .moreNumber {
          flex: 1;
        }

        .telNumber {
          flex: 2;
        }
      }

      .optionBtn {
        display: flex;
        margin-top: 20px;

        .btn {
          padding: 12px 50px;
        }
      }
    }
  }

  &::v-deep .el-textarea__inner {
    background-color: #09152f;
    border: 1px solid #17324c;
  }

  ::v-deep .el-form-item__label {
    color: #4b9bb7;
  }

  ::v-deep .el-input__inner {
    background-color: #09152f;
    border: 1px solid #17324c;
  }
}
</style>

 src/views/systemSetting/device/handheldTerminal/index.vue

New file
@@ -0,0 +1,291 @@
<template>
  <div class="list">
    <header>
      <div class="header-content">
        <div class="search">
          <span style="padding-right: 20px">筛选条件:</span>
          <el-select v-model="context" placeholder="筛选条件">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </header>
    <main>
      <div class="main-content">
        <div class="main-title">
          <el-button
            class="el-icon-plus"
            type="primary"
            @click="dialogCreate = true"
            >添加</el-button
          >
        </div>
        <!-- 数据展示 -->
        <el-table
          ref="multipleTable"
          :header-cell-style="{
            background: '#06122c',
            'font-size': '12px',
            color: '#4b9bb7',
            'font-weight': '650',
            'line-height': '45px',
          }"
          :data="list"
          style="width: 100%"
        >
          <el-table-column type="selection" min-width="5"> </el-table-column>
          <el-table-column prop="name" label="单兵名称" min-width="10">
          </el-table-column>
          <el-table-column prop="code" label="单兵编号" min-width="10">
          </el-table-column>
          <el-table-column prop="user" label="使用人员" min-width="10">
          </el-table-column>
          <el-table-column prop="phone" label="联系方式" min-width="10">
          </el-table-column>
          <el-table-column prop="pDepartName" label="所属部门" min-width="10">
          </el-table-column>
          <el-table-column prop="departName" label="所属大队" min-width="10">
          </el-table-column>

          <el-table-column
            prop="state"
            :formatter="formatSate"
            label="状态"
            min-width="5"
          >
          </el-table-column>

          <el-table-column prop="operation" label="操作" min-width="20">
            <template slot-scope="scope">
              <div class="btn">
                <span @click="handleEdit(scope.row)">编辑</span>
                <span class="line">|</span>
                <span @click="handleDelete(scope.row)">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </main>
    <footer>
      <!-- 添加音柱 -->
      <el-dialog
        title="添加音柱"
        :visible.sync="dialogCreate"
        width="60%"
        :before-close="handleClose"
      >
        <MyForm :info="loudspeakerInfo" :closeDialog="null"></MyForm>
      </el-dialog>
    </footer>
  </div>
</template>
  <script>
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("loudspeaker");
import MyForm from "./components/dialogForm.vue";

export default {
  components: {
    MyForm,
  },
  data() {
    return {
      dialogCreate: false,
      context: 0,
      options: [
        {
          value: null,
          label: "全部",
        },
        {
          value: 1,
          label: "在线",
        },
        {
          value: 0,
          label: "离线",
        },
      ],
      list: [],
      current: 1,
      size: 10,
      loudspeakerInfo: {
        id: 0,
        name: "",
        code: "",
        power: "",
        frequencyResponse: "",
        fullRangeSpeaker: "",
      },
    };
  },
  created() {
    this.setTableData();
  },
  methods: {
    ...mapActions([
      "getLoudspeakerList",
      "saveLoudspeaker",
      "updateLoudspeaker",
    ]),
    formatSate(row, column) {
      return row.state == 1 ? "在线" : "离线";
    },
    // 弹窗关闭
    handleClose(done) {
      this.$confirm("确认关闭?").then((_) => {
        done();
      });
    },
    // 设置tableData
    setTableData() {
      const { current, size, context } = this;
      let arr = this.getLoudspeakerList({
        current,
        size,
      }).then((res) => {
        this.list = arr.data.data;
      });
    },
  },
};
</script>
  <style lang="scss" scoped>
.list {
  text-align: left;
  margin: 10px 20px;
  color: #4b9bb7;

  header {
    background-color: #09152f;
    border: 1pox solid #fff;

    .header-content {
      padding: 0 40px;
      display: flex;
      line-height: 100px;
      justify-content: space-between;
      align-items: center;

      .search {
        display: flex;
        justify-content: flex-start;

        span {
          flex: 1;
        }

        .el-input {
          flex: 2;
          color: #1d3f57;

          &::v-deep .el-input__inner {
            background-color: #09152f;
            border: 1px solid #17324c;
          }
        }
      }
    }
  }

  main {
    background-color: #09152f;
    margin-top: 20px;
    padding-bottom: 50px;
    border: 1pox solid #fff;

    .main-title {
      line-height: 60px;
      padding: 10px 20px;
    }

    .tools {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;

      .funs {
        display: flex;

        .funsItem {
          line-height: 28px;
          display: flex;
          align-items: center;
          border: 1px solid #17324c;
          border-radius: 4px;
          font-size: 12px;
          margin-left: 10px;

          .el-checkbox {
            width: 80px;
            padding: 0 10px;
          }

          .el-select {
            width: 120px;
          }

          &::v-deep .el-input__inner {
            border: none;
            background-color: #09152f;
          }

          &:hover {
            border: 1px solid #4b9bb7;
          }

          &:hover .el-checkbox {
            color: #4b9bb7;
          }
        }
      }

      .pagination {
        margin-top: 50px;
        display: flex;
        line-height: 50px;
        justify-content: center;

        .el-pagination {
          &::v-deep li,
          &::v-deep .btn-prev,
          &::v-deep .btn-next {
            background-color: #071f39;
            color: #4b9bb7;
          }

          &::v-deep .active {
            background-color: #409eff;
            color: #fff;
          }
        }
      }
    }

    .el-table {
      color: #4b9bb7;
      font-size: 10px;

      .operation {
        display: flex;

        .line {
          padding: 0 5px;
        }

        span:hover {
          cursor: pointer;
        }
      }
    }
  }
}
</style>

 src/views/systemSetting/device/loudspeaker/components/dialogForm.vue

New file
@@ -0,0 +1,256 @@
<template>
  <div class="create">
    <main>
      <div class="mainContent">
        <el-form
          ref="formRef"
          label-width="140px"
          :rules="createCarRules"
          autoComplete="on"
          :model="form"
          label-position="right"
        >
          <!-- 音柱名称 -->
          <el-form-item class="optionItem" label="音柱名称:" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请填写音柱名称"
            ></el-input>
          </el-form-item>
          <!-- 音柱编号 -->
          <el-form-item class="optionItem" label="音柱编号:" prop="code">
            <el-input
              v-model="form.code"
              placeholder="请填写音柱编号"
            ></el-input>
          </el-form-item>
          <!-- 额度功率 -->
          <el-form-item class="optionItem" label="额度功率:" prop="power">
            <el-input
              v-model="form.power"
              placeholder="请填写额度功率"
            ></el-input>
          </el-form-item>
          <!-- 频率响应 -->
          <el-form-item
            class="optionItem"
            label="频率响应:"
            prop="frequencyResponse"
          >
            <el-input
              v-model="form.frequencyResponse"
              placeholder="请填写频率响应"
            ></el-input>
          </el-form-item>
          <!-- 喇叭单元 -->
          <el-form-item
            class="optionItem"
            label="喇叭单元:"
            prop="fullRangeSpeaker"
          >
            <el-input
              v-model="form.fullRangeSpeaker"
              placeholder="请填写 喇叭单元"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <div class="optionBtn">
              <el-button
                type="primary"
                class="btn submit"
                @click.native.prevent="handleUpdateLawCar"
                >确认
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </main>
  </div>
</template>
  <script>
export default {
  data() {
    const checkName = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error("音柱名称不能为空"));
      }
    };
    const checkCode = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error("音柱编码不能为空"));
      }
    };
    return {
      form: {
        id: 0,
        name: "",
        code: "",
        power: "",
        frequencyResponse: "",
        fullRangeSpeaker: "",
      },
      createCarRules: {
        name: [
          {
            required: true,
            trigger: "blur",
            validator: checkName,
          },
        ],
        code: [
          {
            required: true,
            trigger: "blur",
            validator: checkCode,
          },
        ],
      },
    };
  },
  created() {
    // 初始化数据
    
    this.form = JSON.parse(JSON.stringify(this.info));
  },
  methods: {
    // 修改执法车
    handleUpdateLawCar() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          const { form } = this;
          this.$axios({
            method: "put",
            url: "sccg/car_Manage/modification_enforce",
            data: {
              ...form,
            },
          }).then((res) => {
            console.log(res);
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "修改车辆成功",
              });
              this.$emit("closeDialog", { flag: false, index: 1 });
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    // 部门修改
    handleCheck(data, checked) {
      console.log(data);
      this.form.departId = data.id;
      this.form.departName = data.departName;
      // 获取当前选择的id在数组中的索引
      const indexs = this.selectOrg.orgsid.indexOf(data.id);
      // 如果不存在数组中，并且数组中已经有一个id并且checked为true的时候，代表不能再次选择。
      if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) {
        this.$message({
          message: "只能选择一个部门！",
          type: "warning",
          showClose: true,
        });
        // 设置已选择的节点为false 很重要
        this.$refs.tree.setChecked(data, false);
      } else if (this.selectOrg.orgsid.length === 0 && checked) {
        // 发现数组为空 并且是已选择
        // 防止数组有值，首先清空，再push
        this.selectOrg.orgsid = [];
        this.selectOrg.orgsid.push(data.id);
      } else if (
        indexs >= 0 &&
        this.selectOrg.orgsid.length === 1 &&
        !checked
      ) {
        // 再次直接进行赋值为空操作
        this.selectOrg.orgsid = [];
        this.form.departName = "";
      }
    },
    // 获取部门树
    getDepartTree() {
      this.$axios.get("/sccg/depart/tree").then((res) => {
        this.departList = res.data;
      });
    },
  },
  props: ["info", "closeDialog"],
};
</script>
  <style lang="scss" scoped>
.create {
  border-radius: 1px;
  background-color: #09152f;

  main {
    // border: 1px solid #fff;
    text-align: left;
    padding: 0 55px;
    background-color: #09152f;
    padding-bottom: 50px;

    .mainContent {
      display: flex;
      justify-content: center;
      padding-top: 50px;

      .el-form-item__content {
        width: 400px;

        .el-select {
          width: 100%;
        }
      }

      .optionHandleSp {
        display: flex;

        .areaNumber,
        .moreNumber {
          flex: 1;
        }

        .telNumber {
          flex: 2;
        }
      }

      .optionBtn {
        display: flex;
        margin-top: 20px;

        .btn {
          padding: 12px 50px;
        }
      }
    }
  }

  &::v-deep .el-textarea__inner {
    background-color: #09152f;
    border: 1px solid #17324c;
  }

  ::v-deep .el-form-item__label {
    color: #4b9bb7;
  }

  ::v-deep .el-input__inner {
    background-color: #09152f;
    border: 1px solid #17324c;
  }
}
</style>

 src/views/systemSetting/device/loudspeaker/index.vue

New file
@@ -0,0 +1,295 @@
<template>
  <div class="list">
    <header>
      <div class="header-content">
        <div class="search">
          <span style="padding-right: 20px">筛选条件:</span>
          <el-select v-model="context" placeholder="筛选条件">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </header>
    <main>
      <div class="main-content">
        <div class="main-title">
          <el-button
            class="el-icon-plus"
            type="primary"
            @click="dialogCreate = true"
            >添加</el-button
          >
        </div>
        <!-- 数据展示 -->
        <el-table
          ref="multipleTable"
          :header-cell-style="{
            background: '#06122c',
            'font-size': '12px',
            color: '#4b9bb7',
            'font-weight': '650',
            'line-height': '45px',
          }"
          :data="list"
          style="width: 100%"
        >
          <el-table-column type="selection" min-width="5"> </el-table-column>
          <el-table-column prop="name" label="音柱名称" min-width="10">
          </el-table-column>
          <el-table-column prop="code" label="音柱编号" min-width="10">
          </el-table-column>
          <el-table-column prop="power" label="额定功率" min-width="10">
          </el-table-column>
          <el-table-column
            prop="frequencyResponse"
            label="频率响应"
            min-width="10"
          >
          </el-table-column>
          <el-table-column
            prop="fullRangeSpeaker"
            label="喇叭单元"
            min-width="10"
          >
          </el-table-column>
          <el-table-column
            prop="state"
            :formatter="formatSate"
            label="状态"
            min-width="5"
          >
          </el-table-column>
          <el-table-column prop="operation" label="操作" min-width="20">
            <template slot-scope="scope">
              <div class="btn">
                <span @click="handleEdit(scope.row)">编辑</span>
                <span class="line">|</span>
                <span @click="handleDelete(scope.row)">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </main>
    <footer>
      <!-- 添加音柱 -->
      <el-dialog
        title="添加音柱"
        :visible.sync="dialogCreate"
        width="60%"
        :before-close="handleClose"
      >
        <MyForm :info="loudspeakerInfo" :closeDialog="null"></MyForm>
      </el-dialog>
    </footer>
  </div>
</template>
  <script>
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("loudspeaker");
import MyForm from "./components/dialogForm.vue";

export default {
  components: {
    MyForm,
  },
  data() {
    return {
      dialogCreate: false,
      context: 0,
      options: [
        {
          value: null,
          label: "全部",
        },
        {
          value: 1,
          label: "在线",
        },
        {
          value: 0,
          label: "离线",
        },
      ],
      list: [],
      current: 1,
      size: 10,
      loudspeakerInfo: {
        id: 0,
        name: "",
        code: "",
        power: "",
        frequencyResponse: "",
        fullRangeSpeaker: "",
      },
    };
  },
  created() {
    this.setTableData();
  },
  methods: {
    ...mapActions([
      "getLoudspeakerList",
      "saveLoudspeaker",
      "updateLoudspeaker",
    ]),
    formatSate(row, column) {
      return row.state == 1 ? "在线" : "离线";
    },
    // 弹窗关闭
    handleClose(done) {
      this.$confirm("确认关闭?").then((_) => {
        done();
      });
    },
    // 设置tableData
    setTableData() {
      const { current, size, context } = this;
      let arr = this.getLoudspeakerList({
        current,
        size,
      }).then((res) => {
        this.list = arr.data.data;
      });
    },
  },
};
</script>
  <style lang="scss" scoped>
.list {
  text-align: left;
  margin: 10px 20px;
  color: #4b9bb7;

  header {
    background-color: #09152f;
    border: 1pox solid #fff;

    .header-content {
      padding: 0 40px;
      display: flex;
      line-height: 100px;
      justify-content: space-between;
      align-items: center;

      .search {
        display: flex;
        justify-content: flex-start;

        span {
          flex: 1;
        }

        .el-input {
          flex: 2;
          color: #1d3f57;

          &::v-deep .el-input__inner {
            background-color: #09152f;
            border: 1px solid #17324c;
          }
        }
      }
    }
  }

  main {
    background-color: #09152f;
    margin-top: 20px;
    padding-bottom: 50px;
    border: 1pox solid #fff;

    .main-title {
      line-height: 60px;
      padding: 10px 20px;
    }

    .tools {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;

      .funs {
        display: flex;

        .funsItem {
          line-height: 28px;
          display: flex;
          align-items: center;
          border: 1px solid #17324c;
          border-radius: 4px;
          font-size: 12px;
          margin-left: 10px;

          .el-checkbox {
            width: 80px;
            padding: 0 10px;
          }

          .el-select {
            width: 120px;
          }

          &::v-deep .el-input__inner {
            border: none;
            background-color: #09152f;
          }

          &:hover {
            border: 1px solid #4b9bb7;
          }

          &:hover .el-checkbox {
            color: #4b9bb7;
          }
        }
      }

      .pagination {
        margin-top: 50px;
        display: flex;
        line-height: 50px;
        justify-content: center;

        .el-pagination {
          &::v-deep li,
          &::v-deep .btn-prev,
          &::v-deep .btn-next {
            background-color: #071f39;
            color: #4b9bb7;
          }

          &::v-deep .active {
            background-color: #409eff;
            color: #fff;
          }
        }
      }
    }

    .el-table {
      color: #4b9bb7;
      font-size: 10px;

      .operation {
        display: flex;

        .line {
          padding: 0 5px;
        }

        span:hover {
          cursor: pointer;
        }
      }
    }
  }
}
</style>