- <template>
- <div class="workOrderProcessing publicContainer">
- <div class="orderTop">
- <div class="subtitle">工单统计</div>
- <div
- class="orderTitle"
- v-for="(item, index) in orderTitleList"
- :key="item.code"
- :class="{ active: item.code == showOrderCode }"
- @click="showOrderCode = item.code"
- >
- <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 + ' )' }}</div>
- </div>
- </div>
- </div>
- <div class="orderBottom">
- <registerOrder v-if="showOrderCode == '001'"></registerOrder>
- <checkOrder v-if="showOrderCode !== '001'"></checkOrder>
- </div>
- </div>
- </template>
-
- <script setup name="workOrderProcessing">
- import checkOrder from './components/checkOrder.vue';
- import registerOrder from './components/registerOrder.vue';
-
- 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 showOrderCode = ref('002');
- const orderTitleList = ref([
- {
- code: '001',
- title: '登记工单',
- icon: gddj_icon,
- num: '1',
- },
- {
- code: '002',
- title: '工单受理',
- icon: sl_icon,
- num: '0',
- },
- {
- code: '003',
- title: '工单提交',
- icon: tj_icon,
- num: '0',
- },
- {
- code: '004',
- title: '工单分派',
- icon: fp_icon,
- num: '0',
- },
- {
- code: '005',
- title: '工单响应',
- icon: xy_icon,
- num: '0',
- },
- {
- code: '006',
- title: '工单上报',
- icon: sb_icon,
- num: '0',
- },
- {
- code: '007',
- title: '工单核实',
- icon: hs_icon,
- num: '0',
- },
- {
- code: '008',
- title: '工单结案',
- icon: ja_icon,
- num: '0',
- },
- ]);
- </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;
- }
- .orderTitle {
- // margin-right: 30px;
- margin-bottom: 30px;
- display: flex;
- // flex-direction: column;
- align-items: center;
- justify-content: center;
- border-radius: 10px;
- width: 186px;
- height: 100px;
- background: #ffffff;
- 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: 20px;
- // border: 1px solid red;
- box-sizing: border-box;
- // .chooseBox {
- // // padding: 20px 0;
- // }
- .chooseType {
- margin-left: 20px;
- }
- .title {
- font-size: 16px;
- }
- }
- }
- </style>