Commit 7ea960c9 authored by 朱松文's avatar 朱松文

切换选择组件

parent f5abc10d
...@@ -3,7 +3,7 @@ import App from "./App.vue"; ...@@ -3,7 +3,7 @@ import App from "./App.vue";
import router from "./router"; import router from "./router";
import store from "./store"; import store from "./store";
import "@/utils/rem"; import "@/utils/rem";
import { Message, Table, TableColumn, Button, Dialog, Form, FormItem, Input, InputNumber, Pagination, Loading, DatePicker, Empty, Tooltip, Select, Option, OptionGroup } from 'element-ui'; import { Message, Table, TableColumn, Button, Dialog, Form, FormItem, Input, InputNumber, Pagination, Loading, DatePicker, Empty, Tooltip, Select, Option, OptionGroup, Cascader } from 'element-ui';
Vue.config.productionTip = false; Vue.config.productionTip = false;
...@@ -23,6 +23,7 @@ Vue.use(Tooltip) ...@@ -23,6 +23,7 @@ Vue.use(Tooltip)
Vue.use(Select) Vue.use(Select)
Vue.use(Option) Vue.use(Option)
Vue.use(OptionGroup) Vue.use(OptionGroup)
Vue.use(Cascader)
Vue.prototype.$loading = Loading.service; Vue.prototype.$loading = Loading.service;
Vue.prototype.$message = Message; Vue.prototype.$message = Message;
......
...@@ -57,16 +57,14 @@ ...@@ -57,16 +57,14 @@
<div class="row"> <div class="row">
<div class="col-label">摄像头:</div> <div class="col-label">摄像头:</div>
<div> <div>
<el-select v-model="queryData.cameraList" filterable multiple placeholder="请选择"> <el-cascader
<el-option-group v-for="group in cameraGroup" :key="group.label" :label="group.label"> :options="cameraGroup"
<el-option :props="{ multiple: true }"
v-for="item in group.options" filterable
:key="item.cameraId" collapse-tags
:label="item.cameraName" clearable
:value="item.cameraId" @change="cameraChange"
></el-option> ></el-cascader>
</el-option-group>
</el-select>
</div> </div>
</div> </div>
<div class="btn-container"> <div class="btn-container">
...@@ -194,10 +192,20 @@ export default class AiSearch extends BaseVue { ...@@ -194,10 +192,20 @@ export default class AiSearch extends BaseVue {
this.query(); this.query();
const data = await getCameraDogFormate({}); const data = await getCameraDogFormate({});
if (data) { if (data) {
const ar = [];
Object.keys(data).forEach((key) => { Object.keys(data).forEach((key) => {
this.cameraGroup.push({ label: key, options: [...data[key]] }); ar.push({
value: key,
label: key,
children: data[key].map((d) => ({
label: d.cameraName,
value: d.cameraId,
})),
});
}); });
this.cameraGroup = ar;
} }
console.log("aaaa", this.cameraGroup);
} }
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
...@@ -210,7 +218,7 @@ export default class AiSearch extends BaseVue { ...@@ -210,7 +218,7 @@ export default class AiSearch extends BaseVue {
...this.queryData, ...this.queryData,
}); });
this.dogs = rp.data.records; this.dogs = rp.data?.records || [];
this.total = rp.data.total; this.total = rp.data.total;
} }
handleQuery() { handleQuery() {
...@@ -246,6 +254,16 @@ export default class AiSearch extends BaseVue { ...@@ -246,6 +254,16 @@ export default class AiSearch extends BaseVue {
this.showVideo = false; this.showVideo = false;
this.myVideo.player.pause(); this.myVideo.player.pause();
} }
cameraChange(data: any) {
if (data.length == 0) {
this.queryData.cameraList = [];
return;
}
data.forEach((item) => {
this.queryData.cameraList.push(item[1]);
});
console.log("cameraChange", this.queryData);
}
} }
</script> </script>
...@@ -425,13 +443,25 @@ export default class AiSearch extends BaseVue { ...@@ -425,13 +443,25 @@ export default class AiSearch extends BaseVue {
.el-table--group { .el-table--group {
border: $border-color; border: $border-color;
} }
} .el-date-editor.el-input,
.el-date-editor.el-input, .el-date-editor.el-input__inner {
.el-date-editor.el-input__inner { width: 100%;
width: 100%; }
} .el-select {
.el-select { width: 100%;
width: 100%; }
.el-cascader {
width: 100%;
}
.el-cascader__search-input {
color: #fff;
background-color: $item-background-color;
}
.el-tag.el-tag--info {
background-color: $item-background-color;
border-color: #e9e9eb;
color: #fff;
}
} }
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment