factory_web/src/views/am/audio.vue

<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button type="primary" icon="el-icon-refresh" @click="syncData" :syncLoading="syncLoading">同步</el-button>
      </div>
      <div class="right-panel">
        <!-- <el-input
          v-model="query.code"
          placeholder="编号"
          clearable
          @click="handleQuery"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
        ></el-button> -->
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable ref="table" :apiObj="apiObj" :pageStr="pageStr" :pageSizeStr="pageSizeStr" :parseData="parseData"
        row-key="id" @selection-change="selectionChange" stripe @resetQuery="resetQuery">
        <!-- <el-table-column type="selection" width="50"></el-table-column> -->
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column label="喇叭名称" prop="name" min-width="120"></el-table-column>
        <el-table-column label="音量" prop="extra" min-width="40">
          <template #default="scope">
            <span v-if="scope.row.extra && scope.row.extra.player">{{
                scope.row.extra.player.EnvVolume
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="sn" prop="extra" min-width="90">
          <template #default="scope">
            <span v-if="scope.row.extra">{{ scope.row.extra.config.sn }}</span>
          </template>
        </el-table-column>
        <el-table-column label="ip" prop="extra" min-width="90">
          <template #default="scope">
            <span v-if="scope.row.extra">{{ scope.row.extra.ip }}</span>
          </template>
        </el-table-column>
        <el-table-column label="在线状态" prop="extra" min-width="40">
          <template #default="scope">
            <span v-if="scope.row.extra">
              <el-tag v-if="scope.row.extra.online">在线</el-tag>
              <el-tag v-else type="danger">离线</el-tag>
            </span>
          </template>
        </el-table-column>
        <!--<el-table-column label="位置" prop="count_people" min-width="90"></el-table-column>-->
        <el-table-column label="所在区域" prop="my_info.area_name" min-width="100"></el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="180">
          <template #default="scope">
            <el-button-group>
              <el-button text type="primary" size="small" @click="handlePosition(scope.row)">标记位置</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <channel-view v-if="dialogSave" ref="saveDialog" :channelId="channelId" :channelName="channelName" :channelArea="channelArea" :channelAreas="channelAreas"
    :channelLocation="channelLocation" @closed="dialogSave = false"></channel-view>
</template>
<script>
import channelView from "./vchannel_view";
export default {
  name: "audioVue",
  components: {
    channelView,
  },
  data() {
    return {
      syncLoading: false,
      apiObj: this.$API.am.tdevice.speaker,
      pageStr: "page",
      pageSizeStr: "pageSize",
      parseData: (res) => {
        return {
          data: res, //分析无分页的数据字段结构
          rows: res.rows, //分析行数据字段结构
          total: res.total, //分析总数字段结构
        };
      },
      dialogSave: false,
      limitedVisible: false,
      query: {},
      selection: [],
      search: {
        keyword: null,
      },
      channelId: "",
      channelCode: "",
      channelName: "",
      channelArea: '',
      channelAreas: [],
    };
  },
  methods: {
    handlePosition(row) {
      debugger;
      console.log(row)
      if(row.my_info.id&&row.my_info.id!==null){
        this.channelId = row.my_info.id ? row.my_info.id : null;
        this.channelArea = row.my_info.area ? row.my_info.area : '';
        this.channelAreas = row.my_info.areas ? row.my_info.areas : [];
        this.channelLocation = row.my_info.location ? row.my_info.location : {};
        this.channelName = row.name;
        this.dialogSave = true;
      }else{
        this.$message.error("请先完成设备同步");
      }
    },
    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection;
    },

    //搜索
    handleQuery() {
      this.$refs.table.refresh();
    },

    resetQuery() {
      this.query = {};
    },
    async syncData() {
      this.syncLoading = true;
      var res = await this.$API.third.tdevice.speakerSync.req({});
      this.$refs.table.refresh();
      this.syncLoading = false;
    },
  },
};
</script>