diff --git a/src/assets/image/brandTotalIcon.png b/src/assets/image/brandTotalIcon.png new file mode 100644 index 0000000..91897dd Binary files /dev/null and b/src/assets/image/brandTotalIcon.png differ diff --git a/src/page/index/components/AssessmentScoringRanking/AssessmentScoringRanking.less b/src/page/index/components/AssessmentScoringRanking/AssessmentScoringRanking.less index a3fc6c0..9523695 100644 --- a/src/page/index/components/AssessmentScoringRanking/AssessmentScoringRanking.less +++ b/src/page/index/components/AssessmentScoringRanking/AssessmentScoringRanking.less @@ -2,7 +2,8 @@ width: 100%; .AssessmentScoringRankingListBox { - + width: 100%; + margin-top: 15px; .AssessmentScoringRankingItem { width: 100%; diff --git a/src/page/index/components/AssessmentScoringRanking/AssessmentScoringRanking.vue b/src/page/index/components/AssessmentScoringRanking/AssessmentScoringRanking.vue index 2c05a2e..17a12b0 100644 --- a/src/page/index/components/AssessmentScoringRanking/AssessmentScoringRanking.vue +++ b/src/page/index/components/AssessmentScoringRanking/AssessmentScoringRanking.vue @@ -6,7 +6,7 @@ import { handleGetExamineResultList } from '../../service'; // 考核数据 -let rankList: any = ref([]) +let rankList: any = ref([{}, {}, {}, {}, {}]) onMounted(async () => { await handleGetData() diff --git a/src/page/index/components/BasicMessageBox/BasicMessageBox.less b/src/page/index/components/BasicMessageBox/BasicMessageBox.less index 191a172..c5f6df5 100644 --- a/src/page/index/components/BasicMessageBox/BasicMessageBox.less +++ b/src/page/index/components/BasicMessageBox/BasicMessageBox.less @@ -12,8 +12,8 @@ // justify-content: flex-end; .nowTime { - font-weight: 400; - font-size: 20px; + font-weight: 600; + font-size: 16px; color: #FFFFFF; text-align: center; font-style: normal; @@ -33,9 +33,9 @@ } .weatherText { - font-weight: 400; - font-size: 19px; - line-height: 19px; + font-weight: 600; + font-size: 16px; + line-height: 16px; color: #FFFFFF; text-align: center; font-style: normal; @@ -43,8 +43,8 @@ } .nowDay { - font-weight: 400; - font-size: 20px; + font-weight: 600; + font-size: 16px; color: #FFFFFF; text-align: center; font-style: normal; diff --git a/src/page/index/components/BrandDetail/BrandDetail.less b/src/page/index/components/BrandDetail/BrandDetail.less index 8c625ef..f658502 100644 --- a/src/page/index/components/BrandDetail/BrandDetail.less +++ b/src/page/index/components/BrandDetail/BrandDetail.less @@ -21,16 +21,23 @@ .tabBox { width: 100%; + display: flex; + align-items: center; + box-sizing: border-box; + padding: 3px 10px; + // overflow-x: auto; + // overflow-y: hidden; + background: linear-gradient(90deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%); .tabItem { font-family: Microsoft YaHei, Microsoft YaHei; - font-weight: 400; + font-weight: bold; font-size: 15px; - color: #89929E; + color: #8B969F; text-align: left; font-style: normal; - margin: 0 20px; - display: inline-block; + padding: 0 10px; + white-space: nowrap; cursor: pointer; } @@ -56,19 +63,23 @@ } } + + .brandListBox { width: 100%; box-sizing: border-box; - padding: 20px 11px; + padding: 20px 11px 0; .brandItem { width: 100%; + height: 86px; margin-bottom: 10px; background-color: #0F1625; box-sizing: border-box; padding: 10px; display: flex; align-items: center; + border-radius: 8px; .brandLeft { width: 66px; @@ -91,6 +102,9 @@ .brandRightTop { width: 100%; + display: flex; + align-items: center; + justify-content: space-between; .brandRightTopLeft { font-family: Microsoft YaHei, Microsoft YaHei; diff --git a/src/page/index/components/BrandDetail/BrandDetail.vue b/src/page/index/components/BrandDetail/BrandDetail.vue index 073ce47..7468ac6 100644 --- a/src/page/index/components/BrandDetail/BrandDetail.vue +++ b/src/page/index/components/BrandDetail/BrandDetail.vue @@ -11,7 +11,9 @@ import { } from 'echarts/components'; import { CanvasRenderer } from 'echarts/renderers'; import { onBeforeUnmount, onMounted, ref, watch } from 'vue'; -import { handleGetBusinessTradeTree, handleGetCombineBrandList, handleGetFieldEnumTree } from '../../service'; +import { handleGetBrandStructureAnalysis, handleGetBusinessTradeTree, handleGetCombineBrandList, handleGetFieldEnumTree } from '../../service'; +import defaultImg from '../../../../assets/image/defaultImg.png' +import brandTotalIcon from '../../../../assets/image/brandTotalIcon.png' // 注册组件 echarts.use([ @@ -25,12 +27,13 @@ echarts.use([ let myChart: echarts.ECharts; // 自定义颜色列表 -const colorList = ['#FF9500', '#0094FF', '#7D4CD2']; +const colorList = ['#FF9500', '#0094FF', '#7D4CD2', '#00FFB7']; // tab的数组 -let tabList = ref([ -]) +let tabList = ref([]) // 选择的tab let selectTab = ref(1) +// 全部的品牌数据 +let allBrandList = ref([]) // 品牌列表数据 let brandListData = ref([]) @@ -81,25 +84,25 @@ const handleGoMounted = async () => { }, // 自定义图例内容 formatter: function (name: string) { + // 找到对应的数据项 + const dataItem = res.pieData.find((item: any) => item.name === name); + // 返回自定义格式 + return `${name} ${dataItem?.value}%`; + - return `1111` - // // 找到对应的数据项 - // const dataItem = res.pieData.find((item: any) => item.name === name); - // // 返回自定义格式 - // return `{name|${name}} {value|${dataItem?.value}元}`; } }, - // tooltip: { // 新增 tooltip 配置 - // trigger: 'item', // 触发类型：坐标轴触发 - // axisPointer: { // 坐标轴指示器配置 - // type: 'shadow' // 阴影指示器（适合柱状图） - // }, - // formatter: function (params: any) { // 自定义提示框内容 - // return ` - //
${params.data.name} ${params?.percent}% ${res.realData[params.dataIndex].toLocaleString()}元
- // `; - // } - // }, + tooltip: { // 新增 tooltip 配置 + trigger: 'item', // 触发类型：坐标轴触发 + axisPointer: { // 坐标轴指示器配置 + type: 'shadow' // 阴影指示器（适合柱状图） + }, + formatter: function (params: any) { // 自定义提示框内容 + return ` +
${params.name} ${params?.percent}%
+ `; + } + }, series: [ { name: 'Access From', @@ -139,42 +142,83 @@ const handleGetData = async () => { }) console.log('enumDataenumDataenumDataenumData', enumData); - - let category: any = ["全国品牌", "地方连锁", "本地个体"] - let pieData: any = [ - { name: "全国品牌", value: 33.3 }, - { name: "地方连锁", value: 33.3 }, - { name: "本地个体", value: 33.3 } - ] - let realData: any = [] - - - const req: any = { + let req: any = { ProvinceCode: "530000" } - const data = await handleGetBusinessTradeTree(req) + const data = await handleGetBrandStructureAnalysis(req) + console.log('datadatadatadatadata', data); + let category: any = [] + let pieData: any = [] + if (data && data.length > 0) { + data.forEach((item: any) => { + category.push(item.name) + pieData.push({ name: item.name, value: Number(item.value) }) + }) + } - const listData = await handleGetCombineBrandList({ + + // let category: any = ["全国品牌", "地方连锁", "本地个体"] + // let pieData: any = [ + // { name: "全国品牌", value: 33.3 }, + // { name: "地方连锁", value: 33.3 }, + // { name: "本地个体", value: 33.3 } + // ] + // let realData: any = [] + + + // const req: any = { + // ProvinceCode: "530000" + // } + // const data = await handleGetBusinessTradeTree(req) + + const listData = await handleGetBusinessTradeTree({ PROVINCE_CODE: "530000", - BRAND_STATE: 1, - SERVERPART_IDS: props.currentService?.SERVERPART_ID || "" + PageIndex: 1 + // BRAND_STATE: 1, + // SERVERPART_IDS: props.currentService?.SERVERPART_ID || "" }) - console.log('dksjaihudvbujscjsalda', data); console.log('listDatalistDatalistData', listData); + let tableList: any = [] + + + if (listData && listData.length > 0) { + listData.forEach((item: any) => { + tableList.push({ label: item.AUTOSTATISTICS_NAME, value: item.AUTOSTATISTICS_ID }) + }) + } + + tabList.value = tableList + + await handleGetTableData(tableList[0].value) let res: any = { category: category,// x轴的内容 pieData: pieData,// y轴的数据 - realData: realData// 真实数据 + // realData: realData// 真实数据 } return res } +// 获得表单数据 +const handleGetTableData = async (BRAND_INDUSTRY: number) => { + const req: any = { + PROVINCE_CODE: "530000", + BRAND_STATE: 1, + BRAND_INDUSTRY: BRAND_INDUSTRY + // SERVERPART_IDS:"" + } + const data = await handleGetCombineBrandList(req) + console.log('tableDatasadasd', data); + brandListData.value = data.slice(0, 6) +} + // 切换tab -const handleChangeTab = (value: number) => { +const handleChangeTab = async (value: number) => { + brandListData.value = [] selectTab.value = value + await handleGetTableData(tabList.value[value - 1].value) } @@ -202,39 +246,36 @@ onBeforeUnmount(() => {
- - - +
+ \ No newline at end of file diff --git a/src/page/index/components/BusinessStructure/BusinessStructure.less b/src/page/index/components/BusinessStructure/BusinessStructure.less index 3130875..74fc39a 100644 --- a/src/page/index/components/BusinessStructure/BusinessStructure.less +++ b/src/page/index/components/BusinessStructure/BusinessStructure.less @@ -5,8 +5,9 @@ .BusinessStructureCharts { width: 100%; + height: 210px; box-sizing: border-box; - padding: 22px 0 0 31px; + padding: 42px 0 0 31px; .BusinessStructureUnit { font-family: "Microsoft YaHei"; @@ -19,7 +20,9 @@ } .BusinessStructure { - width: 132px; + + width: 100%; + // width: 132px; height: 132px; display: inline-block; } diff --git a/src/page/index/components/BusinessStructure/BusinessStructure.vue b/src/page/index/components/BusinessStructure/BusinessStructure.vue index ba61baa..c44a508 100644 --- a/src/page/index/components/BusinessStructure/BusinessStructure.vue +++ b/src/page/index/components/BusinessStructure/BusinessStructure.vue @@ -48,6 +48,7 @@ const handleGoMounted = async () => { myChart = echarts.init(chartDom); const option = { + tooltip: { // 新增 tooltip 配置 trigger: 'item', // 触发类型：坐标轴触发 axisPointer: { // 坐标轴指示器配置 @@ -68,8 +69,8 @@ const handleGoMounted = async () => { width: 83, height: 83 }, - left: 'center', - top: 'center', + left: 31, + top: 24, z: 10 } ] @@ -79,9 +80,8 @@ const handleGoMounted = async () => { name: 'Access From', type: 'pie', radius: ['85%', '100%'], - center: ['50%', '50%'], // 关键修改：强制居中 [水平位置, 垂直位置] + center: ['20%', '50%'], // 图形向左偏移 avoidLabelOverlap: false, - itemStyle: { color: function (params: any) { return colorList[params.dataIndex]; @@ -96,7 +96,36 @@ const handleGoMounted = async () => { }, data: res.seriesData } - ] + ], + legend: { + orient: 'vertical', + left: 160, + top: 'center', + align: 'left', + itemGap: 10, + itemWidth: 12, + itemHeight: 12, + textStyle: { + color: '#fff', + rich: { + name: { + width: 90, // 固定名称宽度 + align: 'left', + padding: [0, 10, 0, 0] + }, + percent: { + width: 50, // 固定百分比宽度 + align: 'right', + padding: [0, 10, 0, 0] + } + } + }, + formatter: function (name: any) { + let percentData: any = res.lengedData.filter((item: any) => item.name === name) + + return `{name|${name}}{percent|${percentData[0].value}%}`; // 使用rich样式 + } + } }; myChart.setOption(option); @@ -138,6 +167,7 @@ const handleGetData = async () => { let realData: any = [] let category: any = [] let lengedLists: any = [] + let lengedData: any = [] if (list && list.length > 0) { list.forEach((item: any) => { seriesData.push({ value: Number(item.value), name: item.name }) @@ -148,6 +178,10 @@ const handleGetData = async () => { percent: Number(item.value), value: item.data }) + lengedData.push({ + name: item.name, + value: item.value + }) }) } @@ -155,7 +189,8 @@ const handleGetData = async () => { let res: any = { category: category,// x轴的内容 seriesData: seriesData,// y轴的数据 - realData: realData// 真实数据 + realData: realData,// 真实数据 + lengedData: lengedData } lengedList.value = lengedLists return res @@ -184,7 +219,7 @@ onBeforeUnmount(() => {
-
+
- + --> diff --git a/src/page/index/components/BusyTradingRanking/BusyTradingRanking.less b/src/page/index/components/BusyTradingRanking/BusyTradingRanking.less index 8164f7a..69acad9 100644 --- a/src/page/index/components/BusyTradingRanking/BusyTradingRanking.less +++ b/src/page/index/components/BusyTradingRanking/BusyTradingRanking.less @@ -5,11 +5,15 @@ justify-content: space-between; .BusyTradingRankingContentItem { - width: calc((100% - 20px) /2); + // width: calc((100% - 20px) /2); + width: 100%; + box-sizing: border-box; + padding: 0 15px; .BusyTradingRankingDataList { width: 100%; height: 120px; + margin-top: 10px; .BusyTradingRankingItem { @@ -18,6 +22,8 @@ display: flex; align-items: center; justify-content: space-between; + box-sizing: border-box; + padding: 0 10px; .BusyTradingRankingItemLeft { width: 80%; diff --git a/src/page/index/components/BusyTradingRanking/BusyTradingRanking.vue b/src/page/index/components/BusyTradingRanking/BusyTradingRanking.vue index 81bee9a..ca36ed7 100644 --- a/src/page/index/components/BusyTradingRanking/BusyTradingRanking.vue +++ b/src/page/index/components/BusyTradingRanking/BusyTradingRanking.vue @@ -14,7 +14,7 @@ const transactionList = ref([]) onMounted(async () => { // 获取服务区繁忙度的数据 await handleGetServiceBusyData() -}) +}) // 获取服务区繁忙度的数据 @@ -30,7 +30,7 @@ const handleGetServiceBusyData = async () => { // const data = await handleGetCurHalfCollect(req) const data = await handleGetCurBusyRank(req) console.log('服务区繁忙度数据:', data); - + let list: any = data.List // 营收排行 const revenueReq: any = { ProvinceCode: '530000', @@ -39,7 +39,7 @@ const handleGetServiceBusyData = async () => { } const revenueData = await handleGetCurBusyRank(revenueReq) // busyRankList.value = data.CollectionObject.slice(0, 5) - busyRankList.value = data.slice(0, 5) + busyRankList.value = list.slice(0, 5) transactionList.value = revenueData.slice(0, 5) } @@ -50,11 +50,11 @@ const handleGetServiceBusyData = async () => {
- +
{{ @@ -73,12 +73,12 @@ const handleGetServiceBusyData = async () => {
-
+
{{ diff --git a/src/page/index/components/ConsumptionLevel/ConsumptionLevel.vue b/src/page/index/components/ConsumptionLevel/ConsumptionLevel.vue index cd35e29..c665b50 100644 --- a/src/page/index/components/ConsumptionLevel/ConsumptionLevel.vue +++ b/src/page/index/components/ConsumptionLevel/ConsumptionLevel.vue @@ -54,6 +54,7 @@ onMounted(async () => { }, yAxis: { type: 'value', + name: "%", splitLine: { show: false } // 隐藏刻度线 }, xAxis: { @@ -139,7 +140,7 @@ onBeforeUnmount(() => {