diff --git a/.env.development b/.env.development index befd3c4..50401cc 100644 --- a/.env.development +++ b/.env.development @@ -5,8 +5,8 @@ VUE_APP_TITLE = 金鸡湖现代服务业品牌管理系统 ENV = 'development' # 金鸡湖现代服务业品牌管理系统/开发环境 -VUE_APP_BASE_API = 'http://192.168.0.114:9040' -# VUE_APP_BASE_API = 'http://39.101.188.84:9040' +# VUE_APP_BASE_API = 'http://192.168.0.114:9040' +VUE_APP_BASE_API = 'http://39.101.188.84:9040' # VUE_APP_BASE_API = 'https://idp.sipac.gov.cn/api' # 路由懒加载 diff --git a/package.json b/package.json index b481b6a..d93564f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ruoyi", - "version": "1.0.202407121624", + "version": "1.0.202407151033", "description": "金鸡湖现代服务业品牌管理系统", "author": "若依", "license": "MIT", diff --git a/src/assets/styles/font.css b/src/assets/styles/font.css index 4a7037a..30f191e 100644 --- a/src/assets/styles/font.css +++ b/src/assets/styles/font.css @@ -1,6 +1,26 @@ -@font-face { +/* @font-face { font-family: "PingFang-SC"; src: url("./font/PingFang_Heavy.ttf"); +} */ +/* @font-face { + font-family: "PingFang-SC"; + src: url("./font/PingFang_Regular.ttf"); +} */ +/* @font-face { + font-family: "PingFang-SC"; + src: url("./font/PingFang_Light.ttf"); +} */ +/* @font-face { + font-family: "PingFang-SC"; + src: url("./font/PingFang_ExtraLight.ttf"); +} */ +/* @font-face { + font-family: "PingFang-SC"; + src: url("./font/PingFang_Medium.ttf"); +} */ +@font-face { + font-family: "PingFang-SC"; + src: url("./font/PingFang_Bold.ttf"); } @font-face { font-family: "AlibabaPuHuiTiB"; diff --git a/src/assets/styles/font/PingFang_Bold.ttf b/src/assets/styles/font/PingFang_Bold.ttf new file mode 100644 index 0000000..accaf1f Binary files /dev/null and b/src/assets/styles/font/PingFang_Bold.ttf differ diff --git a/src/assets/styles/font/PingFang_ExtraLight.ttf b/src/assets/styles/font/PingFang_ExtraLight.ttf new file mode 100644 index 0000000..d9b574b Binary files /dev/null and b/src/assets/styles/font/PingFang_ExtraLight.ttf differ diff --git a/src/assets/styles/font/PingFang_Light.ttf b/src/assets/styles/font/PingFang_Light.ttf new file mode 100644 index 0000000..a513705 Binary files /dev/null and b/src/assets/styles/font/PingFang_Light.ttf differ diff --git a/src/assets/styles/font/PingFang_Medium.ttf b/src/assets/styles/font/PingFang_Medium.ttf new file mode 100644 index 0000000..982661b Binary files /dev/null and b/src/assets/styles/font/PingFang_Medium.ttf differ diff --git a/src/assets/styles/font/PingFang_Regular.ttf b/src/assets/styles/font/PingFang_Regular.ttf new file mode 100644 index 0000000..8790adb Binary files /dev/null and b/src/assets/styles/font/PingFang_Regular.ttf differ diff --git a/src/assets/styles/public.scss b/src/assets/styles/public.scss index 571f7b2..6f1f349 100644 --- a/src/assets/styles/public.scss +++ b/src/assets/styles/public.scss @@ -1344,7 +1344,7 @@ align-items: center; .dataCloudMap-birght { width: 10px; - height: 20px; + height: 18px; background: #0086FF; box-shadow: 3px 0 3px 0px #0086FF; border-radius: 5px 5px 5px 5px; @@ -1414,6 +1414,62 @@ } } } + .echarts-data-box { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + margin-top: 20px; + .E-box-item { + display: flex; + .img-box { + width: 50px; + height: 50px; + border-radius: 50%; + margin-right: 10px; + background-size: cover; /* 图片大小适应容器 */ + background-position: center; /* 图片居中 */ + background-repeat: no-repeat; /* 不重复显示背景图 */ + } + .img-box-one { + background-image: url("../images/warn-blue.png"); + } + .img-box-two { + background-image: url("../images/warn-blue.png"); + } + .img-box-three { + background-image: url("../images/warn-blue.png"); + } + .data-box { + display: flex; + justify-content: space-between; + flex-direction: column; + .box-number { + display: flex; + align-items: flex-end; + .number-yuan { + font-family: PingFang-SC, PingFang-SC; + font-weight: bold; + font-size: 26px; + line-height: 30px; + margin-right: 5px; + color: #333333; + } + .yuan-unit { + font-family: PingFang-SC, PingFang-SC; + font-weight: bold; + font-size: 12px; + line-height: 22px; + color: #666666; + } + } + .box-bottom { + font-family: PingFang-SC, PingFang-SC; + font-weight: 500; + font-size: 12px; + color: #666666; + } + } + } + } #echarts { width: 100%; height: 100%; @@ -1424,31 +1480,78 @@ background-color: #fff; border-radius: 5px; padding: 10px 20px; - .bottom-left-title { - display: grid; - grid-template-columns: auto auto; /* 自动列宽 */ - // align-items: end; /* 垂直对齐方式：底部对齐 */ - .L-title-left { + .industry-title { + display: flex; + align-items: center; + justify-content: space-between; + .bottom-left-title { display: flex; - align-items: center; - .dataCloudMap-birght { - width: 10px; - height: 20px; - background: #0086FF; - box-shadow: 3px 0 3px 0px #0086FF; - border-radius: 5px 5px 5px 5px; + align-items: flex-end; /* 底部对齐 */ + .L-title-left { + display: flex; + align-items: center; + .dataCloudMap-birght { + width: 10px; + height: 18px; + background: #0086FF; + box-shadow: 3px 0 3px 0px #0086FF; + border-radius: 5px 5px 5px 5px; + } + .dataCloudMap-title { + font-family: AlibabaPuHuiTiB; + font-size: 18px; + color: #333333; + margin: 0 10px; + } } - .dataCloudMap-title { - font-family: AlibabaPuHuiTiB; - font-size: 18px; - color: #333333; - margin: 0 10px; + .dataCloudMap-data { + font-family: AlibabaPuHuiTiR; + font-size: 14px; + color: #999999; } } - .dataCloudMap-data { - font-family: AlibabaPuHuiTiR; - font-size: 14px; - color: #999999; + .rightBtn { + font-family: PingFang-SC, PingFang-SC; + font-weight: 500; + font-size: 12px; + color: #0086FF; + cursor: pointer; + font-style: normal; + text-decoration-line: underline; + text-transform: none; + } + } + section { + margin-top: 20px; + // width: 100%; + // height: calc(100% - 20px); + // overflow-y: auto; + // padding-bottom: 20px; + .el-table::before { + height: 0; + } + .el-table { + margin-bottom: 25px; + th { + font-weight: bold; + font-size: 14px; + color: #000000; + } + td { + font-weight: 500; + font-size: 14px; + color: #666666; + } + .evenNumber-row { + background-color: #F6F9FD; + } + .project-name { + text-decoration: underline; + font-weight: 500; + font-size: 14px; + color: #1890FF; + cursor: pointer; + } } } } @@ -1464,15 +1567,17 @@ border-radius: 5px; padding: 10px 20px; .right-top-title { - display: grid; - // grid-template-columns: auto auto; /* 自动列宽 */ - align-items: end; /* 垂直对齐方式：底部对齐 */ + // display: grid; + // grid-template-columns: 1fr 6fr; /* 自动列宽 */ + // align-items: end; /* 垂直对齐方式：底部对齐 */ + display: flex; + align-items: flex-end; /* 底部对齐 */ .L-title-left { display: flex; align-items: center; .dataCloudMap-birght { width: 10px; - height: 20px; + height: 18px; background: #0086FF; box-shadow: 3px 0 3px 0px #0086FF; border-radius: 5px 5px 5px 5px; @@ -1496,31 +1601,48 @@ background-color: #fff; border-radius: 5px; padding: 10px 20px; - .right-middle-title { - display: grid; - grid-template-columns: auto auto; /* 自动列宽 */ - // align-items: end; /* 垂直对齐方式：底部对齐 */ - .L-title-left { + .honor-title { + display: flex; + align-items: center; + justify-content: space-between; + .right-middle-title { + // display: grid; + // grid-template-columns: 1fr 6fr; /* 自动列宽 auto auto*/ + // align-items: end; /* 垂直对齐方式：底部对齐 */ display: flex; - align-items: center; - .dataCloudMap-birght { - width: 10px; - height: 20px; - background: #0086FF; - box-shadow: 3px 0 3px 0px #0086FF; - border-radius: 5px 5px 5px 5px; + align-items: flex-end; /* 底部对齐 */ + .L-title-left { + display: flex; + align-items: center; + .dataCloudMap-birght { + width: 10px; + height: 18px; + background: #0086FF; + box-shadow: 3px 0 3px 0px #0086FF; + border-radius: 5px 5px 5px 5px; + } + .dataCloudMap-title { + font-family: AlibabaPuHuiTiB; + font-size: 18px; + color: #333333; + margin: 0 10px; + } } - .dataCloudMap-title { - font-family: AlibabaPuHuiTiB; - font-size: 18px; - color: #333333; - margin: 0 10px; + .dataCloudMap-data { + font-family: AlibabaPuHuiTiR; + font-size: 14px; + color: #999999; } } - .dataCloudMap-data { - font-family: AlibabaPuHuiTiR; - font-size: 14px; - color: #999999; + .rightBtn { + font-family: PingFang-SC, PingFang-SC; + font-weight: 500; + font-size: 12px; + color: #0086FF; + cursor: pointer; + font-style: normal; + text-decoration-line: underline; + text-transform: none; } } } @@ -1529,31 +1651,47 @@ background-color: #fff; border-radius: 5px; padding: 10px 20px; - .right-bottom-title { - display: grid; - grid-template-columns: auto auto; /* 自动列宽 */ - // align-items: end; /* 垂直对齐方式：底部对齐 */ - .L-title-left { + .project-trace-title { + display: flex; + align-items: center; + justify-content: space-between; + .right-bottom-title { display: flex; - align-items: center; - .dataCloudMap-birght { - width: 10px; - height: 20px; - background: #0086FF; - box-shadow: 3px 0 3px 0px #0086FF; - border-radius: 5px 5px 5px 5px; + // grid-template-columns: min-content max-content; /* 自动列宽 */ + // align-items: end; /* 垂直对齐方式：底部对齐 */ + align-items: flex-end; /* 底部对齐 */ + .L-title-left { + display: flex; + align-items: center; + .dataCloudMap-birght { + width: 10px; + height: 18px; + background: #0086FF; + box-shadow: 3px 0 3px 0px #0086FF; + border-radius: 5px 5px 5px 5px; + } + .dataCloudMap-title { + font-family: AlibabaPuHuiTiB; + font-size: 18px; + color: #333333; + margin: 0 10px; + } } - .dataCloudMap-title { - font-family: AlibabaPuHuiTiB; - font-size: 18px; - color: #333333; - margin: 0 10px; + .dataCloudMap-data { + font-family: AlibabaPuHuiTiR; + font-size: 14px; + color: #999999; } } - .dataCloudMap-data { - font-family: AlibabaPuHuiTiR; - font-size: 14px; - color: #999999; + .rightBtn { + font-family: PingFang-SC, PingFang-SC; + font-weight: 500; + font-size: 12px; + color: #0086FF; + font-style: normal; + cursor: pointer; + text-decoration-line: underline; + text-transform: none; } } } diff --git a/src/views/dataCloudMap/index.vue b/src/views/dataCloudMap/index.vue index ec71f60..56f86a5 100644 --- a/src/views/dataCloudMap/index.vue +++ b/src/views/dataCloudMap/index.vue @@ -26,16 +26,60 @@ +
+
+
+
+
+ 1758.13 + 亿元 +
+
【2023】服务业增加值
+
+
+
+
+
+
+ 1.3 + % +
+
【2023】服务业增速
+
+
+
+
+
+
+ 49.9 + % +
+
【2023】服务业增加值占GDP比重
+
+
+
-
-
- - 行业纵深情况 +
+
+
+ + 行业纵深情况 +
+ 【统计数据截至：2024-01】
- 【统计数据截至：2024-01】 +
查看更多数据>>
+
+ + + + + + + +
@@ -49,21 +93,27 @@
-
-
- - 荣誉情况 +
+
+
+ + 荣誉情况 +
+ 【统计数据截至：2024-01】
- 【统计数据截至：2024-01】 +
查看更多数据>>
-
-
- - 项目追踪情况 +
+
+
+ + 项目追踪情况 +
+ 【统计数据截至：2024-01】
- 【统计数据截至：2024-01】 +
查看更多数据>>
@@ -88,6 +138,23 @@ export default { // url1: require("../../assets/images/tb2.png"), }, ], + loadingOne: false, + tableOneData: [ + { + bigType:"科学研究和技术服务业", + revenue:"506.63", + yuan:"201", + speedUp:"0.89%", + proportion:"11%", + }, + { + bigType:"科学研究和技术服务业", + revenue:"506.63", + yuan:"201", + speedUp:"0.89%", + proportion:"11%", + }, + ] } }, mounted(){ @@ -110,10 +177,11 @@ export default { // top: "3%", // left: "10%", // }, - // backgroundColor: "#0f375f", grid: { - top: "10%", - bottom: "25%", //也可设置left和right设置距离来控制图表的大小 + top: "8%", + left: "3%", + right: "3%", + bottom: "35%", //也可设置left和right设置距离来控制图表的大小 }, // tooltip: { // trigger: "axis", @@ -133,147 +201,89 @@ export default { // }, xAxis: { data: [ - "当年完成水量", - "去年同期水量", - "滚动目标值水量", - "全年目标值水量", - "当年完成金额", - "去年同期金额", - "滚动目标金额", - "全年目标值", + "2019", + "2020", + "2021", + "2022", + "2023", + "2024", ], axisLine: { show: true, //隐藏X轴轴线 - // lineStyle: { - // color: "#01FCE3", - // }, + lineStyle: { + color: "#ccc", + opacity: 0.6, + }, }, axisTick: { - show: true, //隐藏X轴刻度 + show: false, //隐藏X轴刻度 }, axisLabel: { show: true, - // textStyle: { - // color: "#ebf8ac", //X轴文字颜色 - // }, + color: "#666666", //X轴文字颜色 + fontSize: 14, }, }, yAxis: [ { type: "value", - name: "亿元", - // nameTextStyle: { - // // color: "#ebf8ac", - // }, splitLine: { - show: false, - }, - axisTick: { - show: true, - }, - axisLine: { show: true, - // lineStyle: { - // color: "#FFFFFF", - // }, + lineStyle :{ + type: "dashed", + } }, axisLabel: { show: true, - // textStyle: { - // color: "#ebf8ac", - // }, + color: "#666666", + fontSize: 12, }, }, - // { - // type: "value", - // // name: "同比", - // // nameTextStyle: { - // // color: "#ebf8ac", - // // }, - // position: "right", - // splitLine: { - // show: false, - // }, - // axisTick: { - // show: false, - // }, - // axisLine: { - // show: false, - // }, - // axisLabel: { - // show: false, - // formatter: "{value} %", //右侧Y轴文字显示 - // // textStyle: { - // // color: "#ebf8ac", - // // }, - // }, - // }, - // { - // type: "value", - // gridIndex: 0, - // min: 50, - // max: 100, - // splitNumber: 8, - // splitLine: { - // show: false, - // }, - // axisLine: { - // show: false, - // }, - // axisTick: { - // show: false, - // }, - // axisLabel: { - // show: false, - // }, - // splitArea: { - // show: true, - // areaStyle: { - // color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"], - // }, - // }, - // }, ], series: [ { name: "销售水量", type: "line", // yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用 - smooth: true, //平滑曲线显示 + // smooth: true, //平滑曲线显示 会让lineStyle的type设置的solid无效 showAllSymbol: true, //显示所有图形。 symbol: "circle", //标记的图形为实心圆 symbolSize: 10, //标记的大小 itemStyle: { //折线拐点标志的样式 - color: "#058cff", + color: "#FFBB00", + borderColor: "#fff", + borderWidth: 2, }, lineStyle: { - color: "#058cff", + type: "solid", + color: "#FFBB00", }, // 折线覆盖的颜色 // areaStyle: { // color: "rgba(5,140,255, 0.2)", // }, - data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5], + data: [4.8, 4.4, 5.4, 4.1, 3.6, 3.4], }, { name: "主营业务", type: "bar", - // barWidth: 15, - // itemStyle: { - // normal: { - // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - // { - // offset: 0, - // color: "#00FFE3", - // }, - // { - // offset: 1, - // color: "#4693EC", - // }, - // ]), - // }, - // }, + barWidth: 25, + itemStyle: { + // normal: { + // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + // { + // offset: 0, + // color: "#00FFE3", + // }, + // { + // offset: 1, + // color: "#4693EC", + // }, + // ]), + // }, + color: "#0086FF", + }, data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5], }, ], @@ -283,6 +293,13 @@ export default { active(e) { this.activeIndex = e; }, + // 修改table背景色 + tableRowClassName({row, rowIndex}){ + if (rowIndex % 2 !== 0) { + return 'evenNumber-row'; + } + return ''; + }, }, }