- <template>
- <div class="workOrderProcessing publicContainer">
- <div class="orderTop">
- <div class="subtitle">
- 工单统计 <el-icon @click="refreshOrder" class="btn" :class="is_refresh ? 'goRefresh' : ''"><Refresh /></el-icon>
- </div>
- <div
- class="orderTitle"
- v-for="(item, index) in orderList"
- :key="item.code"
- :class="{ active: item.value == showOrderCode }"
- @click="changeOrder(item)"
- >
- <img :src="item.icon" alt="" class="titleIcon" />
- <div class="titleCon">
- <div class="orderName">{{ item.title }}</div>
- <div class="orderNum" v-if="index != 0">{{ '( ' + (item.num || 0) + ' )' }}</div>
- </div>
- </div>
- </div>
- <div class="orderBottom">
- <registerOrder v-if="showOrderCode == 'launch'"></registerOrder>
- <checkOrder v-if="showOrderCode !== 'launch'" :status="showOrderCode" ref="checkOrderRef"></checkOrder>
- </div>
- </div>
- </template>
-
- <script setup name="workOrderProcessing">
- import checkOrder from './components/checkOrder.vue';
- import registerOrder from './components/registerOrder.vue';
- import bus from '@/bus';
- import { groupCount } from '@/api/order';
-
- import gddj_icon from '@/assets/images/order/gddj_icon.png';
- import sl_icon from '@/assets/images/order/sl_icon.png';
- import tj_icon from '@/assets/images/order/tj_icon.png';
- import fp_icon from '@/assets/images/order/fp_icon.png';
- import xy_icon from '@/assets/images/order/xy_icon.png';
- import sb_icon from '@/assets/images/order/sb_icon.png';
- import hs_icon from '@/assets/images/order/hs_icon.png';
- import ja_icon from '@/assets/images/order/ja_icon.png';
- // registerOrder
-
- const checkOrderRef = ref(null);
-
- const timeId = null;
- const showOrderCode = ref('reassign');
- const is_refresh = ref(false);
- const orderList = ref([
- {
- code: 'register',
- title: '登记工单',
- icon: gddj_icon,
- value: 'launch',
- num: null,
- },
- ]);
- const orderTitleList = ref([
- {
- code: 'register',
- title: '登记工单',
- icon: gddj_icon,
- value: 'launch',
- num: null,
- },
- {
- code: 'reassign',
- title: '二次分配',
- icon: sl_icon,
- value: 'reassign',
- num: null,
- },
- {
- code: 'submit',
- title: '工单提交',
- icon: tj_icon,
- value: 'submit',
- num: null,
- },
- {
- code: 'assign',
- title: '工单分派',
- icon: fp_icon,
- value: 'assign',
- num: null,
- },
- {
- code: 'response',
- title: '工单响应',
- icon: xy_icon,
- value: 'response',
- num: null,
- },
- {
- code: 'report',
- title: '工单上报',
- icon: sb_icon,
- value: 'report',
- num: null,
- },
- {
- code: 'check',
- title: '工单核实',
- icon: hs_icon,
- value: 'check',
- num: null,
- },
- // {
- // code: 'complete',
- // title: '工单结案',
- // icon: ja_icon,
- // value: 'complete',
- // num: null,
- // },
- ]);
-
- const changeOrder = item => {
- // debugger;
- showOrderCode.value = item.value;
- // console.log('changeOrder');
- };
-
- const getOrderList = () => {
- groupCount({ queryScope: 'todo' }).then(res => {
- // console.log(res);
- orderList.value = orderTitleList.value
- .filter(item => {
- return res.data.hasOwnProperty(item.code);
- })
- .map(item => {
- return {
- ...item,
- num: res.data[item.code] || 0,
- };
- });
- });
- };
-
- const refreshOrder = () => {
- if (is_refresh.value) return;
- is_refresh.value = true;
- getOrderList();
- checkOrderRef.value.getList();
- timeId = setTimeout(() => {
- is_refresh.value = false;
- }, 1000); // 动画持续时间与CSS中的相同
- };
-
- onMounted(() => {
- getOrderList();
- bus.on('orderTitleList', () => {
- getOrderList();
- });
- });
- onBeforeUnmount(() => {
- bus.off('orderTitleList');
- if (timeId) {
- clearInterval(timeId);
- timeId = null;
- }
- });
- </script>
-
- <style lang="scss" scoped>
- .workOrderProcessing {
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- background-color: #f4f4f4;
- // border: 1px solid red;
- .orderTop {
- width: 100%;
- height: 196px;
- position: relative;
- display: flex;
- // justify-content: space-evenly;
- align-items: flex-end;
- background: url('@/assets/images/order/gdbg_img.png') no-repeat;
- background-size: 100% 100%;
- // border: 1px solid red;
- .subtitle {
- position: absolute;
- left: 20px;
- top: 20px;
- font-weight: bold;
- font-size: 17px;
- color: #333333;
- display: flex;
- align-items: center;
- .btn {
- margin-left: 10px;
- cursor: pointer;
- }
- .goRefresh {
- animation: spin 1s linear forwards;
- }
- }
- .orderTitle {
- // margin-right: 30px;
- // background-color: red;
- // z-index: 999999;
- position: relative;
- margin-bottom: 30px;
- margin-left: 20px;
- display: flex;
- // flex-direction: column;
- align-items: center;
- justify-content: center;
- border-radius: 10px;
- width: 186px;
- height: 100px;
- background: #ffffff;
- // background-color: red;
- border-radius: 5px;
- border: 1px solid #dededf;
- cursor: pointer;
- font-weight: bold;
- font-size: 18px;
- color: #333333;
- &.active {
- background: linear-gradient(90deg, #95bdff 0%, #f1f6ff 100%);
- border-radius: 5px;
- border: 2px solid #4285f4;
- }
- .titleIcon {
- width: 66px;
- height: 66px;
- margin-right: 14px;
- }
- // .orderName {
- // // font-size: 24px;
- // }
- // .orderNum {
- // // font-size: 20px;
- // }
- }
- }
- .orderBottom {
- // padding-top: 20px;
- margin-top: 20px;
- width: 100%;
- height: calc(100% - 216px);
- background: #ffffff;
- border-radius: 6px;
- padding: 10px 20px;
- // border: 1px solid red;
- box-sizing: border-box;
- // .chooseBox {
- // // padding: 20px 0;
- // }
- .chooseType {
- margin-left: 20px;
- }
- .title {
- font-size: 16px;
- }
- }
- }
-
- @keyframes spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
- }
- </style>