研发图纸文件管理系统-前端项目
he wei
2024-01-04 3497c0b47387e5888880ac56584577a8ff5f37d4
src/pages/workplace/WorkPlace.vue
@@ -1,15 +1,77 @@
<template>
  <div class="work-place">
    <a-row :gutter="18">
      <a-col :span="item.span" v-for="(item, key) in totals" :key="'key'+key">
        <total-card :info="item" :type="item.type" :title="item.title" :num="item.value" @click="changeTotalCard"></total-card>
      </a-col>
    </a-row>
    <div style="margin-top: 8px">
      <my-draw :is-show="'myDraw'==cardName"></my-draw>
      <not-approved :is-show="'notApproved'==cardName"></not-approved>
      <rejected-list :is-show="'rejected'==cardName"></rejected-list>
      <approved-list :is-show="'approved'==cardName"></approved-list>
  <div class="work-place-wrapper">
    <div class="work-place-container">
      <div class="work-place">
        <a-row :gutter="18" class="work-place-top">
          <a-col
            :span="item.span"
            v-for="(item, key) in totals"
            :key="'key' + key"
          >
            <total-card
              :info="item"
              :type="item.type"
              :title="item.title"
              :num="item.value"
              @click="changeTotalCard"
            ></total-card>
          </a-col>
        </a-row>
        <div style="margin-top: 8px">
          <my-draw
            :is-show="'my' == cardName"
            :y="y"
            @resize="resize"
          ></my-draw>
          <not-approved
            :is-show="'approving' == cardName"
            :y="y"
            @resize="resize"
          ></not-approved>
          <rejected-list
            :is-show="'rejected' == cardName"
            :y="y"
            @resize="resize"
          ></rejected-list>
          <approved-list
            :is-show="'approved' == cardName"
            :y="y"
            @resize="resize"
          ></approved-list>
          <handling-list
            :is-show="'handling' == cardName"
            :y="y"
            @resize="resize"
          ></handling-list>
          <handled-list
            :is-show="'handled' == cardName"
            :y="y"
            @resize="resize"
          ></handled-list>
          <feedback-list
            :is-show="'sendFk' == cardName || 'recevierFk' == cardName"
            :type="cardName"
            :y="y"
            @resize="resize"
          ></feedback-list>
          <!-- v-if="'sendFk' == cardName"
               v-if="'recevierFk' == cardName" -->
          <!-- <feedback-list
                  :is-show="'recevierFk' == cardName"
                  :type="cardName"
                  :y="y"
                  @resize="resize"
               ></feedback-list> -->
        </div>
      </div>
    </div>
    <div class="log-contain" :style="logStyle">
      <div :class="['log-btn', {active: logVisible}]" @click="toggleLog">
        {{ logVisible ? "折叠动态" : "展开动态" }}
      </div>
      <div class="log-wrapper" v-show="logVisible">
        <today-log></today-log>
      </div>
    </div>
  </div>
</template>
@@ -21,30 +83,81 @@
import RejectedList from "@/pages/workplace/rejectedList/RejectedList";
import ApprovedList from "@/pages/workplace/approvedList/ApprovedList";
import const_total from "./const_total";
import {mapState} from "vuex";
import const_role from "@/assets/js/const/const_role";
import { mapGetters, mapState } from "vuex";
import getItemByKey from "@/assets/js/tools/getItemByKey";
import { statusStatistic } from "@/pages/workplace/apis";
import HandlingList from "@/pages/workplace/handlingList/HandlingList";
import HandledList from "@/pages/workplace/handledList/HandledList";
import FeedbackList from "@/pages/workplace/feedbackList/feedbackList";
import createWs from "@/assets/js/websocket";
import TodayLog from "@/pages/components/TodayLog.vue";
const WSMixin = createWs("worksheet");
export default {
  name: 'WorkPlace',
  name: "WorkPlace",
  components: {
    TodayLog,
    HandledList,
    HandlingList,
    ApprovedList,
    RejectedList,
    NotApproved,
    MyDraw,
    TotalCard
    TotalCard,
    FeedbackList,
  },
  mixins: [WSMixin],
  data() {
    return {
      logVisible: false,
      loading: false,
      update: -1,
      y: 400,
      drawUploadVisible: false,
      cardName: "myDraw",
      cardName: "my",
      totals: const_total.normal,
      radio: 0,
    }
    };
  },
  watch: {
    update(n) {
      if (-1 != n && !this._inactive) {
        const bar = document.querySelectorAll(".header-bar")[0].clientHeight;
        const workPlaceTop = document.querySelectorAll(".work-place-top")[0]
          .clientHeight;
        this.y = this.minHeight - bar - workPlaceTop - 56;
      }
    },
    affixed() {
      this.resize();
    },
    cardName() {
      this.resize();
    },
    minHeight() {
      this.resize();
    },
  },
  methods: {
    resize() {
      setTimeout(() => {
        this.update = Math.random();
      }, 200);
    },
    onWSMessage(res) {
      let rs = JSON.parse(res.data);
      let data = rs.data;
      this.totals.map((item) => {
        let name = item.name;
        item.value = data[name] ? data[name] : 0;
      });
    },
    changeTotalCard(info) {
      this.cardName = info.name;
      // console.log(info.name, "nam");
      this.cardName = "";
      this.$nextTick(() => {
        this.cardName = info.name;
      });
    },
    /**
     * 根据用户角色,变更统计的面板的样式
@@ -62,24 +175,107 @@
          this.totals = const_total.normal;
          break;
      }
      this.cardName = this.totals[0].name;
      // 查询角色对应的数据值
      this.statusStatistic();
    },
    radioChange() {
      this.changeTotal(this.radio);
    }
    },
    statusStatistic() {
      statusStatistic()
        .then((res) => {
          let rs = res.data;
          if (rs.code == 1) {
            let data = rs.data;
            this.totals.map((item) => {
              let name = item.name;
              item.value = data[name] ? data[name] : 0;
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    activeFN() {
      this.resize();
    },
    toggleLog() {
      this.logVisible = !this.logVisible;
      let cardName = this.cardName;
      this.cardName = "";
      this.$nextTick(() => {
        this.cardName = cardName;
      });
    },
  },
  computed: {
    ...mapState('account', ['roles'])
    ...mapGetters("account", ["roles", "roleList", "departmentList"]),
    ...mapGetters("setting", ["affixed", "minHeight"]),
    logStyle() {
      return {
        width: this.logVisible ? "450px" : 0,
      };
    },
  },
  mounted() {
    let role = getItemByKey(this.roles[0].id, const_role);
    console.log(role);
    let role = getItemByKey(this.roles[0].id, this.roleList);
    this.changeTotal(role.value);
  }
}
  },
};
</script>
<style scoped>
.work-place-wrapper {
  display: flex;
  height: 100%;
}
.work-place-container {
  flex: 1;
  position: relative;
  height: 100%;
}
.work-place {
  padding-top: 8px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.log-contain {
  /* width: 450px; */
  position: relative;
  transition: all 0.3s;
}
.log-btn {
  /* z-index: 1; */
  position: absolute;
  top: 0;
  left: 24px;
  width: 100px;
  height: 40px;
  line-height: 40px;
  color: #ffffff;
  padding-left: 20px;
  border-radius: 20px 0 0 20px;
  cursor: pointer;
  background: #090;
  transition: all 0.3s;
  transform: translate(-20px, 0);
}
.log-btn.active {
  transform: translate(-40px, 0);
}
.log-btn:hover {
  transform: translate(-100%, 0);
}
.log-wrapper {
  width: 450px;
  height: 100%;
  overflow-y: auto;
  padding-left: 4px;
  padding-bottom: 4px;
  position: relative;
}
</style>