diff --git a/index.html b/index.html index 80b1da5..aab55f2 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,24 @@ - - - - - AI全景图 - - - -
- - - - - + + + + + + 云南高速服务区智慧数智大屏 + + + + +
+ + + + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index abe7d1d..e87b29a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@antv/l7": "^2.22.3", "@antv/l7-maps": "^2.22.3", "axios": "^1.7.7", + "crypto-js": "^4.2.0", "echarts": "^5.6.0", "element-plus": "^2.8.8", "marked": "^15.0.6", @@ -21,6 +22,7 @@ }, "devDependencies": { "@eslint/js": "^9.15.0", + "@types/crypto-js": "^4.2.2", "@types/node": "^22.9.0", "@vitejs/plugin-vue": "^5.2.0", "@vue/eslint-config-typescript": "^14.1.3", @@ -827,6 +829,13 @@ "url": "https://opencollective.com/turf" } }, + "node_modules/@types/crypto-js": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.2.tgz", + "integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/estree": { "version": "1.0.6", "license": "MIT" @@ -1624,6 +1633,12 @@ "node": ">= 8" } }, + "node_modules/crypto-js": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz", + "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==", + "license": "MIT" + }, "node_modules/csscolorparser": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz", diff --git a/package.json b/package.json index 94f9054..e2ecd16 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@antv/l7": "^2.22.3", "@antv/l7-maps": "^2.22.3", "axios": "^1.7.7", + "crypto-js": "^4.2.0", "echarts": "^5.6.0", "element-plus": "^2.8.8", "marked": "^15.0.6", @@ -22,6 +23,7 @@ }, "devDependencies": { "@eslint/js": "^9.15.0", + "@types/crypto-js": "^4.2.2", "@types/node": "^22.9.0", "@vitejs/plugin-vue": "^5.2.0", "@vue/eslint-config-typescript": "^14.1.3", diff --git a/public/YNIcon.png b/public/YNIcon.png new file mode 100644 index 0000000..4ca0077 Binary files /dev/null and b/public/YNIcon.png differ diff --git a/src/assets/image/AreaLegendBg.png b/src/assets/image/AreaLegendBg.png new file mode 100644 index 0000000..4314906 Binary files /dev/null and b/src/assets/image/AreaLegendBg.png differ diff --git a/src/assets/image/YNLoginTop.png b/src/assets/image/YNLoginTop.png new file mode 100644 index 0000000..9bec31f Binary files /dev/null and b/src/assets/image/YNLoginTop.png differ diff --git a/src/assets/image/loginBg.png b/src/assets/image/loginBg.png new file mode 100644 index 0000000..497d434 Binary files /dev/null and b/src/assets/image/loginBg.png differ diff --git a/src/assets/image/loginContentbottomBg.png b/src/assets/image/loginContentbottomBg.png new file mode 100644 index 0000000..601b149 Binary files /dev/null and b/src/assets/image/loginContentbottomBg.png differ diff --git a/src/assets/image/showMapIcon.png b/src/assets/image/showMapIcon.png new file mode 100644 index 0000000..7cfbb25 Binary files /dev/null and b/src/assets/image/showMapIcon.png differ diff --git a/src/assets/image/smallTitleIcon.png b/src/assets/image/smallTitleIcon.png new file mode 100644 index 0000000..6b91e9f Binary files /dev/null and b/src/assets/image/smallTitleIcon.png differ diff --git a/src/assets/image/定位／红色备份 6@2x.png b/src/assets/image/定位／红色备份 6@2x.png new file mode 100644 index 0000000..97d0fef Binary files /dev/null and b/src/assets/image/定位／红色备份 6@2x.png differ diff --git a/src/page/index/components/AnalysisOfMember/AnalysisOfMember.vue b/src/page/index/components/AnalysisOfMember/AnalysisOfMember.vue index 1953861..f0355db 100644 --- a/src/page/index/components/AnalysisOfMember/AnalysisOfMember.vue +++ b/src/page/index/components/AnalysisOfMember/AnalysisOfMember.vue @@ -117,7 +117,10 @@ const handleGoMounted = async () => { barWidth: 10, itemStyle: { borderRadius: [3, 3, 0, 0], - color: '#008CFF' // 直接指定颜色 + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: '#46B8F3' }, // 顶部颜色 + { offset: 1, color: '#1A4AF6' } // 底部颜色 + ]) }, label: { show: true, @@ -137,7 +140,7 @@ const handleGoMounted = async () => { barWidth: 10, itemStyle: { borderRadius: [3, 3, 0, 0], - color: '#69BCFF' // 直接指定颜色 + color: "#3CD495" } } ], diff --git a/src/page/index/components/AreaLegend/AreaLegend.less b/src/page/index/components/AreaLegend/AreaLegend.less new file mode 100644 index 0000000..17532d5 --- /dev/null +++ b/src/page/index/components/AreaLegend/AreaLegend.less @@ -0,0 +1,40 @@ +.AreaLegendBox { + width: 100%; + height: 47px; + // background-image: url('../../../../assets/image/AreaLegendBg.png'); + // background-repeat: no-repeat; + // background-size: 100% 100%; + + .AreaLegendBoxList { + width: 100%; + height: 100%; + display: flex; + align-items: center; + + .AreaLegendBoxItem { + display: flex; + align-items: center; + box-sizing: border-box; + padding-left: 30px; + + .AreaLegendBoxItemIcon { + width: 20px; + height: 20px; + margin-right: 8px; + border-radius: 50%; + } + + .AreaLegendBoxItemLabel { + font-family: OPPOSans, OPPOSans; + font-weight: normal; + font-size: 14px; + color: #E4F3FF; + line-height: 18px; + text-align: left; + font-style: normal; + } + } + + + } +} \ No newline at end of file diff --git a/src/page/index/components/AreaLegend/AreaLegend.vue b/src/page/index/components/AreaLegend/AreaLegend.vue new file mode 100644 index 0000000..c4a0c78 --- /dev/null +++ b/src/page/index/components/AreaLegend/AreaLegend.vue @@ -0,0 +1,40 @@ + + + \ No newline at end of file diff --git a/src/page/index/components/BrandDetail/BrandDetail.less b/src/page/index/components/BrandDetail/BrandDetail.less index a74972f..0194f17 100644 --- a/src/page/index/components/BrandDetail/BrandDetail.less +++ b/src/page/index/components/BrandDetail/BrandDetail.less @@ -8,8 +8,8 @@ .brandChartBox { width: 100%; - height: 132px; - margin-top: 35px; + height: 220px; + margin-top: 15px; position: relative; } @@ -73,13 +73,13 @@ .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; + margin-bottom: 5px; .brandLeft { width: 66px; diff --git a/src/page/index/components/BrandDetail/BrandDetail.vue b/src/page/index/components/BrandDetail/BrandDetail.vue index 62fcf61..02f0ff4 100644 --- a/src/page/index/components/BrandDetail/BrandDetail.vue +++ b/src/page/index/components/BrandDetail/BrandDetail.vue @@ -69,7 +69,7 @@ const handleGoMounted = async () => { const option = { legend: { orient: 'vertical', // 图例纵向排列 - left: '50%', // 距离右侧5% + left: 200, // 距离右侧5% top: 'center', // 垂直居中 itemWidth: 12, // 图例标记宽度 itemHeight: 12, // 图例标记高度 @@ -108,7 +108,7 @@ const handleGoMounted = async () => { { name: 'Access From', type: 'pie', - radius: ['0%', '100%'], + radius: ['0%', '70%'], center: ['25%', '50%'], avoidLabelOverlap: false, itemStyle: { @@ -132,6 +132,8 @@ const handleGoMounted = async () => { myChart.setOption(option); myChart.resize(); window.addEventListener('resize', resizeChart); + + handleBrandTabList() } // 拿到数据 @@ -189,6 +191,18 @@ const handleGetData = async () => { // }) + + // await handleGetTableData(tableList[0].value) + let res: any = { + category: category,// x轴的内容 + pieData: pieData,// y轴的数据 + // realData: realData// 真实数据 + } + return res +} + +// 获取品牌列表数据 +const handleBrandTabList = async () => { let BrandTab = sessionStorage.getItem('BrandTab') let BrandTabList = sessionStorage.getItem('BrandTabList') let listData: any = [] @@ -197,6 +211,7 @@ const handleGetData = async () => { let list: any = JSON.parse(BrandTabList) allBrandObjData.value = obj brandListData.value = obj[list[0].value] + tabList.value = list } else { listData = await handleGetBusinessTradeTree({ PROVINCE_CODE: "530000", @@ -211,6 +226,7 @@ const handleGetData = async () => { tableList.push({ label: item.AUTOSTATISTICS_NAME, value: item.AUTOSTATISTICS_ID }) }) } + console.log('tableListtableListtableListtableListtableList', tableList); tabList.value = tableList sessionStorage.setItem("BrandTabList", JSON.stringify(tableList)) @@ -233,19 +249,6 @@ const handleGetData = async () => { brandListData.value = obj[tableList[0].value] } - - - - - - // await handleGetTableData(tableList[0].value) - - let res: any = { - category: category,// x轴的内容 - pieData: pieData,// y轴的数据 - // realData: realData// 真实数据 - } - return res } // 获得表单数据 diff --git a/src/page/index/components/BusinessCase/BusinessCase.less b/src/page/index/components/BusinessCase/BusinessCase.less index 7dcae94..93a9753 100644 --- a/src/page/index/components/BusinessCase/BusinessCase.less +++ b/src/page/index/components/BusinessCase/BusinessCase.less @@ -1,5 +1,13 @@ .BusinessCaseBox { width: 100%; + position: relative; + height: 425px; + + .BusinessCaseBoxContent { + position: absolute; + top: 15px; + left: 0; + } .BusinessCaseTabBox { // width: 100%; @@ -262,13 +270,12 @@ .featureAnalysisBox { width: 100%; - height: 390px; + height: 425px; } .featureAnalysisBottom { width: 100%; - height: 390px; - margin-top: 18px; + height: 425px; } } } \ No newline at end of file diff --git a/src/page/index/components/BusinessCase/BusinessCase.vue b/src/page/index/components/BusinessCase/BusinessCase.vue index 152e389..e5a3bcb 100644 --- a/src/page/index/components/BusinessCase/BusinessCase.vue +++ b/src/page/index/components/BusinessCase/BusinessCase.vue @@ -248,7 +248,7 @@ const handleShowData = async (value: number) => { const option = { legend: { top: 15, - right: 10, + right: 0, textStyle: { color: '#ffffff' // 设置图例文字为白色 } @@ -290,7 +290,7 @@ const handleShowData = async (value: number) => { }, nameTextStyle: { color: '#fff', // 名称颜色 - padding: [0, 0, 0, 30] // 名称位置调整 + padding: [0, 0, 35, 30] // 名称位置调整 } }, series: [{ @@ -315,7 +315,7 @@ const handleShowData = async (value: number) => { left: '0', // 左侧间距 right: '0', // 右侧间距 bottom: '0', // 底部间距 - top: '50', // 顶部间距 + top: '120', // 顶部间距 containLabel: true // 确保坐标轴标签在grid内 }, }; @@ -334,7 +334,7 @@ const handleShowBottomData = async (res: any) => { const option = { legend: { - top: 0, // 距离容器底部距离 + top: 10, // 距离容器底部距离 right: 0, itemWidth: 20, // 图例标记的图形宽度 itemHeight: 10, // 图例标记的图形高度 @@ -383,7 +383,7 @@ const handleShowBottomData = async (res: any) => { left: '10', // 增加左侧空间 right: '10', // 增加右侧空间 bottom: '0', - top: '30', + top: '80', containLabel: true }, series: [ @@ -454,8 +454,9 @@ onBeforeUnmount(() => {