zhgdyun/src/views/projectAdmin/projectList.vue

<template>
  <!-- 项目列表 -->
  <div class="fullHeight pages">
    <vhead :titleName="$t('message.homeLayout.projectTitle')" showR="true"></vhead>
    <div class="pageContainer">
      <div class="pageDataContainer">
        <!-- <div class="projectList"> -->
        <div class="searchBox whiteBlock" v-if="userInfo.accountType!=5">
          <el-form :inline="true" size="medium" :model="searchForm" ref="searchForm">
            <el-form-item :label="$t('message.companyDiagram.titleName1')" prop="firstCompanyId">
              <el-select
                v-model="searchForm.firstCompanyId"
                :placeholder="$t('message.companyDiagram.PleaseSelect')"
                @change="selectStair"
                :disabled="userInfo.accountType!=2"
                clearable
              >
                <el-option
                  :label="item.companyName"
                  :value="item.companyId"
                  v-for="item in institutionList1"
                  :key="item.companyId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('message.companyDiagram.titleName2')" prop="secondCompanyId">
              <el-select @change="selectSecondStair"
                v-model="searchForm.secondCompanyId"
                :placeholder="$t('message.companyDiagram.PleaseSelect')"
                :disabled="userInfo.accountType!=2 && userInfo.accountType!=3 || searchForm.firstCompanyId==''"
                clearable
              >
                <el-option
                  v-for="item in institutionList2"
                  :key="item.companyId"
                  :label="item.companyName"
                  :value="item.companyId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="'三级管理机构'" prop="thirdCompanyId">
              <el-select
                v-model="searchForm.thirdCompanyId"
                :placeholder="$t('message.companyDiagram.PleaseSelect')"
                :disabled="userInfo.accountType!=2 && userInfo.accountType!=3&& userInfo.accountType!=4 || searchForm.secondCompanyId==''"
                clearable
              >
                <el-option
                  v-for="item in institutionList3"
                  :key="item.companyId"
                  :label="item.companyName"
                  :value="item.companyId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              :label="$t('message.companyDiagram.Table.projectName')"
              class="last"
              prop="projectName"
            >
              <el-input
                v-model="searchForm.projectName"
                :placeholder="$t('message.companyDiagram.PleaseEnter')"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="getListData">{{$t('message.docManage.query')}}</el-button>
              <el-button type="warning" plain @click="resetForm">{{$t('message.docManage.refresh')}}</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table_wrap whiteBlock">
          <el-table class="tables" :data="tableData">
            <el-table-column
              type="index"
              width="50"
              align="center"
              :label="$t('message.companyDiagram.Table.index')"
            ></el-table-column>
            <el-table-column
              prop="projectName"
              :label="$t('message.companyDiagram.Table.projectName')"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="projectNumber"
              :label="$t('message.companyDiagram.dialog_ProjectPop_up.projectNumber')"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="firstCompanyName"
              :label="$t('message.companyDiagram.titleName1')"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="secondCompanyName"
              :label="$t('message.companyDiagram.titleName2')"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="projectAddress"
              :label="$t('message.companyDiagram.dialog_ProjectPop_up.projectAddress')"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="bulidStatus"
              :label="$t('message.companyDiagram.dialog_ProjectPop_up.bulidStatus')"
              align="center"
            >
              <template
                slot-scope="scope"
              >
              {{$t('message.companyDiagram.BUILDSTATUS')[scope.row.bulidStatus==4?3:scope.row.bulidStatus].name}}
              
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="400">
              <template slot-scope="scope">
                <div v-if="$store.state.userInfo.styleType==2"
                class="operationText"
                @click="goProjectBigScreen(scope.row)"
                >
                  进入项目级大屏
                </div>
                <div v-if="$store.state.userInfo.styleType==3"
                class="operationText"
                @click="goProjectQu(scope.row)"
                >
                  进入衢州版本
                </div>
                <div v-if="($store.state.userInfo.styleType!=2 && $store.state.userInfo.styleType!=3) && $store.state.userInfo.enterProjectBackType === 0"
                  class="operationText"
                  style="margin-right: 30px"
                  @click="goProjectIndex(scope.row)"
                >{{$t('message.companyDiagram.goProjectBackEnd')}}</div>
                <div v-if="($store.state.userInfo.styleType!=2 && $store.state.userInfo.styleType!=3) && $store.state.userInfo.seeEquipment === 0"
                  class="operationText"
                  @click="goDevCenter(scope.row)"
                >{{$t('message.companyDiagram.goDevCenter')}}</div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pagerBox"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="$store.state.PAGESIZRS"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="Number(total)"
            background
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getLayerCompanyList,
  selectCompanyProjectPage,
} from "@/assets/js/api/project.js";
import {
  getComapnyStatisticsListApi,
} from "@/assets/js/api/company/project";
import vhead from "@/components/header";
export default {
  name: "projectList",
  components: { vhead },
  data() {
    return {
      userInfo: "",
      searchForm: {
        firstCompanyId: "",
        secondCompanyId: "",
        projectName: "",
        thirdCompanyId:""
      },
      total: 0,
      pageNo: 1,
      pageSize: 10,
      tableData: [],
      institutionList1: [], //一级管理机构
      institutionList2: [], //二级管理机构
      institutionList3: [], //三级管理机构
    };
  },
  created() {
    // document.title='项目总览'
    this.userInfo = this.$store.state.userInfo;
    this.getLayerCompany();
  },
  methods: {
    // 获取一二级下拉
    getLayerCompany() {
      let data = {
        sn: this.userInfo.headquartersSn,
        videoType: 0,
      };
      getComapnyStatisticsListApi(data).then((res) => {
        if (res.code == 200) {
          // ;
          this.institutionList1 = res.result.companyList;
          let DATA = res.result.companyList
          //accountType==2 可以选择一级、二级管理机构
          if (this.userInfo.accountType == 2) {
            
            // this.institutionList2 = res.result[0].list;
            // this.institutionList3 = this.institutionList2[0].list;
            //accountType==3 不可以选择一级管理机构   可以选择二级管理机构
          } else if (this.userInfo.accountType == 3) {
            for (let i in DATA) {
              if (DATA[i].companySn == this.userInfo.sn) {
                this.institutionList1.push(DATA[i]);
                this.searchForm.firstCompanyId = DATA[i].companyId;
                this.institutionList2 = DATA[i].list;
              }
            }
            //accountType==4 不可以选择一级、二级管理机构
          } else if (this.userInfo.accountType == 4) {
            for (let i in DATA) {
              let list = DATA[i].list;
              if (list.length > 0) {
                for (let j in list) {
                  if (this.userInfo.sn == list[j].companySn) {
                    this.institutionList1.push(DATA[i]);
                    this.institutionList2.push(list[j]);
                    this.searchForm.firstCompanyId = DATA[i].companyId;
                    this.searchForm.secondCompanyId = list[j].companyId;
                    this.institutionList3 = list[j].list;
                  }
                }
              }
            }
          }else if (this.userInfo.accountType == 7) {
            for (let i in DATA) {
              let list = DATA[i].list;
              if (list.length > 0) {
                for (let j in list) {
                  let list2 = list[j].list;
                  for (let k in list2) {
                    if (this.userInfo.sn == list2[k].companySn) {
                      this.institutionList1.push(DATA[i]);
                      this.institutionList2.push(list[j]);
                      this.searchForm.firstCompanyId = DATA[i].companyId;
                      this.searchForm.secondCompanyId = list[j].companyId;
                      this.searchForm.thirdCompanyId = list2[k].companyId;
                      this.institutionList3.push(list2[k])
                    }
                  }
                  
                }
              }
            }
          }
          // console.log(this.institutionList1)
          // console.log(this.institutionList2)
          // console.log(this.institutionList3)
          setTimeout(() => {
            this.getListData();
          }, 50);
        }
      });
    },

    //一级切换时
    selectStair(id) {
      window._paq.push(['trackEvent', '下拉选择', '一级管理机构','选择一级管理机构' ])
      for (let i in this.institutionList1) {
        if (this.institutionList1[i].companyId == id) {
          this.institutionList2 = this.institutionList1[i].list;
        }
      }
    },
    //二级切换时
    selectSecondStair(id) {
      window._paq.push(['trackEvent', '下拉选择', '二级管理机构','选择二级管理机构' ])
      for (let i in this.institutionList2) {
        if (this.institutionList2[i].companyId == id) {
          this.institutionList3 = this.institutionList2[i].list;
        }
      }
    },

    //获取列表数据
    getListData() {
      let value = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        headquartersSn: this.userInfo.headquartersSn,
        firstCompanyId: this.searchForm.firstCompanyId,
        secondCompanyId: this.searchForm.secondCompanyId,
        projectName: this.searchForm.projectName,
        thirdCompanyId:this.searchForm.thirdCompanyId
      };
      let value2 = {
        headquartersSn: this.userInfo.headquartersSn,
        projectSn: this.userInfo.sn,
      };

      let data = this.userInfo.accountType == 5 ? value2 : value;

      selectCompanyProjectPage(data).then((res) => {
        if (res.code == 200) {
          // ;
          this.tableData = res.result.records;
          this.total = Number(res.result.total);
        }
      });
      window._paq.push(['trackEvent', '点击', '查询','查询项目列表' ])
    },

    resetForm() {
      // this.$refs["searchForm"].resetFields();
      if(this.userInfo.accountType==2){
        this.searchForm.firstCompanyId=''
        this.searchForm.secondCompanyId=''
        this.searchForm.thirdCompanyId=''
      }
      if(this.userInfo.accountType==3){
        this.searchForm.secondCompanyId=''
        this.searchForm.thirdCompanyId=''
      }
      // if(this.userInfo.accountType!=2 && this.userInfo.accountType!=3){
      // }else{
      //   this.searchForm.secondCompanyId=''
      // }
      if(this.userInfo.accountType==4){
        this.searchForm.thirdCompanyId=''
      }
      this.searchForm.projectName=''
      this.getListData();
      window._paq.push(['trackEvent', '点击', '刷新','刷新项目列表' ])
    },
    //查看条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getListData();
    },
    //查看页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getListData();
    },
    // 去项目级大屏
    goProjectBigScreen(value){
      this.$store.commit("setProjectSn", value.projectSn);
      this.$store.commit("setProDetail", value);
      this.$store.commit("changeMouduleIndex", 0);
      this.$store.commit("changeSecondMenuIndex", 0);
      this.$store.commit("changeThirdMenuIndex", 0);
      this.$store.commit("changeFourMenuIndex", 0);

      let routeUrl = this.$router.resolve({
              path: '/projectV2/taskList'
        });
        window.open(routeUrl.href, "_blank");
        window._paq.push(['trackEvent', '点击', '项目级大屏','进入项目级大屏' ])
    },
    // 去衢州版本
    goProjectQu(value){
      console.log('进去衢州',value)
      this.$store.commit("setProjectSn", value.projectSn);
      this.$store.commit("setProDetail", value);
      this.$store.commit("changeMouduleIndex", 0);
      this.$store.commit("changeSecondMenuIndex", 0);
      this.$store.commit("changeThirdMenuIndex", 0);
      this.$store.commit("changeFourMenuIndex", 0);
      let routeUrl = this.$router.resolve({
              path: '/projectV3/taskList'
        });
       window.open(routeUrl.href, "_blank");
       localStorage.removeItem("active");
       localStorage.removeItem("path");
       localStorage.removeItem("treeActive");
    },
    //去项目后台
    goProjectIndex(value) {
      this.$store.commit("setProjectSn", value.projectSn);
      let routeUrl = this.$router.resolve({
              path: '/projectIndex'
        });
        window.open(routeUrl.href, "_self");
        window.location.reload()
      window._paq.push(['trackEvent', '点击', '项目后台','进入项目后台' ])
      sessionStorage.setItem('messageA',this.messageA)
    },
    //去设备中台
    goDevCenter(value) {
      console.log('跳跳跳')
       this.$store.commit("setProjectSn", value.projectSn);
          window.open("/equipmentCenter.html#/equipmentCenterIndx", "_self");
          window._paq.push(['trackEvent', '点击', '设备中台','进入设备中台' ])
       },
  },
};
</script>
<style lang="less" scoped>
.pageContainer{
  height: calc(100% - 61px);
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: white;
  }
  ::-webkit-scrollbar-thumb {
      box-shadow: inset 0 0 0px white;
      -webkit-box-shadow: inset 0 0 0px white;
      background-color: rgb(193, 193, 193);
      /*滚动条的背景颜色*/
      border-radius: 20px;
  }
  /*解决表格固定列时的压样式问题*/
    .el-table__fixed {
        height: calc(100% - 7px) !important;
    }

  .el-table__fixed-right {
      height: calc(100% - 12px) !important;
  }

  .el-table__fixed-right::before,
  .el-table__fixed::before {
        background-color: unset !important;
  }
}
.searchBox {
  justify-content: space-between;
}
.rightBox {
  margin-right: 20px;
  p {
    display: inline-flex;
    span {
      color: @--color-primary;
      font-size: 23px;
      font-weight: 500;
    }
    &:first-child {
      margin-right: 100px;
    }
  }
}
.operationText {
  color: rgba(85, 129, 255, 1);
  font-size: 13px;
  font-family: PingFangSC-Regular;
  display: inline-block;
}
</style>