daping quan
Showing
6 changed files
with
282 additions
and
57 deletions
src/assets/image/datePicker.png
0 → 100644
1.6 KB
src/assets/image/rili.png
0 → 100644
947 Bytes
| 1 | <template> | 1 | <template> |
| 2 | <div class="main"> | 2 | <div class="main"> |
| 3 | <!-- <div style="position: absolute;top: 23px;right: 20px">--> | 3 | <div class="basePick_bg" v-if="obj.CHANGEBASE=='是'"> |
| 4 | <!-- <el-date-picker--> | 4 | <el-select |
| 5 | <!-- v-model="nowDate"--> | 5 | v-model="selectBase" |
| 6 | <!-- type="date"--> | 6 | class="select" |
| 7 | <!-- placeholder="Pick a day"--> | 7 | collapse-tags |
| 8 | <!-- :size="size"--> | 8 | placeholder="全部基地" |
| 9 | <!-- ></el-date-picker>--> | 9 | size="small" |
| 10 | <!-- </div>--> | 10 | @change="setType" |
| 11 | > | ||
| 12 | <el-option | ||
| 13 | v-for="(val,i) in baseList" :key="i" :label="val" :value="val"/> | ||
| 14 | </el-select> | ||
| 15 | </div> | ||
| 16 | <div class="datePick_bg" style="position: absolute;top: 32px;right: 18px;height: 28px"> | ||
| 17 | <el-date-picker | ||
| 18 | v-model="nowDate" | ||
| 19 | type="month" | ||
| 20 | placeholder="历史回溯" | ||
| 21 | :size="size" | ||
| 22 | style="width: 100%" | ||
| 23 | value-format="YYYY-MM" | ||
| 24 | ></el-date-picker> | ||
| 25 | </div> | ||
| 11 | <el-row class="w100"> | 26 | <el-row class="w100"> |
| 12 | <el-col v-if="obj.IFBASE" :span="8"> | 27 | <el-col v-if="!isLoad" :span="8"> |
| 13 | <left-page :obj="obj" :type="type=='否'" :url="result"/> | 28 | <left-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/> |
| 14 | </el-col> | 29 | </el-col> |
| 15 | <el-col v-if="obj.IFBASE" :span="8"> | 30 | <el-col v-if="!isLoad" :span="8"> |
| 16 | <center-page :obj="obj" :isLeader="isLeader" :type="type=='否'" :url="result"/> | 31 | <center-page :obj="obj" :isLeader="isLeader" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/> |
| 17 | </el-col> | 32 | </el-col> |
| 18 | <el-col v-if="obj.IFBASE" :span="8"> | 33 | <el-col v-if="!isLoad" :span="8"> |
| 19 | <right-page :obj="obj" :type="type=='否'" :url="result"/> | 34 | <right-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/> |
| 20 | </el-col> | 35 | </el-col> |
| 21 | </el-row> | 36 | </el-row> |
| 22 | </div> | 37 | </div> |
| ... | @@ -28,17 +43,24 @@ import LeftPage from "@/viewsPc/vip/leftPage" | ... | @@ -28,17 +43,24 @@ import LeftPage from "@/viewsPc/vip/leftPage" |
| 28 | import CenterPage from "@/viewsPc/vip/centerPage" | 43 | import CenterPage from "@/viewsPc/vip/centerPage" |
| 29 | import RightPage from "@/viewsPc/vip/rightPage" | 44 | import RightPage from "@/viewsPc/vip/rightPage" |
| 30 | import {getYS000} from '@/api/server.js' | 45 | import {getYS000} from '@/api/server.js' |
| 31 | import {ref, onMounted, getCurrentInstance} from 'vue' | 46 | import {ref, onMounted, getCurrentInstance, nextTick} from 'vue' |
| 32 | import {useRouter} from 'vue-router' | 47 | import {useRouter} from 'vue-router' |
| 33 | 48 | ||
| 34 | const type = ref('是') | 49 | const type = ref(true) |
| 50 | let isLoad = ref(false) | ||
| 35 | const url = ref() | 51 | const url = ref() |
| 36 | const obj = ref({}) | 52 | const obj = ref({}) |
| 37 | const result = ref() | 53 | const result = ref() |
| 38 | const router = useRouter() | 54 | const router = useRouter() |
| 39 | const nowDate = new Date() | 55 | const now = new Date() |
| 56 | const year = now.getFullYear() // 获取年份(4位数) | ||
| 57 | const month = now.getMonth() + 1 // 获取月份(0-11,需要+1) | ||
| 58 | const formatMonth = (month) => (month < 10 ? `0${month}` : month) | ||
| 59 | const nowDate = ref(`${year}-${formatMonth(month)}`) | ||
| 60 | let selectBase = ref("总部") | ||
| 61 | let baseList = ref() | ||
| 40 | let isLeader = ref(false) | 62 | let isLeader = ref(false) |
| 41 | // url.value = 'http://192.168.1.152:8899/login/sid=65075093-0520-444e-af42-d277c4f366cb#/' | 63 | // url.value = 'http://192.168.1.152:8899/login/sid=36c62778-f35a-4285-a279-08aa2b8a1fa8#/' |
| 42 | url.value = window.location.href | 64 | url.value = window.location.href |
| 43 | result.value = url.value?.split('=')[1]?.split('#')[0]; | 65 | result.value = url.value?.split('=')[1]?.split('#')[0]; |
| 44 | 66 | ||
| ... | @@ -48,8 +70,6 @@ function validateEmail(email) { | ... | @@ -48,8 +70,6 @@ function validateEmail(email) { |
| 48 | } | 70 | } |
| 49 | 71 | ||
| 50 | onMounted(() => { | 72 | onMounted(() => { |
| 51 | console.log(url.value) | ||
| 52 | console.log(result.value) | ||
| 53 | if (result.value) { | 73 | if (result.value) { |
| 54 | handelGetYS000() | 74 | handelGetYS000() |
| 55 | isLeader.value = validateEmail(result.value) | 75 | isLeader.value = validateEmail(result.value) |
| ... | @@ -64,20 +84,96 @@ onMounted(() => { | ... | @@ -64,20 +84,96 @@ onMounted(() => { |
| 64 | 84 | ||
| 65 | async function handelGetYS000() { | 85 | async function handelGetYS000() { |
| 66 | const res = await getYS000(result.value) | 86 | const res = await getYS000(result.value) |
| 67 | type.value = res.data?.IFBASE || '是' | 87 | let typeStr = res.data?.IFBASE || '是' |
| 88 | type.value = typeStr == '否' | ||
| 68 | obj.value = res.data || {} | 89 | obj.value = res.data || {} |
| 90 | selectBase.value = res.data.BASE | ||
| 91 | baseList.value = res.data.list | ||
| 92 | } | ||
| 93 | |||
| 94 | function setType(){ | ||
| 95 | isLoad.value = true | ||
| 96 | nextTick(() => { | ||
| 97 | if (selectBase.value !== '总部') { | ||
| 98 | type.value = false | ||
| 99 | } else { | ||
| 100 | type.value = true | ||
| 101 | } | ||
| 102 | isLoad.value = false | ||
| 103 | }) | ||
| 69 | } | 104 | } |
| 70 | 105 | ||
| 71 | 106 | ||
| 72 | </script> | 107 | </script> |
| 73 | 108 | ||
| 74 | <style lang="scss" scoped> | 109 | <style lang="scss" scoped> |
| 110 | .basePick_bg { | ||
| 111 | position: absolute; | ||
| 112 | top: 32px; | ||
| 113 | right: 180px; | ||
| 114 | height: 28px; | ||
| 115 | width: 155px; | ||
| 116 | background: #0B2239; | ||
| 117 | //box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27); | ||
| 118 | border-radius: 5px; | ||
| 119 | border: 1px solid #12BFFF; | ||
| 120 | |||
| 121 | .select { | ||
| 122 | background-color: transparent; | ||
| 123 | |||
| 124 | :deep(.el-select__wrapper) { | ||
| 125 | background-color: transparent; | ||
| 126 | box-shadow: 0 0 0 0; | ||
| 127 | border: none; | ||
| 128 | } | ||
| 129 | |||
| 130 | /* 选项样式 */ | ||
| 131 | :deep(.el-select-dropdown__item) { | ||
| 132 | color: white !important; | ||
| 133 | background-color: transparent !important; | ||
| 134 | } | ||
| 135 | |||
| 136 | /* 鼠标悬停效果 */ | ||
| 137 | :deep(.el-select-dropdown__item.hover) { | ||
| 138 | background-color: rgba(255, 255, 255, 0.1) !important; | ||
| 139 | } | ||
| 140 | |||
| 141 | /* placeholder */ | ||
| 142 | :deep(.el-select__placeholder) { | ||
| 143 | font-family: PingFang SC, serif; | ||
| 144 | font-weight: 500; | ||
| 145 | color: #fff; | ||
| 146 | //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41); | ||
| 147 | //background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%); | ||
| 148 | background-color: rgb(33, 123, 188, .1); /* 背景色 */ | ||
| 149 | -webkit-background-clip: text; | ||
| 150 | //-webkit-text-fill-color: transparent | ||
| 151 | } | ||
| 152 | |||
| 153 | :deep(.el-tag--info) { | ||
| 154 | background-color: rgb(33, 123, 188, .1); /* 背景色 */ | ||
| 155 | border-color: #1c81a6; /* 边框色 */ | ||
| 156 | color: #fff; /* 文字颜色 */ | ||
| 157 | } | ||
| 158 | |||
| 159 | :deep(.el-icon ) { | ||
| 160 | color: #fff; | ||
| 161 | } | ||
| 162 | } | ||
| 163 | } | ||
| 164 | |||
| 165 | .datePick_bg { | ||
| 166 | background: url("@/assets/image/datePicker.png") no-repeat center; | ||
| 167 | background-size: 100% 100%; | ||
| 168 | width: 155px; | ||
| 169 | } | ||
| 75 | ::v-deep .el-date-editor .el-input__inner { | 170 | ::v-deep .el-date-editor .el-input__inner { |
| 76 | background-color: transparent !important; | 171 | background-color: transparent !important; |
| 77 | border-color: #80ffff; | 172 | border-color: #80ffff; |
| 78 | box-shadow: none; | 173 | box-shadow: none; |
| 79 | height: 30px; | 174 | height: 30px; |
| 80 | color: #fff; | 175 | color: #fff; |
| 176 | padding: 0 0 2px 10px; | ||
| 81 | } | 177 | } |
| 82 | ::v-deep .el-input__wrapper { | 178 | ::v-deep .el-input__wrapper { |
| 83 | background: transparent; | 179 | background: transparent; |
| ... | @@ -86,11 +182,17 @@ async function handelGetYS000() { | ... | @@ -86,11 +182,17 @@ async function handelGetYS000() { |
| 86 | } | 182 | } |
| 87 | /* 隐藏默认图标 */ | 183 | /* 隐藏默认图标 */ |
| 88 | ::v-deep .el-date-editor .el-input__prefix { | 184 | ::v-deep .el-date-editor .el-input__prefix { |
| 89 | display: none; | 185 | background: url("@/assets/image/rili.png") no-repeat center; |
| 186 | background-size: 100% 100%; | ||
| 187 | width: 20px; | ||
| 188 | height: 20px; | ||
| 189 | position: absolute; | ||
| 190 | right: 10px; | ||
| 90 | } | 191 | } |
| 91 | 192 | ||
| 92 | /* 强制右侧显示图标 */ | 193 | /* 强制右侧显示图标 */ |
| 93 | ::v-deep .el-date-editor .el-input__suffix { | 194 | ::v-deep .el-date-editor .el-input__suffix .clear-icon{ |
| 94 | right: 10px !important; | 195 | display: inline-block !important; |
| 196 | padding: 0 40px 0 0; | ||
| 95 | } | 197 | } |
| 96 | </style> | 198 | </style> | ... | ... |
| ... | @@ -98,7 +98,7 @@ import {autoToolTip} from "@/plugins/auto-toolTip"; | ... | @@ -98,7 +98,7 @@ import {autoToolTip} from "@/plugins/auto-toolTip"; |
| 98 | import ScrollingData from './scrollingData.vue' | 98 | import ScrollingData from './scrollingData.vue' |
| 99 | import * as echarts from "echarts"; | 99 | import * as echarts from "echarts"; |
| 100 | import * as api from "@/apiPc/common" | 100 | import * as api from "@/apiPc/common" |
| 101 | import {onMounted, ref, computed, onUnmounted, getCurrentInstance, nextTick} from 'vue' | 101 | import {onMounted, ref, computed, onUnmounted, getCurrentInstance, nextTick, watch} from 'vue' |
| 102 | import {dayjs} from 'element-plus' | 102 | import {dayjs} from 'element-plus' |
| 103 | import {getYS000, getYS001, getYS002, getYS003, getYS004, getYS005} from '@/api/server.js' | 103 | import {getYS000, getYS001, getYS002, getYS003, getYS004, getYS005} from '@/api/server.js' |
| 104 | import Information from "/@/viewsPc/vip/components/information.vue"; | 104 | import Information from "/@/viewsPc/vip/components/information.vue"; |
| ... | @@ -122,12 +122,32 @@ const props = defineProps({ | ... | @@ -122,12 +122,32 @@ const props = defineProps({ |
| 122 | type: Object, | 122 | type: Object, |
| 123 | default: () => { | 123 | default: () => { |
| 124 | } | 124 | } |
| 125 | } | 125 | }, |
| 126 | 126 | historyDate: { | |
| 127 | type: String, | ||
| 128 | default: undefined | ||
| 129 | }, | ||
| 130 | sBase:{ | ||
| 131 | type: String, | ||
| 132 | default: undefined | ||
| 133 | }, | ||
| 127 | }) | 134 | }) |
| 128 | 135 | ||
| 129 | const url = computed(() => props.url) | 136 | const url = computed(() => props.url) |
| 130 | const obj = computed(() => props.obj) | 137 | const obj = computed(() => props.obj) |
| 138 | const hDate = computed(() => props.historyDate) | ||
| 139 | const sBase = computed(() => props.sBase) | ||
| 140 | watch(() => props.historyDate,(newVal) => { | ||
| 141 | if (isMounted.value) { | ||
| 142 | nowYearString.value = parseInt(newVal.substring(0,4)) | ||
| 143 | init() | ||
| 144 | } | ||
| 145 | }) | ||
| 146 | watch(() => props.sBase,(newVal) => { | ||
| 147 | if (isMounted.value) { | ||
| 148 | init() | ||
| 149 | } | ||
| 150 | }) | ||
| 131 | const isLeader = computed(() => props.isLeader) | 151 | const isLeader = computed(() => props.isLeader) |
| 132 | const myType = computed(() => props.type) | 152 | const myType = computed(() => props.type) |
| 133 | const zhuRef1 = ref(null) | 153 | const zhuRef1 = ref(null) |
| ... | @@ -165,12 +185,14 @@ const list = ref([]) | ... | @@ -165,12 +185,14 @@ const list = ref([]) |
| 165 | 185 | ||
| 166 | let total = 0 | 186 | let total = 0 |
| 167 | let intervalA = null | 187 | let intervalA = null |
| 188 | const isMounted = ref(false) | ||
| 168 | 189 | ||
| 169 | onMounted(async () => { | 190 | onMounted(async () => { |
| 170 | if (url.value) { | 191 | if (url.value) { |
| 171 | init() | 192 | init() |
| 172 | } | 193 | } |
| 173 | window.addEventListener('resize', handleResize); | 194 | window.addEventListener('resize', handleResize); |
| 195 | isMounted.value = true | ||
| 174 | // handelBing1() | 196 | // handelBing1() |
| 175 | // handelZhu1() | 197 | // handelZhu1() |
| 176 | // handelGetYS001() | 198 | // handelGetYS001() |
| ... | @@ -188,6 +210,8 @@ onMounted(async () => { | ... | @@ -188,6 +210,8 @@ onMounted(async () => { |
| 188 | 210 | ||
| 189 | const init = () => { | 211 | const init = () => { |
| 190 | clear() | 212 | clear() |
| 213 | obj.value["SELECTDATE"] = hDate | ||
| 214 | obj.value["BASE"] = sBase | ||
| 191 | if (!intervalA) { | 215 | if (!intervalA) { |
| 192 | handelGetYS001() | 216 | handelGetYS001() |
| 193 | handelGetYS002() | 217 | handelGetYS002() |
| ... | @@ -195,7 +219,7 @@ const init = () => { | ... | @@ -195,7 +219,7 @@ const init = () => { |
| 195 | handelGetYS004() | 219 | handelGetYS004() |
| 196 | handelGetYS005() | 220 | handelGetYS005() |
| 197 | } | 221 | } |
| 198 | intervalA = setInterval(getdata, 1000 * 60 * 60); | 222 | intervalA = setInterval(getdata(), 1000 * 60 * 60); |
| 199 | } | 223 | } |
| 200 | 224 | ||
| 201 | async function handelGetYS001() { | 225 | async function handelGetYS001() { |
| ... | @@ -235,7 +259,7 @@ async function handelGetYS003() { | ... | @@ -235,7 +259,7 @@ async function handelGetYS003() { |
| 235 | } | 259 | } |
| 236 | } | 260 | } |
| 237 | 261 | ||
| 238 | let nowYearString = new Date().getFullYear() | 262 | let nowYearString = ref(parseInt(hDate.value.substring(0,4))) |
| 239 | async function handelGetYS004() { | 263 | async function handelGetYS004() { |
| 240 | const res = await getYS004(url.value, obj.value) | 264 | const res = await getYS004(url.value, obj.value) |
| 241 | let arrList = res.data.blockgroup || [] | 265 | let arrList = res.data.blockgroup || [] |
| ... | @@ -354,7 +378,7 @@ async function handelGetYS004() { | ... | @@ -354,7 +378,7 @@ async function handelGetYS004() { |
| 354 | } else { | 378 | } else { |
| 355 | let nowYear=[],lastYear=[] | 379 | let nowYear=[],lastYear=[] |
| 356 | for (const v of arrList[0].list) { | 380 | for (const v of arrList[0].list) { |
| 357 | if (v.YEAR == nowYearString) { | 381 | if (v.YEAR == nowYearString.value) { |
| 358 | nowYear.push(v) | 382 | nowYear.push(v) |
| 359 | } else { | 383 | } else { |
| 360 | lastYear.push(v) | 384 | lastYear.push(v) |
| ... | @@ -400,14 +424,14 @@ async function handelGetYS004() { | ... | @@ -400,14 +424,14 @@ async function handelGetYS004() { |
| 400 | value: v.DSO, | 424 | value: v.DSO, |
| 401 | day: v.DAYS, | 425 | day: v.DAYS, |
| 402 | itemStyle: styleItem2, | 426 | itemStyle: styleItem2, |
| 403 | name: nowYearString, | 427 | name: nowYearString.value, |
| 404 | type: v.type | 428 | type: v.type |
| 405 | })) | 429 | })) |
| 406 | let dataList2 = lastYearArr.map(v => ({ | 430 | let dataList2 = lastYearArr.map(v => ({ |
| 407 | value: v.DSO, | 431 | value: v.DSO, |
| 408 | day: v.DAYS, | 432 | day: v.DAYS, |
| 409 | itemStyle: styleItem1, | 433 | itemStyle: styleItem1, |
| 410 | name: nowYearString-1, | 434 | name: nowYearString.value-1, |
| 411 | type: v.type | 435 | type: v.type |
| 412 | })) | 436 | })) |
| 413 | let arr1 = [] | 437 | let arr1 = [] |
| ... | @@ -1932,7 +1956,7 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => { | ... | @@ -1932,7 +1956,7 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => { |
| 1932 | ], | 1956 | ], |
| 1933 | series: [ | 1957 | series: [ |
| 1934 | { | 1958 | { |
| 1935 | name: nowYearString, | 1959 | name: nowYearString.value, |
| 1936 | type: 'bar', | 1960 | type: 'bar', |
| 1937 | barGap: 0, | 1961 | barGap: 0, |
| 1938 | data:dataList1, | 1962 | data:dataList1, |
| ... | @@ -1956,7 +1980,7 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => { | ... | @@ -1956,7 +1980,7 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => { |
| 1956 | barWidth: '30%', | 1980 | barWidth: '30%', |
| 1957 | }, | 1981 | }, |
| 1958 | { | 1982 | { |
| 1959 | name: nowYearString-1, | 1983 | name: nowYearString.value-1, |
| 1960 | type: 'bar', | 1984 | type: 'bar', |
| 1961 | barGap: 0, | 1985 | barGap: 0, |
| 1962 | emphasis: { | 1986 | emphasis: { | ... | ... |
| ... | @@ -78,7 +78,7 @@ | ... | @@ -78,7 +78,7 @@ |
| 78 | </template> | 78 | </template> |
| 79 | 79 | ||
| 80 | <script setup> | 80 | <script setup> |
| 81 | import {onMounted, ref, onUnmounted, computed} from 'vue' | 81 | import {onMounted, ref, onUnmounted, computed, watch} from 'vue' |
| 82 | import {autoToolTip} from "@/plugins/auto-toolTip"; | 82 | import {autoToolTip} from "@/plugins/auto-toolTip"; |
| 83 | import * as echarts from "echarts"; | 83 | import * as echarts from "echarts"; |
| 84 | import * as api from "@/apiPc/common" | 84 | import * as api from "@/apiPc/common" |
| ... | @@ -94,11 +94,33 @@ const props = defineProps({ | ... | @@ -94,11 +94,33 @@ const props = defineProps({ |
| 94 | type: Object, | 94 | type: Object, |
| 95 | default: () => { | 95 | default: () => { |
| 96 | } | 96 | } |
| 97 | } | 97 | }, |
| 98 | historyDate:{ | ||
| 99 | type: String, | ||
| 100 | default: undefined | ||
| 101 | }, | ||
| 102 | sBase:{ | ||
| 103 | type: String, | ||
| 104 | default: undefined | ||
| 105 | }, | ||
| 98 | }) | 106 | }) |
| 99 | 107 | ||
| 100 | const url = computed(() => props.url) | 108 | const url = computed(() => props.url) |
| 101 | const obj = computed(() => props.obj) | 109 | const obj = computed(() => props.obj) |
| 110 | const hDate = computed(() => props.historyDate) | ||
| 111 | const sBase = computed(() => props.sBase) | ||
| 112 | watch(() => props.historyDate,(newVal) => { | ||
| 113 | if (isMounted.value) { | ||
| 114 | Year1.value = parseInt(newVal.substring(0,4)) - 1 | ||
| 115 | Year2.value = parseInt(newVal.substring(0,4)) | ||
| 116 | init() | ||
| 117 | } | ||
| 118 | }) | ||
| 119 | watch(() => props.sBase,(newVal) => { | ||
| 120 | if (isMounted.value) { | ||
| 121 | init() | ||
| 122 | } | ||
| 123 | }) | ||
| 102 | 124 | ||
| 103 | const zhuRef = ref(null) | 125 | const zhuRef = ref(null) |
| 104 | const lineRef = ref(null) | 126 | const lineRef = ref(null) |
| ... | @@ -129,23 +151,29 @@ const h4 = ref([]) | ... | @@ -129,23 +151,29 @@ const h4 = ref([]) |
| 129 | const h5 = ref([]) | 151 | const h5 = ref([]) |
| 130 | const h6 = ref([]) | 152 | const h6 = ref([]) |
| 131 | 153 | ||
| 132 | const Year1 = dayjs().year() - 1 | 154 | // const Year1 = dayjs().year() - 1 |
| 133 | const Year2 = dayjs().year() | 155 | // const Year2 = dayjs().year() |
| 156 | |||
| 157 | let Year1 = ref(parseInt(hDate.value.substring(0,4)) - 1) | ||
| 158 | let Year2 = ref(parseInt(hDate.value.substring(0,4))) | ||
| 159 | |||
| 134 | 160 | ||
| 135 | const legend1 = [`${Year1}待收款`, `${Year1}收费单待签`, `${Year1}合同待签`] | 161 | const legend1 = [`${Year1.value}待收款`, `${Year1.value}收费单待签`, `${Year1.value}合同待签`] |
| 136 | const legend2 = [`${Year2}待收款`, `${Year2}收费单待签`, `${Year2}合同待签`] | 162 | const legend2 = [`${Year2.value}待收款`, `${Year2.value}收费单待签`, `${Year2.value}合同待签`] |
| 137 | 163 | ||
| 138 | 164 | ||
| 139 | console.log(Year1, Year2) | 165 | console.log(Year1.value, Year2.value) |
| 140 | let chartA | 166 | let chartA |
| 141 | let chartB | 167 | let chartB |
| 142 | let chartC | 168 | let chartC |
| 143 | 169 | ||
| 144 | let intervalA = null; | 170 | let intervalA = null; |
| 171 | const isMounted = ref(false) | ||
| 145 | 172 | ||
| 146 | onMounted(() => { | 173 | onMounted(() => { |
| 147 | window.addEventListener('resize', handleResize); | 174 | window.addEventListener('resize', handleResize); |
| 148 | if (url.value) init() | 175 | if (url.value) init() |
| 176 | isMounted.value = true | ||
| 149 | // handelGetYS006() | 177 | // handelGetYS006() |
| 150 | // setA() | 178 | // setA() |
| 151 | // setB() | 179 | // setB() |
| ... | @@ -153,6 +181,8 @@ onMounted(() => { | ... | @@ -153,6 +181,8 @@ onMounted(() => { |
| 153 | }) | 181 | }) |
| 154 | 182 | ||
| 155 | async function handelGetYS006() { | 183 | async function handelGetYS006() { |
| 184 | obj.value["SELECTDATE"] = hDate | ||
| 185 | obj.value["BASE"] = sBase | ||
| 156 | const res = await getYS006(url.value, obj.value) | 186 | const res = await getYS006(url.value, obj.value) |
| 157 | list.value = res.data.baselist | 187 | list.value = res.data.baselist |
| 158 | set1.value = [] | 188 | set1.value = [] |
| ... | @@ -717,7 +747,7 @@ const setB = (arr1, arr2, arr3, arr4) => { | ... | @@ -717,7 +747,7 @@ const setB = (arr1, arr2, arr3, arr4) => { |
| 717 | ], | 747 | ], |
| 718 | series: [ | 748 | series: [ |
| 719 | { | 749 | { |
| 720 | name: `${Year2}应收余额`, | 750 | name: `${Year2.value}应收余额`, |
| 721 | type: 'bar', | 751 | type: 'bar', |
| 722 | barGap: 0, | 752 | barGap: 0, |
| 723 | emphasis: { | 753 | emphasis: { |
| ... | @@ -740,7 +770,7 @@ const setB = (arr1, arr2, arr3, arr4) => { | ... | @@ -740,7 +770,7 @@ const setB = (arr1, arr2, arr3, arr4) => { |
| 740 | barWidth: '15%' | 770 | barWidth: '15%' |
| 741 | }, | 771 | }, |
| 742 | { | 772 | { |
| 743 | name: `${Year1}应收余额`, | 773 | name: `${Year1.value}应收余额`, |
| 744 | type: 'bar', | 774 | type: 'bar', |
| 745 | emphasis: { | 775 | emphasis: { |
| 746 | focus: 'series' | 776 | focus: 'series' |
| ... | @@ -763,7 +793,7 @@ const setB = (arr1, arr2, arr3, arr4) => { | ... | @@ -763,7 +793,7 @@ const setB = (arr1, arr2, arr3, arr4) => { |
| 763 | barWidth: '15%' | 793 | barWidth: '15%' |
| 764 | }, | 794 | }, |
| 765 | { | 795 | { |
| 766 | name: `${Year2}收入`, | 796 | name: `${Year2.value}收入`, |
| 767 | type: 'bar', | 797 | type: 'bar', |
| 768 | emphasis: { | 798 | emphasis: { |
| 769 | focus: 'series' | 799 | focus: 'series' |
| ... | @@ -785,7 +815,7 @@ const setB = (arr1, arr2, arr3, arr4) => { | ... | @@ -785,7 +815,7 @@ const setB = (arr1, arr2, arr3, arr4) => { |
| 785 | barWidth: '15%' | 815 | barWidth: '15%' |
| 786 | }, | 816 | }, |
| 787 | { | 817 | { |
| 788 | name: `${Year1}收入`, | 818 | name: `${Year1.value}收入`, |
| 789 | type: 'bar', | 819 | type: 'bar', |
| 790 | emphasis: { | 820 | emphasis: { |
| 791 | focus: 'series' | 821 | focus: 'series' |
| ... | @@ -930,7 +960,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { | ... | @@ -930,7 +960,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { |
| 930 | ], | 960 | ], |
| 931 | series: [ | 961 | series: [ |
| 932 | { | 962 | { |
| 933 | name: `${Year1}待收款`, | 963 | name: `${Year1.value}待收款`, |
| 934 | type: 'bar', | 964 | type: 'bar', |
| 935 | stack: 'Ad', | 965 | stack: 'Ad', |
| 936 | barGap: 0, | 966 | barGap: 0, |
| ... | @@ -952,7 +982,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { | ... | @@ -952,7 +982,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { |
| 952 | barWidth: '30%' | 982 | barWidth: '30%' |
| 953 | }, | 983 | }, |
| 954 | { | 984 | { |
| 955 | name: `${Year1}收费单待签`, | 985 | name: `${Year1.value}收费单待签`, |
| 956 | type: 'bar', | 986 | type: 'bar', |
| 957 | stack: 'Ad', | 987 | stack: 'Ad', |
| 958 | barGap: 0, | 988 | barGap: 0, |
| ... | @@ -974,7 +1004,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { | ... | @@ -974,7 +1004,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { |
| 974 | barWidth: '30%' | 1004 | barWidth: '30%' |
| 975 | }, | 1005 | }, |
| 976 | { | 1006 | { |
| 977 | name: `${Year1}合同待签`, | 1007 | name: `${Year1.value}合同待签`, |
| 978 | type: 'bar', | 1008 | type: 'bar', |
| 979 | stack: 'Ad', | 1009 | stack: 'Ad', |
| 980 | barGap: 0, | 1010 | barGap: 0, |
| ... | @@ -997,7 +1027,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { | ... | @@ -997,7 +1027,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { |
| 997 | }, | 1027 | }, |
| 998 | 1028 | ||
| 999 | { | 1029 | { |
| 1000 | name: `${Year2}待收款`, | 1030 | name: `${Year2.value}待收款`, |
| 1001 | type: 'bar', | 1031 | type: 'bar', |
| 1002 | stack: 'Ad2', | 1032 | stack: 'Ad2', |
| 1003 | barGap: 0, | 1033 | barGap: 0, |
| ... | @@ -1019,7 +1049,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { | ... | @@ -1019,7 +1049,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { |
| 1019 | barWidth: '30%' | 1049 | barWidth: '30%' |
| 1020 | }, | 1050 | }, |
| 1021 | { | 1051 | { |
| 1022 | name: `${Year2}收费单待签`, | 1052 | name: `${Year2.value}收费单待签`, |
| 1023 | type: 'bar', | 1053 | type: 'bar', |
| 1024 | barGap: 0, | 1054 | barGap: 0, |
| 1025 | stack: 'Ad2', | 1055 | stack: 'Ad2', |
| ... | @@ -1047,7 +1077,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { | ... | @@ -1047,7 +1077,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { |
| 1047 | barWidth: '30%' | 1077 | barWidth: '30%' |
| 1048 | }, | 1078 | }, |
| 1049 | { | 1079 | { |
| 1050 | name: `${Year2}合同待签`, | 1080 | name: `${Year2.value}合同待签`, |
| 1051 | type: 'bar', | 1081 | type: 'bar', |
| 1052 | stack: 'Ad2', | 1082 | stack: 'Ad2', |
| 1053 | barGap: 0, | 1083 | barGap: 0, | ... | ... |
| ... | @@ -54,13 +54,29 @@ | ... | @@ -54,13 +54,29 @@ |
| 54 | 54 | ||
| 55 | <div class="chartCard mt30"> | 55 | <div class="chartCard mt30"> |
| 56 | <div class="title">应收账期</div> | 56 | <div class="title">应收账期</div> |
| 57 | <!-- <div class="po_right" style="justify-content: end;">--> | ||
| 58 | <!-- <div class="itemBox" v-if="myType">--> | ||
| 59 | <!-- <el-select--> | ||
| 60 | <!-- v-model="list9Y"--> | ||
| 61 | <!-- class="select"--> | ||
| 62 | <!-- collapse-tags--> | ||
| 63 | <!-- multiple--> | ||
| 64 | <!-- placeholder="全部基地"--> | ||
| 65 | <!-- size="small"--> | ||
| 66 | <!-- @change="handelSelect9">--> | ||
| 67 | <!-- <el-option--> | ||
| 68 | <!-- v-for="(val,i) in list9"--> | ||
| 69 | <!-- :key="i" :label="val.BASEJC" :value="val.BASEJC"/>--> | ||
| 70 | <!-- </el-select>--> | ||
| 71 | <!-- </div>--> | ||
| 72 | <!-- </div>--> | ||
| 57 | <div ref="overdueRef" style="width: 100%; height: 24vh;"></div> | 73 | <div ref="overdueRef" style="width: 100%; height: 24vh;"></div> |
| 58 | </div> | 74 | </div> |
| 59 | </div> | 75 | </div> |
| 60 | </template> | 76 | </template> |
| 61 | 77 | ||
| 62 | <script setup> | 78 | <script setup> |
| 63 | import {onMounted, onUnmounted, computed, ref} from 'vue' | 79 | import {onMounted, onUnmounted, computed, ref, watch} from 'vue' |
| 64 | import {getYS007, getYS008, getYS009} from '@/api/server.js' | 80 | import {getYS007, getYS008, getYS009} from '@/api/server.js' |
| 65 | import {autoToolTip} from "@/plugins/auto-toolTip"; | 81 | import {autoToolTip} from "@/plugins/auto-toolTip"; |
| 66 | import * as echarts from "echarts"; | 82 | import * as echarts from "echarts"; |
| ... | @@ -79,11 +95,33 @@ const props = defineProps({ | ... | @@ -79,11 +95,33 @@ const props = defineProps({ |
| 79 | type: { | 95 | type: { |
| 80 | type: Boolean, | 96 | type: Boolean, |
| 81 | default: false | 97 | default: false |
| 82 | } | 98 | }, |
| 99 | historyDate: { | ||
| 100 | type: String, | ||
| 101 | default: undefined | ||
| 102 | }, | ||
| 103 | sBase:{ | ||
| 104 | type: String, | ||
| 105 | default: undefined | ||
| 106 | }, | ||
| 83 | }) | 107 | }) |
| 84 | 108 | ||
| 85 | const url = computed(() => props.url) | 109 | const url = computed(() => props.url) |
| 86 | const obj = computed(() => props.obj) | 110 | const obj = computed(() => props.obj) |
| 111 | const hDate = computed(() => props.historyDate) | ||
| 112 | const sBase = computed(() => props.sBase) | ||
| 113 | watch(() => props.historyDate,(newVal) => { | ||
| 114 | if (isMounted.value) { | ||
| 115 | nowYear.value = parseInt(newVal.substring(0,4)) | ||
| 116 | init() | ||
| 117 | } | ||
| 118 | |||
| 119 | }) | ||
| 120 | watch(() => props.sBase,(newVal) => { | ||
| 121 | if (isMounted.value) { | ||
| 122 | init() | ||
| 123 | } | ||
| 124 | }) | ||
| 87 | const myType = computed(() => props.type) | 125 | const myType = computed(() => props.type) |
| 88 | const zhuRef = ref(null) | 126 | const zhuRef = ref(null) |
| 89 | const lineRef = ref(null) | 127 | const lineRef = ref(null) |
| ... | @@ -187,11 +225,12 @@ const itemStyleList = ref([ | ... | @@ -187,11 +225,12 @@ const itemStyleList = ref([ |
| 187 | ]) | 225 | ]) |
| 188 | 226 | ||
| 189 | const list9 = ref([]) | 227 | const list9 = ref([]) |
| 228 | const list9Y = ref([]) | ||
| 190 | const list8Y = ref([]) | 229 | const list8Y = ref([]) |
| 191 | const type8 = ref(0) | 230 | const type8 = ref(0) |
| 192 | const month8 = ref([]) | 231 | const month8 = ref([]) |
| 193 | const year8 = ref([]) | 232 | const year8 = ref([]) |
| 194 | const nowYear = new Date().getFullYear() | 233 | let nowYear = ref(parseInt(hDate.value.substring(0,4))) |
| 195 | const list8 = ref([ | 234 | const list8 = ref([ |
| 196 | { | 235 | { |
| 197 | BASE: '上海分公司1', | 236 | BASE: '上海分公司1', |
| ... | @@ -234,6 +273,7 @@ let chartA | ... | @@ -234,6 +273,7 @@ let chartA |
| 234 | let chartB | 273 | let chartB |
| 235 | let chartC | 274 | let chartC |
| 236 | let intervalA = null | 275 | let intervalA = null |
| 276 | const isMounted = ref(false) | ||
| 237 | 277 | ||
| 238 | let color1 = { | 278 | let color1 = { |
| 239 | color: { | 279 | color: { |
| ... | @@ -279,6 +319,7 @@ let color4 = { | ... | @@ -279,6 +319,7 @@ let color4 = { |
| 279 | onMounted(() => { | 319 | onMounted(() => { |
| 280 | if (url.value) init() | 320 | if (url.value) init() |
| 281 | window.addEventListener('resize', handleResize); | 321 | window.addEventListener('resize', handleResize); |
| 322 | isMounted.value = true | ||
| 282 | // handelGetYS007() | 323 | // handelGetYS007() |
| 283 | // handelGetYS008() | 324 | // handelGetYS008() |
| 284 | // handelGetYS009() | 325 | // handelGetYS009() |
| ... | @@ -286,12 +327,14 @@ onMounted(() => { | ... | @@ -286,12 +327,14 @@ onMounted(() => { |
| 286 | }) | 327 | }) |
| 287 | const init = () => { | 328 | const init = () => { |
| 288 | clear() | 329 | clear() |
| 330 | obj.value["SELECTDATE"] = hDate | ||
| 331 | obj.value["BASE"] = sBase | ||
| 289 | if (!intervalA) { | 332 | if (!intervalA) { |
| 290 | handelGetYS007() | 333 | handelGetYS007() |
| 291 | handelGetYS008() | 334 | handelGetYS008() |
| 292 | handelGetYS009() | 335 | handelGetYS009() |
| 293 | } | 336 | } |
| 294 | intervalA = setInterval(getdata, 1000 * 60 * 60); | 337 | intervalA = setInterval(getdata(), 1000 * 60 * 60); |
| 295 | } | 338 | } |
| 296 | 339 | ||
| 297 | async function handelGetYS007() { | 340 | async function handelGetYS007() { |
| ... | @@ -479,6 +522,7 @@ function handelType8() { | ... | @@ -479,6 +522,7 @@ function handelType8() { |
| 479 | async function handelGetYS009() { | 522 | async function handelGetYS009() { |
| 480 | const res = await getYS009(url.value, obj.value) | 523 | const res = await getYS009(url.value, obj.value) |
| 481 | list9.value = res.data.list | 524 | list9.value = res.data.list |
| 525 | list9Y.value = [] | ||
| 482 | let arrY = [] | 526 | let arrY = [] |
| 483 | let arr1 = [] | 527 | let arr1 = [] |
| 484 | let arr2 = [] | 528 | let arr2 = [] |
| ... | @@ -486,6 +530,7 @@ async function handelGetYS009() { | ... | @@ -486,6 +530,7 @@ async function handelGetYS009() { |
| 486 | 530 | ||
| 487 | if (myType.value) { | 531 | if (myType.value) { |
| 488 | for (const val of list9.value) { | 532 | for (const val of list9.value) { |
| 533 | list9Y.value.push(val.BASEJC) | ||
| 489 | arrY.push(val.BASEJC) | 534 | arrY.push(val.BASEJC) |
| 490 | arr1.push(Math.round(val.WKPCOSTONE / 10000)) | 535 | arr1.push(Math.round(val.WKPCOSTONE / 10000)) |
| 491 | arr2.push(Math.round(val.WKPCOSTTWO / 10000)) | 536 | arr2.push(Math.round(val.WKPCOSTTWO / 10000)) |
| ... | @@ -509,6 +554,29 @@ async function handelGetYS009() { | ... | @@ -509,6 +554,29 @@ async function handelGetYS009() { |
| 509 | setC(arrY, arr1, arr2, arr3) | 554 | setC(arrY, arr1, arr2, arr3) |
| 510 | } | 555 | } |
| 511 | 556 | ||
| 557 | function handelSelect9() { | ||
| 558 | let arr = list9Y.value.map(val => list9.value.find(item => item.BASEJC === val)); | ||
| 559 | list9Y.value = [] | ||
| 560 | console.log(arr) | ||
| 561 | let arrY = [] | ||
| 562 | let arr1 = [] | ||
| 563 | let arr2 = [] | ||
| 564 | let arr3 = [] | ||
| 565 | |||
| 566 | for (const val of arr) { | ||
| 567 | list9Y.value.push(val.BASEJC) | ||
| 568 | arrY.push(val.BASEJC) | ||
| 569 | arr1.push(Math.round(val.WKPCOSTONE / 10000)) | ||
| 570 | arr2.push(Math.round(val.WKPCOSTTWO / 10000)) | ||
| 571 | arr3.push({ | ||
| 572 | value: Math.round(val.WKPCOSTTHREE / 10000), | ||
| 573 | info: val.YQWELLINFO | ||
| 574 | }) | ||
| 575 | } | ||
| 576 | |||
| 577 | setC(arrY, arr1, arr2, arr3) | ||
| 578 | } | ||
| 579 | |||
| 512 | const getdata = () => { | 580 | const getdata = () => { |
| 513 | handelGetYS007() | 581 | handelGetYS007() |
| 514 | handelGetYS008() | 582 | handelGetYS008() |
| ... | @@ -518,6 +586,7 @@ const getdata = () => { | ... | @@ -518,6 +586,7 @@ const getdata = () => { |
| 518 | const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { | 586 | const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { |
| 519 | chartA = echarts.init(zhuRef.value) | 587 | chartA = echarts.init(zhuRef.value) |
| 520 | let option | 588 | let option |
| 589 | console.log(myType.value) | ||
| 521 | if (myType.value) { | 590 | if (myType.value) { |
| 522 | option = { | 591 | option = { |
| 523 | tooltip: { | 592 | tooltip: { |
| ... | @@ -1162,7 +1231,7 @@ const setB = (arrY, arr1, arr2) => { | ... | @@ -1162,7 +1231,7 @@ const setB = (arrY, arr1, arr2) => { |
| 1162 | }, | 1231 | }, |
| 1163 | series: [ | 1232 | series: [ |
| 1164 | { | 1233 | { |
| 1165 | name: nowYear, | 1234 | name: nowYear.value, |
| 1166 | type: 'bar', | 1235 | type: 'bar', |
| 1167 | label: { | 1236 | label: { |
| 1168 | show: false | 1237 | show: false |
| ... | @@ -1306,7 +1375,7 @@ const setB = (arrY, arr1, arr2) => { | ... | @@ -1306,7 +1375,7 @@ const setB = (arrY, arr1, arr2) => { |
| 1306 | 1375 | ||
| 1307 | }, | 1376 | }, |
| 1308 | { | 1377 | { |
| 1309 | name: nowYear-1, | 1378 | name: nowYear.value-1, |
| 1310 | type: 'bar', | 1379 | type: 'bar', |
| 1311 | label: { | 1380 | label: { |
| 1312 | show: false | 1381 | show: false | ... | ... |
-
Please register or sign in to post a comment