123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199 |
- <template>
- <div id="cascader-group">
- <el-row :gutter="20">
- <el-col :span="12">
- <p>源端设备类:</p>
- <el-select
- v-model="value"
- placeholder="请选择"
- :props="props"
- multiple
- disabled
- >
- <el-option
- v-for="item in oraginOption"
- :key="item.code"
- :label="item.facility"
- :value="item.code"
- disabled
- />
- </el-select>
- </el-col>
- <el-col :span="12">
- <p>末端设备类:</p>
- <el-select
- v-model="endValue"
- placeholder="请选择"
- :props="props"
- >
- <el-option
- v-for="item in endOptions"
- :key="item.code"
- :label="item.facility"
- :value="item.code"
- disabled
- />
- </el-select>
- </el-col>
- </el-row>
- </div>
- </template>
- <script>
- import { mapGetters } from 'vuex';
- import { getEquipBelongs } from "@/api/scan/request";
- import { queryEquip } from "@/api/object/equip"
- import { sourceQuery } from "@/api/relation/api";
- export default {
- name: "getCascader",
- props: {
- all: {
- type: Boolean,
- default: false,
- },
- RelationTypeName: {
- type: String
- },
- number: {
- type: Number
- }
- },
- computed: {
- ...mapGetters("layout", ["projectId"])
- },
- data() {
- return {
- value: "",
- endValue: '',
- options: [],
- oraginOption: [],
- endOptions: [],
- props: {
- value: "code",
- label: "facility"
- },
- falg: true,
- content: [],
- };
- },
- created() {
- this.getData();
- },
- watch: {
- projectId() {
- this.value = '';
- this.getData();
- },
- RelationTypeName() {
- this.getData();
- },
- number() {
- this.getData();
- }
- },
- methods: {
- setValue(val) {
- this.value = val
- },
- //修改val
- changeVal(val) {
- this.endOptions = this.options.filter(i => !val.includes(i.code))
- this.$emit("change", val)
- },
- //获取当前项目下的设备类型(只拿到编码-需要过滤)
- getData() {
- let param2 = {
- distinct: true,
- pageNumber: 1,
- pageSize: 500,
- projection: ["classCode"]
- }
- let param1 = {
- data: {
- distinct: true,
- orders: "equipName asc",
- pageNumber: 1,
- pageSize: 500,
- projection: [
- "equipCode", "equipName"
- ]
- }
- }
- let param3 = {
- // Filters: `ProjectId='${this.projectId}';CalcName='${this.RelationTypeName}'`
- calcName: this.RelationTypeName
- }
- let promise2 = new Promise((resolve, reject) => {
- queryEquip(param2, res => {
- resolve(res)
- })
- })
- let promise1 = new Promise((resolve, reject) => {
- getEquipBelongs(param1, res => {
- resolve(res)
- })
- })
- let promise3 = new Promise((resolve, reject) => { //回显
- sourceQuery(param3, res => {
- resolve(res)
- })
- })
- Promise.all([promise1, promise2, promise3]).then((res) => {
- let allData = res[0], data = res[1], arr = res[2].content
- this.options = this.formatOptions(allData.content)
- if (!this.all) {
- this.content = data.content.map(t => {
- return t.classCode
- });
- this.filterForOptions();
- }
- if (this.value) {
- this.changeVal(this.value)
- }
- if (arr) {
- this.value = []
- arr.forEach(({ sourceType }) => this.value.push(sourceType))
- this.oraginOption = this.options.filter(i => this.value.includes(i.code))
- this.endOptions = this.options.filter(i => !this.value.includes(i.code))
- }
- })
- },
- //格式化options数据
- formatOptions(arr) {
- let data = [];
- arr.map(t => {
- let temp = {};
- temp.code = t.equipCode;
- temp.facility = t.equipName;
- data.push(temp)
- })
- return data;
- },
- //过滤
- filterForOptions() {
- this.options = this.options.filter(item => {
- if (this.content.indexOf(item.code) > -1) {
- return item
- }
- })
- }
- }
- };
- </script>
- <style lang="less" scoped>
- #cascader-group {
- /*float: left;*/
- /*margin-left: 10px;*/
- /*display: inline-block;*/
- .buildFloor {
- color: #999999;
- font-size: 14px;
- }
- }
- </style>
|