<template>
|
<div class="app-container">
|
<el-row style="margin-top:20px">
|
<el-col :span="17" style="height: 45px;text-align: left;">
|
<span style="margin-left:50px">电台名称:</span>
|
<el-input
|
v-model="filterValue"
|
placeholder="请输入电台名称"
|
style="width: 170px; margin-left: 20px"
|
size="mini"
|
>
|
</el-input>
|
|
<el-button
|
type="primary"
|
icon="el-icon-search"
|
size="mini"
|
@click="handleSearch"
|
style="margin-left: 20px"
|
>查询</el-button
|
>
|
<el-button
|
type="info"
|
icon="el-icon-delete"
|
size="mini"
|
@click="handleClear"
|
>清空查询</el-button
|
>
|
</el-col>
|
<el-col :span="3">
|
<el-button
|
type="danger"
|
plain
|
icon="el-icon-delete"
|
size="mini"
|
@click="deleteData"
|
>批量删除</el-button
|
>
|
</el-col>
|
<el-col :span="4" class="dropActions">
|
<drop-down :dropOption="dropOptions" @handleAct="dropActions">
|
</drop-down>
|
</el-col>
|
<el-col :span="24" class="Device">
|
<el-table
|
:data="tableData"
|
:height="tableH"
|
v-loading="loading"
|
stripe
|
size="small"
|
@selection-change="handleSelectionChange"
|
:key="key"
|
>
|
<el-table-column type="selection" width="35"> </el-table-column>
|
<el-table-column fixed prop="name" label="电台" width="300">
|
</el-table-column>
|
<el-table-column prop="frequency" label="频率" width="80">
|
</el-table-column>
|
<el-table-column prop="area" label="地区" width="80">
|
</el-table-column>
|
<el-table-column label="运行时段">
|
<template slot-scope="scope">
|
<span v-for="(time, i) in scope.row.runtime" :key="i">
|
<el-tag v-if="time.length > 0" size="small">
|
{{ PraseWeekday(i) }}
|
<el-tag type="warning" size="mini">{{
|
PraseHour(time)
|
}}</el-tag>
|
</el-tag>
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column fixed="right" label="操作" width="60">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click="edit(scope.$index)"
|
>编辑</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-col>
|
<el-col :span="3"></el-col>
|
<!--编辑-->
|
<white-list-edit
|
ref="edit"
|
:data="tableData[selectd_index]"
|
@save="getData"
|
>
|
</white-list-edit>
|
</el-row>
|
</div>
|
</template>
|
<script>
|
import Search from "@/components/searchs/Search.vue";
|
import DropDown from "@/components/dropdowns/DropDown.vue";
|
import WhiteListEdit from "./components/WhiteListEdit.vue";
|
import WhiteListOfTask from "./components/WhiteListOfTask";
|
import filterOptions from "@/utils/filterOptions.js";
|
|
export default {
|
components: {
|
Search,
|
WhiteListEdit,
|
DropDown,
|
WhiteListOfTask,
|
},
|
|
data() {
|
return {
|
filterValue: "",
|
key: false,
|
allData: [],
|
tableData: [],
|
tableH: null,
|
otherAct: [{ item: "编辑", id: "", type: "text" }],
|
dropOptions: [{ item: "新增电台白名单", id: 1 }],
|
filter: filterOptions.WhiteList,
|
queryParams: {
|
page: 1,
|
size: 10,
|
},
|
loading: false,
|
selectdList: [],
|
selectd_index: "",
|
whiteListVisible: false,
|
whitelist: null,
|
};
|
},
|
mounted() {
|
this.tableH = window.innerHeight - 125 + "px";
|
this.getData();
|
},
|
methods: {
|
handleClear() {
|
this.filterValue = "";
|
this.getData();
|
},
|
handleSearch() {
|
let tmpData = [];
|
this.allData.forEach((item) => {
|
if (item.name == this.filterValue) {
|
tmpData.push(item);
|
}
|
});
|
this.tableData = tmpData;
|
this.tableData.forEach((item) => {
|
item.runtime = JSON.parse(item.runtime);
|
});
|
this.key = !this.key;
|
},
|
handleSelectionChange(a) {
|
let ids = [];
|
for (let i = 0; i < a.length; i++) {
|
const element = a[i];
|
ids.push(element.id);
|
}
|
this.selectdList = ids;
|
},
|
parseFreqRange(range) {
|
if (range.length == 1) {
|
return `${range[0]}`;
|
} else {
|
return `${range[0]}-${range[1]}`;
|
}
|
},
|
deleteData() {
|
if (this.selectdList && this.selectdList.length > 0) {
|
this.$confirm(
|
`${this.selectdList.length}条白名单将被删除,是否继续?`,
|
"提示",
|
{
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}
|
)
|
.then(() => {
|
this.$getJSON(window.backstageURL +
|
"dataservice/getNoTokenData",
|
{
|
bid: "delete_white_freq",
|
ids: JSON.stringify(this.selectdList),
|
}
|
).then((res) => {
|
this.getData();
|
this.$message.success("删除成功");
|
});
|
})
|
.catch(() => {});
|
} else {
|
this.$message.error("尚未选择!");
|
}
|
},
|
showWhiteList(data) {
|
this.whitelist = data;
|
this.whiteListVisible = true;
|
},
|
handlePageChange(params) {
|
this.queryParams.page = params.page;
|
this.queryParams.size = params.size;
|
this.getData();
|
},
|
handleTotal(data) {},
|
getData() {
|
this.loading = true;
|
this.tableData = [];
|
this.$getJSON(window.backstageURL +
|
"dataservice/getNoTokenData?bid=getWhiteFreqs"
|
).then((res) => {
|
this.allData = JSON.parse(JSON.stringify(res.data.data));
|
this.tableData = JSON.parse(JSON.stringify(this.allData));
|
|
this.tableData.forEach((item) => {
|
if (item.runtime) {
|
item.runtime = JSON.parse(item.runtime);
|
}
|
else{
|
item.runtime = null
|
}
|
});
|
this.key = !this.key;
|
this.loading = false;
|
});
|
},
|
SearchFilter(filter) {
|
this.queryParams.options = filter;
|
this.queryParams.page = 1;
|
this.getData();
|
},
|
dropActions(command) {
|
switch (command.id) {
|
case 1: //新增
|
(this.selectd_index = ""), this.$refs["edit"].show();
|
break;
|
}
|
},
|
edit(index) {
|
this.selectd_index = index;
|
this.$refs["edit"].show();
|
},
|
PraseWeekday(i) {
|
switch (i * 1) {
|
case 1:
|
return "周一";
|
case 2:
|
return "周二";
|
case 3:
|
return "周三";
|
case 4:
|
return "周四";
|
case 5:
|
return "周五";
|
case 6:
|
return "周六";
|
case 7:
|
return "周日";
|
}
|
},
|
PraseHour(array) {
|
let result = "";
|
for (let i = 0; i < array.length; i++) {
|
const element = array[i];
|
if (i == 0) {
|
result += element;
|
} else if (i == array.length - 1) {
|
result += `~${element}`;
|
} else if (element + 1 < array[i + 1]) {
|
result += `~${element} ${element}`;
|
}
|
}
|
return result;
|
},
|
updata(data) {
|
for (var key in data) {
|
this.data[this.selectd_index][key] = data[key];
|
}
|
},
|
},
|
};
|
</script>
|
<style lang="scss">
|
|
</style>
|
