Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
65e7acce by zrj
Options

daping quan

1 parent bd2c0b7e
Inline Side-by-side
Showing 6 changed files with 282 additions and 57 deletions
src/viewsPc/home.vue
<template>
<div class="main">
<!-- <div style="position: absolute;top: 23px;right: 20px">-->
<!-- <el-date-picker-->
<!-- v-model="nowDate"-->
<!-- type="date"-->
<!-- placeholder="Pick a day"-->
<!-- :size="size"-->
<!-- ></el-date-picker>-->
<!-- </div>-->
<div class="basePick_bg" v-if="obj.CHANGEBASE=='是'">
<el-select
v-model="selectBase"
class="select"
collapse-tags
placeholder="全部基地"
size="small"
@change="setType"
>
<el-option
v-for="(val,i) in baseList" :key="i" :label="val" :value="val"/>
</el-select>
</div>
<div class="datePick_bg" style="position: absolute;top: 32px;right: 18px;height: 28px">
<el-date-picker
v-model="nowDate"
type="month"
placeholder="历史回溯"
:size="size"
style="width: 100%"
value-format="YYYY-MM"
></el-date-picker>
</div>
<el-row class="w100">
<el-col v-if="obj.IFBASE" :span="8">
<left-page :obj="obj" :type="type=='否'" :url="result"/>
<el-col v-if="!isLoad" :span="8">
<left-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/>
</el-col>
<el-col v-if="obj.IFBASE" :span="8">
<center-page :obj="obj" :isLeader="isLeader" :type="type=='否'" :url="result"/>
<el-col v-if="!isLoad" :span="8">
<center-page :obj="obj" :isLeader="isLeader" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/>
</el-col>
<el-col v-if="obj.IFBASE" :span="8">
<right-page :obj="obj" :type="type=='否'" :url="result"/>
<el-col v-if="!isLoad" :span="8">
<right-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/>
</el-col>
</el-row>
</div>
......@@ -28,17 +43,24 @@ import LeftPage from "@/viewsPc/vip/leftPage"
import CenterPage from "@/viewsPc/vip/centerPage"
import RightPage from "@/viewsPc/vip/rightPage"
import {getYS000} from '@/api/server.js'
import {ref, onMounted, getCurrentInstance} from 'vue'
import {ref, onMounted, getCurrentInstance, nextTick} from 'vue'
import {useRouter} from 'vue-router'
const type = ref('是')
const type = ref(true)
let isLoad = ref(false)
const url = ref()
const obj = ref({})
const result = ref()
const router = useRouter()
const nowDate = new Date()
const now = new Date()
const year = now.getFullYear() // 获取年份（4位数）
const month = now.getMonth() + 1 // 获取月份（0-11，需要+1）
const formatMonth = (month) => (month < 10 ? `0${month}` : month)
const nowDate = ref(`${year}-${formatMonth(month)}`)
let selectBase = ref("总部")
let baseList = ref()
let isLeader = ref(false)
// url.value = 'http://192.168.1.152:8899/login/sid=65075093-0520-444e-af42-d277c4f366cb#/'
// url.value = 'http://192.168.1.152:8899/login/sid=36c62778-f35a-4285-a279-08aa2b8a1fa8#/'
url.value = window.location.href
result.value = url.value?.split('=')[1]?.split('#')[0];
......@@ -48,8 +70,6 @@ function validateEmail(email) {
}
onMounted(() => {
console.log(url.value)
console.log(result.value)
if (result.value) {
handelGetYS000()
isLeader.value = validateEmail(result.value)
......@@ -64,20 +84,96 @@ onMounted(() => {
async function handelGetYS000() {
const res = await getYS000(result.value)
type.value = res.data?.IFBASE || '是'
let typeStr = res.data?.IFBASE || '是'
type.value = typeStr == '否'
obj.value = res.data || {}
selectBase.value = res.data.BASE
baseList.value = res.data.list
}
function setType(){
isLoad.value = true
nextTick(() => {
if (selectBase.value !== '总部') {
type.value = false
} else {
type.value = true
}
isLoad.value = false
})
}
</script>
<style lang="scss" scoped>
.basePick_bg {
position: absolute;
top: 32px;
right: 180px;
height: 28px;
width: 155px;
background: #0B2239;
//box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27);
border-radius: 5px;
border: 1px solid #12BFFF;
.select {
background-color: transparent;
:deep(.el-select__wrapper) {
background-color: transparent;
box-shadow: 0 0 0 0;
border: none;
}
/* 选项样式 */
:deep(.el-select-dropdown__item) {
color: white !important;
background-color: transparent !important;
}
/* 鼠标悬停效果 */
:deep(.el-select-dropdown__item.hover) {
background-color: rgba(255, 255, 255, 0.1) !important;
}
/* placeholder */
:deep(.el-select__placeholder) {
font-family: PingFang SC, serif;
font-weight: 500;
color: #fff;
//text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
//background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
background-color: rgb(33, 123, 188, .1); /* 背景色 */
-webkit-background-clip: text;
//-webkit-text-fill-color: transparent
}
:deep(.el-tag--info) {
background-color: rgb(33, 123, 188, .1); /* 背景色 */
border-color: #1c81a6; /* 边框色 */
color: #fff; /* 文字颜色 */
}
:deep(.el-icon ) {
color: #fff;
}
}
}
.datePick_bg {
background: url("@/assets/image/datePicker.png") no-repeat center;
background-size: 100% 100%;
width: 155px;
}
::v-deep .el-date-editor .el-input__inner {
background-color: transparent !important;
border-color: #80ffff;
box-shadow: none;
height: 30px;
color: #fff;
padding: 0 0 2px 10px;
}
::v-deep .el-input__wrapper {
background: transparent;
......@@ -86,11 +182,17 @@ async function handelGetYS000() {
}
/* 隐藏默认图标 */
::v-deep .el-date-editor .el-input__prefix {
display: none;
background: url("@/assets/image/rili.png") no-repeat center;
background-size: 100% 100%;
width: 20px;
height: 20px;
position: absolute;
right: 10px;
}
/* 强制右侧显示图标 */
::v-deep .el-date-editor .el-input__suffix {
right: 10px !important;
::v-deep .el-date-editor .el-input__suffix .clear-icon{
display: inline-block !important;
padding: 0 40px 0 0;
}
</style>
......
src/viewsPc/vip/centerPage.vue
......@@ -98,7 +98,7 @@ import {autoToolTip} from "@/plugins/auto-toolTip";
import ScrollingData from './scrollingData.vue'
import * as echarts from "echarts";
import * as api from "@/apiPc/common"
import {onMounted, ref, computed, onUnmounted, getCurrentInstance, nextTick} from 'vue'
import {onMounted, ref, computed, onUnmounted, getCurrentInstance, nextTick, watch} from 'vue'
import {dayjs} from 'element-plus'
import {getYS000, getYS001, getYS002, getYS003, getYS004, getYS005} from '@/api/server.js'
import Information from "/@/viewsPc/vip/components/information.vue";
......@@ -122,12 +122,32 @@ const props = defineProps({
type: Object,
default: () => {
}
}
},
historyDate: {
type: String,
default: undefined
},
sBase:{
type: String,
default: undefined
},
})
const url = computed(() => props.url)
const obj = computed(() => props.obj)
const hDate = computed(() => props.historyDate)
const sBase = computed(() => props.sBase)
watch(() => props.historyDate,(newVal) => {
if (isMounted.value) {
nowYearString.value = parseInt(newVal.substring(0,4))
init()
}
})
watch(() => props.sBase,(newVal) => {
if (isMounted.value) {
init()
}
})
const isLeader = computed(() => props.isLeader)
const myType = computed(() => props.type)
const zhuRef1 = ref(null)
......@@ -165,12 +185,14 @@ const list = ref([])
let total = 0
let intervalA = null
const isMounted = ref(false)
onMounted(async () => {
if (url.value) {
init()
}
window.addEventListener('resize', handleResize);
isMounted.value = true
// handelBing1()
// handelZhu1()
// handelGetYS001()
......@@ -188,6 +210,8 @@ onMounted(async () => {
const init = () => {
clear()
obj.value["SELECTDATE"] = hDate
obj.value["BASE"] = sBase
if (!intervalA) {
handelGetYS001()
handelGetYS002()
......@@ -195,7 +219,7 @@ const init = () => {
handelGetYS004()
handelGetYS005()
}
intervalA = setInterval(getdata, 1000 * 60 * 60);
intervalA = setInterval(getdata(), 1000 * 60 * 60);
}
async function handelGetYS001() {
......@@ -235,7 +259,7 @@ async function handelGetYS003() {
}
}
let nowYearString = new Date().getFullYear()
let nowYearString = ref(parseInt(hDate.value.substring(0,4)))
async function handelGetYS004() {
const res = await getYS004(url.value, obj.value)
let arrList = res.data.blockgroup || []
......@@ -354,7 +378,7 @@ async function handelGetYS004() {
} else {
let nowYear=[],lastYear=[]
for (const v of arrList[0].list) {
if (v.YEAR == nowYearString) {
if (v.YEAR == nowYearString.value) {
nowYear.push(v)
} else {
lastYear.push(v)
......@@ -400,14 +424,14 @@ async function handelGetYS004() {
value: v.DSO,
day: v.DAYS,
itemStyle: styleItem2,
name: nowYearString,
name: nowYearString.value,
type: v.type
}))
let dataList2 = lastYearArr.map(v => ({
value: v.DSO,
day: v.DAYS,
itemStyle: styleItem1,
name: nowYearString-1,
name: nowYearString.value-1,
type: v.type
}))
let arr1 = []
......@@ -1932,7 +1956,7 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => {
],
series: [
{
name: nowYearString,
name: nowYearString.value,
type: 'bar',
barGap: 0,
data:dataList1,
......@@ -1956,7 +1980,7 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => {
barWidth: '30%',
},
{
name: nowYearString-1,
name: nowYearString.value-1,
type: 'bar',
barGap: 0,
emphasis: {
......
src/viewsPc/vip/leftPage.vue
......@@ -78,7 +78,7 @@
</template>
<script setup>
import {onMounted, ref, onUnmounted, computed} from 'vue'
import {onMounted, ref, onUnmounted, computed, watch} from 'vue'
import {autoToolTip} from "@/plugins/auto-toolTip";
import * as echarts from "echarts";
import * as api from "@/apiPc/common"
......@@ -94,11 +94,33 @@ const props = defineProps({
type: Object,
default: () => {
}
}
},
historyDate:{
type: String,
default: undefined
},
sBase:{
type: String,
default: undefined
},
})
const url = computed(() => props.url)
const obj = computed(() => props.obj)
const hDate = computed(() => props.historyDate)
const sBase = computed(() => props.sBase)
watch(() => props.historyDate,(newVal) => {
if (isMounted.value) {
Year1.value = parseInt(newVal.substring(0,4)) - 1
Year2.value = parseInt(newVal.substring(0,4))
init()
}
})
watch(() => props.sBase,(newVal) => {
if (isMounted.value) {
init()
}
})
const zhuRef = ref(null)
const lineRef = ref(null)
......@@ -129,23 +151,29 @@ const h4 = ref([])
const h5 = ref([])
const h6 = ref([])
const Year1 = dayjs().year() - 1
const Year2 = dayjs().year()
// const Year1 = dayjs().year() - 1
// const Year2 = dayjs().year()
let Year1 = ref(parseInt(hDate.value.substring(0,4)) - 1)
let Year2 = ref(parseInt(hDate.value.substring(0,4)))
const legend1 = [`${Year1}待收款`, `${Year1}收费单待签`, `${Year1}合同待签`]
const legend2 = [`${Year2}待收款`, `${Year2}收费单待签`, `${Year2}合同待签`]
const legend1 = [`${Year1.value}待收款`, `${Year1.value}收费单待签`, `${Year1.value}合同待签`]
const legend2 = [`${Year2.value}待收款`, `${Year2.value}收费单待签`, `${Year2.value}合同待签`]
console.log(Year1, Year2)
console.log(Year1.value, Year2.value)
let chartA
let chartB
let chartC
let intervalA = null;
const isMounted = ref(false)
onMounted(() => {
window.addEventListener('resize', handleResize);
if (url.value) init()
isMounted.value = true
// handelGetYS006()
// setA()
// setB()
......@@ -153,6 +181,8 @@ onMounted(() => {
})
async function handelGetYS006() {
obj.value["SELECTDATE"] = hDate
obj.value["BASE"] = sBase
const res = await getYS006(url.value, obj.value)
list.value = res.data.baselist
set1.value = []
......@@ -717,7 +747,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
],
series: [
{
name: `${Year2}应收余额`,
name: `${Year2.value}应收余额`,
type: 'bar',
barGap: 0,
emphasis: {
......@@ -740,7 +770,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
barWidth: '15%'
},
{
name: `${Year1}应收余额`,
name: `${Year1.value}应收余额`,
type: 'bar',
emphasis: {
focus: 'series'
......@@ -763,7 +793,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
barWidth: '15%'
},
{
name: `${Year2}收入`,
name: `${Year2.value}收入`,
type: 'bar',
emphasis: {
focus: 'series'
......@@ -785,7 +815,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
barWidth: '15%'
},
{
name: `${Year1}收入`,
name: `${Year1.value}收入`,
type: 'bar',
emphasis: {
focus: 'series'
......@@ -930,7 +960,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
],
series: [
{
name: `${Year1}待收款`,
name: `${Year1.value}待收款`,
type: 'bar',
stack: 'Ad',
barGap: 0,
......@@ -952,7 +982,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
barWidth: '30%'
},
{
name: `${Year1}收费单待签`,
name: `${Year1.value}收费单待签`,
type: 'bar',
stack: 'Ad',
barGap: 0,
......@@ -974,7 +1004,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
barWidth: '30%'
},
{
name: `${Year1}合同待签`,
name: `${Year1.value}合同待签`,
type: 'bar',
stack: 'Ad',
barGap: 0,
......@@ -997,7 +1027,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
},
{
name: `${Year2}待收款`,
name: `${Year2.value}待收款`,
type: 'bar',
stack: 'Ad2',
barGap: 0,
......@@ -1019,7 +1049,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
barWidth: '30%'
},
{
name: `${Year2}收费单待签`,
name: `${Year2.value}收费单待签`,
type: 'bar',
barGap: 0,
stack: 'Ad2',
......@@ -1047,7 +1077,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
barWidth: '30%'
},
{
name: `${Year2}合同待签`,
name: `${Year2.value}合同待签`,
type: 'bar',
stack: 'Ad2',
barGap: 0,
......
src/viewsPc/vip/rightPage.vue
......@@ -54,13 +54,29 @@
<div class="chartCard mt30">
<div class="title">应收账期</div>
<!-- <div class="po_right" style="justify-content: end;">-->
<!-- <div class="itemBox" v-if="myType">-->
<!-- <el-select-->
<!-- v-model="list9Y"-->
<!-- class="select"-->
<!-- collapse-tags-->
<!-- multiple-->
<!-- placeholder="全部基地"-->
<!-- size="small"-->
<!-- @change="handelSelect9">-->
<!-- <el-option-->
<!-- v-for="(val,i) in list9"-->
<!-- :key="i" :label="val.BASEJC" :value="val.BASEJC"/>-->
<!-- </el-select>-->
<!-- </div>-->
<!-- </div>-->
<div ref="overdueRef" style="width: 100%; height: 24vh;"></div>
</div>
</div>
</template>
<script setup>
import {onMounted, onUnmounted, computed, ref} from 'vue'
import {onMounted, onUnmounted, computed, ref, watch} from 'vue'
import {getYS007, getYS008, getYS009} from '@/api/server.js'
import {autoToolTip} from "@/plugins/auto-toolTip";
import * as echarts from "echarts";
......@@ -79,11 +95,33 @@ const props = defineProps({
type: {
type: Boolean,
default: false
}
},
historyDate: {
type: String,
default: undefined
},
sBase:{
type: String,
default: undefined
},
})
const url = computed(() => props.url)
const obj = computed(() => props.obj)
const hDate = computed(() => props.historyDate)
const sBase = computed(() => props.sBase)
watch(() => props.historyDate,(newVal) => {
if (isMounted.value) {
nowYear.value = parseInt(newVal.substring(0,4))
init()
}
})
watch(() => props.sBase,(newVal) => {
if (isMounted.value) {
init()
}
})
const myType = computed(() => props.type)
const zhuRef = ref(null)
const lineRef = ref(null)
......@@ -187,11 +225,12 @@ const itemStyleList = ref([
])
const list9 = ref([])
const list9Y = ref([])
const list8Y = ref([])
const type8 = ref(0)
const month8 = ref([])
const year8 = ref([])
const nowYear = new Date().getFullYear()
let nowYear = ref(parseInt(hDate.value.substring(0,4)))
const list8 = ref([
{
BASE: '上海分公司1',
......@@ -234,6 +273,7 @@ let chartA
let chartB
let chartC
let intervalA = null
const isMounted = ref(false)
let color1 = {
color: {
......@@ -279,6 +319,7 @@ let color4 = {
onMounted(() => {
if (url.value) init()
window.addEventListener('resize', handleResize);
isMounted.value = true
// handelGetYS007()
// handelGetYS008()
// handelGetYS009()
......@@ -286,12 +327,14 @@ onMounted(() => {
})
const init = () => {
clear()
obj.value["SELECTDATE"] = hDate
obj.value["BASE"] = sBase
if (!intervalA) {
handelGetYS007()
handelGetYS008()
handelGetYS009()
}
intervalA = setInterval(getdata, 1000 * 60 * 60);
intervalA = setInterval(getdata(), 1000 * 60 * 60);
}
async function handelGetYS007() {
......@@ -479,6 +522,7 @@ function handelType8() {
async function handelGetYS009() {
const res = await getYS009(url.value, obj.value)
list9.value = res.data.list
list9Y.value = []
let arrY = []
let arr1 = []
let arr2 = []
......@@ -486,6 +530,7 @@ async function handelGetYS009() {
if (myType.value) {
for (const val of list9.value) {
list9Y.value.push(val.BASEJC)
arrY.push(val.BASEJC)
arr1.push(Math.round(val.WKPCOSTONE / 10000))
arr2.push(Math.round(val.WKPCOSTTWO / 10000))
......@@ -509,6 +554,29 @@ async function handelGetYS009() {
setC(arrY, arr1, arr2, arr3)
}
function handelSelect9() {
let arr = list9Y.value.map(val => list9.value.find(item => item.BASEJC === val));
list9Y.value = []
console.log(arr)
let arrY = []
let arr1 = []
let arr2 = []
let arr3 = []
for (const val of arr) {
list9Y.value.push(val.BASEJC)
arrY.push(val.BASEJC)
arr1.push(Math.round(val.WKPCOSTONE / 10000))
arr2.push(Math.round(val.WKPCOSTTWO / 10000))
arr3.push({
value: Math.round(val.WKPCOSTTHREE / 10000),
info: val.YQWELLINFO
})
}
setC(arrY, arr1, arr2, arr3)
}
const getdata = () => {
handelGetYS007()
handelGetYS008()
......@@ -518,6 +586,7 @@ const getdata = () => {
const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
chartA = echarts.init(zhuRef.value)
let option
console.log(myType.value)
if (myType.value) {
option = {
tooltip: {
......@@ -1162,7 +1231,7 @@ const setB = (arrY, arr1, arr2) => {
},
series: [
{
name: nowYear,
name: nowYear.value,
type: 'bar',
label: {
show: false
......@@ -1306,7 +1375,7 @@ const setB = (arrY, arr1, arr2) => {
},
{
name: nowYear-1,
name: nowYear.value-1,
type: 'bar',
label: {
show: false
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!