123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270 |
- <template>
- <div class="relation">
- <div class="header">
- <el-button class="el-icon-back" @click="goBack"></el-button>
- <el-button type="primary" @click="addRelation">添加关系</el-button>
- <el-button style="float: right" @click="updataExecl">上传Excel</el-button>
- </div>
- <el-row class="content">
- <el-col :span="12" class="object">
- <p>主对象</p>
- <span v-if="relTypeStatus == 1 || relTypeStatus == 3">类型:</span>
- <el-select
- :clearable="true"
- v-if="relTypeStatus == 1 || relTypeStatus == 3"
- v-model="categoryFrom"
- placeholder="请选择"
- @change="mainSelect"
- style="margin-right: 10px"
- >
- <el-option
- v-for="item in mainOptions"
- :key="item.classCode"
- :label="item.className"
- :value="item.classCode"
- >
- </el-option>
- </el-select>
- <AdmSearch @SearchValue="mainSerch" />
- </el-col>
- <el-col :span="12" class="object">
- <p>从对象</p>
- <span v-if="relTypeStatus == 2 || relTypeStatus == 3">类型:</span>
- <el-select
- v-if="relTypeStatus == 2 || relTypeStatus == 3"
- v-model="categoryTo"
- :clearable="true"
- placeholder="请选择"
- style="margin-right: 10px"
- >
- <el-option
- v-for="item in minorOptions"
- :key="item.classCode"
- :label="item.className"
- :value="item.classCode"
- >
- </el-option>
- </el-select>
- <AdmSearch @SearchValue="minorSearch" />
- </el-col>
- </el-row>
- <relationTable :tableHeader="tableHeader" :tableData="tableData" />
- <addRelationDialog
- @closeAddRelation="addRelationValue = false"
- :addRelationValue="addRelationValue"
- :values="values"
- />
- <excelDialog :values="values" ref="excelDialog"></excelDialog>
- <editRelationDialog :values="values"></editRelationDialog>
- </div>
- </template>
- <script lang="ts">
- import { Component, Vue } from "vue-property-decorator";
- import { AdmSearch } from "./../../components";
- import relationTable from "./components/table";
- import tableHeader from "@/views/maintain/relationship/components/tableHeader";
- import addRelationDialog from "./components/addRelationDialog.vue";
- import editRelationDialog from "./components/editRelationDialog.vue";
- import excelDialog from "./components/excelDialog.vue";
- import { relToType, relManualQuery } from "@/api/datacenter";
- @Component({
- name: "relation",
- components: {
- AdmSearch,
- relationTable,
- addRelationDialog,
- excelDialog,
- editRelationDialog,
- },
- })
- export default class extends Vue {
- categoryFrom = ""; //主关系
- mainOptions = []; //主关系选项
- categoryTo = ""; //次关系
- minorOptions = []; //次关系选项
- vagueFrom = ""; //主关系模糊收索
- vagueTo = ""; //次关系模糊收索
- //表头数据
- tableHeader = [];
- //表格数据
- tableData = [];
- // 是否添加关系
- addRelationValue: Boolean = false;
- // 传入tip需要得字段
- values: object = {
- relation_maintenance: "关系维护",
- optionTips: `请下载最新最新<${this.$route.query.relationTypeName}>数据进行手动维护`, //请下载最新最新 xxxx 数据进行手动维护
- currentNum: "当前关系数量:",
- download: "下载模板(含数据)",
- lastTime: `最后更新时间为:${this.$route.query.lastUpdate || ""}`, //最后更新时间为
- uploadTxt: "将Excel文件拖到此处,或<em>单击上传Excel文件<em>",
- uploadTips: "上传的Excel数据将完全覆盖当前关系表(关系表先前数据不会保留)",
- downloadFile: " 下载报告文件",
- back: "返回",
- done: "完成",
- addShip: "添加关系",
- editShip: "编辑关系",
- codeTip: "请填写主被控设备对象识别编码",
- deviceTip: "请填写主被控设备对象设备号",
- codeTitle: "识别编码对应:",
- mainObject: "主对象:",
- affiliatedObject: "从对象:",
- pleaseEnter: "请输入",
- pleaseEnterCode: "请输入识别编码",
- add: "添加",
- cancel: "取消",
- delete: "删除关系",
- };
- relTypeStatus: any = 0; //关系相关类型主从 0 None 1主 2从 3主从
- /////////////////////////////////////////
- // 方法
- /**
- * 返回页面上一级
- */
- goBack() {
- this.$router.go(-1);
- }
- /**
- * 上传 execl
- */
- updataExecl() {
- this.$refs.excelDialog.dialogExport = true;
- }
- /**
- * 主关系下拉框选择
- */
- mainSelect(val: any) {
- this.categoryFrom = val;
- this.relManualQuery();
- console.log("mainSelect", val);
- }
- /**
- * 从关系下拉框选择
- */
- minorSelect(val: any) {
- this.categoryTo = val;
- this.relManualQuery();
- }
- // 主关系模糊搜索
- mainSerch(val: string) {
- this.vagueFrom = val;
- this.relManualQuery();
- }
- // 从关系模糊搜索
- minorSearch(val: string) {
- this.vagueTo = val;
- this.relManualQuery();
- }
- /**
- * 添加关系
- */
- addRelation() {
- this.addRelationValue = true;
- }
- /**
- * 获取主对象从对象关系
- */
- relToType() {
- const urlData = this.$route.query;
- if (this.relTypeStatus == 0) {
- this.mainObject = ""; //主关系
- this.mainOptions = []; //主关系选项
- this.minorObject = ""; //次关系
- this.minorOptions = []; //次关系选项
- return;
- }
- // 获取主关系接口
- if (this.relTypeStatus == 1 || this.relTypeStatus == 3) {
- const data = {
- zoneType: urlData.zoneType ? urlData.zoneType : "",
- graphCode: urlData.graphicType,
- type: urlData.relationType,
- relType: urlData.relationType,
- status: 1, // 1 为主关系;2 为从关系
- };
- relToType(data).then((res) => {
- this.mainObject = ""; //主关系
- this.mainOptions = res.content; //主关系选项
- });
- }
- // 获取从关系接口
- if (this.relTypeStatus == 2 || this.relTypeStatus == 3) {
- const data = {
- zoneType: urlData.zoneType ? urlData.zoneType : "",
- graphCode: urlData.graphicType,
- type: urlData.relationType,
- relType: urlData.relationType,
- status: 2, // 1 为主关系;2 为从关系
- };
- relToType(data).then((res) => {
- this.minorObject = ""; //次关系
- this.minorOptions = res.content; //次关系选项
- });
- }
- }
- /**
- * 获取table列表
- */
- relManualQuery() {
- // 获取table数据
- const data = {
- projectId: this.$route.query.projectId,
- vagueTo: this.vagueTo, //主关系
- vagueFrom: this.vagueFrom, //从关系
- objectType: 1,
- relType: this.$route.query.relationType,
- pageSize: 50,
- pageNumber: 1,
- graphicType: this.$route.query.graphicType,
- zoneType: this.$route.query.zoneType ? this.$route.query.zoneType : "",
- };
- relManualQuery(data).then((res) => {
- console.log("this.tableHeader", this.tableHeader);
- this.tableData = res.content;
- });
- }
- created() {
- let relationTypeName = this.$route.query.relationTypeName;
- this.tableHeader = tableHeader[relationTypeName];
- this.relTypeStatus = this.$route.query.relTypeStatus;
- // 获取主从对象下拉框数据
- this.relToType();
- // 获取table列表
- this.relManualQuery();
- }
- }
- </script>
- <style scoped lang="scss">
- .relation {
- background: #ffffff;
- height: 100%;
- .header {
- padding: 12px;
- overflow: hidden;
- border-bottom: 1px solid #e1e7ea;
- }
- .content {
- padding: 12px;
- .object {
- p {
- border-left: 7px solid #555555;
- text-indent: 10px;
- margin-bottom: 10px;
- }
- }
- }
- }
- </style>
|