factory_web/src/views/am/audio.vue

151 lines
4.2 KiB
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="150"
></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="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"
:channelType="50"
:channelCode="channelCode"
:channelName="channelName"
@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,
},
channelCode: "",
channelName: "",
};
},
methods: {
handlePosition(row) {
this.channelCode = row.sn;
this.channelName = row.name;
this.dialogSave = true;
},
//表格选择后回调事件
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.vchannelSync.req({});
this.syncLoading = false;
},
},
};
</script>