| | |
| | | <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="'approving'==cardName"></not-approved> |
| | | <rejected-list :is-show="'rejected'==cardName"></rejected-list> |
| | | <approved-list :is-show="'approved'==cardName"></approved-list> |
| | | <handling-list :is-show="'handling'==cardName"></handling-list> |
| | | <handled-list :is-show="'handled'==cardName"></handled-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> |
| | |
| | | import RejectedList from "@/pages/workplace/rejectedList/RejectedList"; |
| | | import ApprovedList from "@/pages/workplace/approvedList/ApprovedList"; |
| | | import const_total from "./const_total"; |
| | | import {mapGetters, mapState} from "vuex"; |
| | | import { mapGetters, mapState } from "vuex"; |
| | | import getItemByKey from "@/assets/js/tools/getItemByKey"; |
| | | import {statusStatistic} from "@/pages/workplace/apis"; |
| | | 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; |
| | | }); |
| | | }, |
| | | /** |
| | | * 根据用户角色,变更统计的面板的样式 |
| | |
| | | this.totals = const_total.normal; |
| | | break; |
| | | } |
| | | this.cardName = this.totals[0].name; |
| | | // 查询角色对应的数据值 |
| | | this.statusStatistic(); |
| | | }, |
| | |
| | | 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); |
| | | 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: { |
| | | ...mapGetters('account', ['roles', "roleList", "departmentList"]), |
| | | ...mapGetters("account", ["roles", "roleList", "departmentList"]), |
| | | ...mapGetters("setting", ["affixed", "minHeight"]), |
| | | logStyle() { |
| | | return { |
| | | width: this.logVisible ? "450px" : 0, |
| | | }; |
| | | }, |
| | | }, |
| | | mounted() { |
| | | 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> |