| | |
| | | <template> |
| | | <div class="monitor-obj-wrapper"> |
| | | <el-affix v-if="affix" :offset="60" target=".monitor-obj-wrapper"> |
| | | <div> |
| | | <el-segmented :model-value="activeName" :options="activeTabs" @change="tabChange" /> |
| | | <el-segmented |
| | | :model-value="activeName" |
| | | :options="activeTabs" |
| | | @change="tabChange" |
| | | /> |
| | | </div> |
| | | </el-affix> |
| | | <div v-else> |
| | | <el-segmented |
| | | :model-value="activeName" |
| | | :options="activeTabs" |
| | | @change="tabChange" |
| | | /> |
| | | </div> |
| | | <el-scrollbar :height="height"> |
| | | <el-space wrap> |
| | | <ItemMonitorObj v-for="obj in activeData" :key="obj.movid" :item="obj"> |
| | | <template #default="{ item }"> |
| | | <!-- <slot :item="item"></slot> --> |
| | | <el-button v-if="showBtn" size="small" type="danger" @click="itemClick(item)">{{ |
| | | btnName |
| | | }}</el-button> |
| | | <slot :item="item"> |
| | | <el-button |
| | | v-if="showBtn" |
| | | size="small" |
| | | plain |
| | | :type="btnType" |
| | | @click="itemClick(item)" |
| | | >{{ btnName }}</el-button |
| | | > |
| | | </slot> |
| | | </template> |
| | | </ItemMonitorObj> |
| | | </el-space> |
| | | </el-scrollbar> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | btnName: { |
| | | type: String, |
| | | default: '移除' |
| | | } |
| | | }, |
| | | btnType: { |
| | | type: String, |
| | | default: 'danger' |
| | | }, |
| | | // 头部选项是否吸顶 |
| | | affix: Boolean, |
| | | height: String |
| | | }, |
| | | emits: ['update:tabName', 'update:showData', 'itemClick'], |
| | | data() { |
| | |
| | | computed: { |
| | | activeData() { |
| | | const list = this.data.filter((v) => { |
| | | return this.activeName == defaultTabName || v.sceneType == this.activeName; |
| | | return ( |
| | | this.activeName == defaultTabName || v.sceneType == this.activeName |
| | | ); |
| | | // return this.tabName == defaultTabName || v.sceneType == this.tabName; |
| | | }); |
| | | this.$emit('update:showData', list); |