diff --git a/src/assets/scss/modules/index.scss b/src/assets/scss/modules/index.scss index 1eb413e2e..2c09b0883 100644 --- a/src/assets/scss/modules/index.scss +++ b/src/assets/scss/modules/index.scss @@ -22,91 +22,69 @@ .white-box { background-color: white; margin-top: 10px; - height: calc(100% - 10px); - background-color: white; - margin-top: 10px; - flex-grow: 0; + box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12); + flex-grow: 1; + max-height: calc(50% - 10px); + overflow: hidden scroll; + position: relative; } -.group_20 { - background-color: rgba(255, 255, 255, 1); - border-radius: 4px; - height: 382px; - margin-top: 16px; - width: 590px; - position: relative; -} - -.section_24 { - width: 575px; - height: 19px; - margin-top: 18px; - display: flex; - justify-content: space-between; -} - -.group_22 { - background-color: rgba(0, 86, 214, 1); - border-radius: 2px; - width: 4px; - height: 16px; - margin-top: -23px; -} - -.text_72 { - width: 160px; - height: 16px; - overflow-wrap: break-word; - color: rgba(51, 51, 51, 1); - font-size: 16px; - font-family: PingFang-SC-Bold; - font-weight: 700; - text-align: left; - white-space: nowrap; - line-height: 32px; - margin-left: 9px; -} - -.image-text_6 { - width: 77px; - height: 18px; - margin: 1px 0 0 325px; -} +// .noe-text{ +// border-left: 4px solid #2683DB; +// padding-left: 10px; +// height: 30px; +// margin-right: 10px; +// size: 15px; +// z-index: 1; +// display: flex; +// justify-content: space-between; +// position: fixed; +// background: white; +// width: 551px; + +// } +.noe-text { + position: relative; + padding-left: 14px; /* 调整左边距以容纳边框 */ + height: 30px; + margin-right: 10px; + font-size: 15px; /* 正确的属性名称应为 font-size */ + z-index: 1; + display: flex; + justify-content: space-between; + position: fixed; + background: white; + width: 551px; -.thumbnail_4 { - width: 18px; - height: 18px; } -.text-group_9 { - width: 56px; - height: 14px; - overflow-wrap: break-word; - color: rgba(51, 51, 51, 1); - font-size: 14px; - font-family: PingFang-SC-Medium; - font-weight: 500; - text-align: left; - white-space: nowrap; - line-height: 32px; - margin-top: 1px; +.noe-text::before { + content: ""; + position: absolute; + top: 5px; + left: 0; + height: 70%; /* 控制边框的长度 */ + width: 4px; /* 控制边框的宽度 */ + background-color: #2683DB; } - .g-row { padding: 5px 6px; display: flex; height: 100%; .g-row-left { - margin-right: auto; - width: calc(66% - 16px); + // margin-right: auto; + margin-right: 15px; + width: calc(60% - 20px); flex-direction: column; // justify-content: space-around; } .g-row-right { display: flex; margin-left: auto; - width: calc(34%); + margin-right: 5px; + flex-grow: 0.5; + width: calc(40% - 20px); flex-direction: column; justify-content: space-around; } @@ -116,6 +94,7 @@ position: relative; // padding: 16px; margin-top: 10px; + margin-left: 10px; background: #ffffff; box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12); border-radius: 2px; @@ -131,6 +110,8 @@ font-weight: 500; color: rgba(0, 0, 0, 0.85); line-height: 17px; + margin-top: 10px; + margin-left: 10px; > img { vertical-align: bottom; @@ -357,6 +338,10 @@ display: flex; overflow: hidden; height: 100%; + .echart { + max-width: 100%; + max-height: 100%; + } .cnt-left { box-sizing: border-box; padding: 16px; @@ -460,10 +445,14 @@ .m-tx { margin-bottom: 13px; width: 100%; - height: calc(84vh - 430px); + height: 65px; overflow: hidden; padding-right: 5px; box-sizing: border-box; + + flex-grow: 1; + // max-height: calc(50% - 10px); + overflow: hidden scroll; .cnt { box-sizing: border-box; margin-top: 12px; @@ -499,6 +488,7 @@ font-weight: 400; color: rgba(0, 0, 0, 0.85); line-height: 22px; + margin-left: 10px; &:hover { color: $c1; cursor: pointer; @@ -510,6 +500,7 @@ font-weight: 400; color: rgba(0, 0, 0, 0.45); line-height: 17px; + margin-left: 10px; } } .item_left{ @@ -600,24 +591,41 @@ } } } +.table { + border-collapse: collapse; + width: 90%; + margin: 0 auto; + +} +.table th, .table td { + border: 1px solid rgb(230, 230, 230); + padding: 8px; + text-align: center; +} -.tablee { - display: flex; - flex-direction: column; - max-width: 320px; - max-height: 220px; - margin-top: 25px; - margin-left: 10px; - margin-right: 10px; - - } - +.table th { + background-color: #F5F7FB; + padding: 8px; + text-align: center; + width: 100px; +} .row { display: flex; } .cell { - border: 1px solid #ccc; + border: 1px solid #F5F7FB; padding: 8px; - } \ No newline at end of file + } + .special-header { + background-color: #FFFCF1; /* 设置特定表头的背景颜色为 #FFFCF1 */ +} + +.update-settings { + margin-right: 25px; +} +.table-container{ + // overflow: hidden scroll; + overflow: auto; +} \ No newline at end of file diff --git a/src/views/modules/home/index.vue b/src/views/modules/home/index.vue index 481a6be2a..d2519b470 100644 --- a/src/views/modules/home/index.vue +++ b/src/views/modules/home/index.vue @@ -15,7 +15,8 @@
- +
@@ -29,54 +30,54 @@
- 93,242 -
- 居民总数 -
+ 93,242 +
+ 居民总数 +
+
+
+
+ 71,320 +
+ 常住人口 +
+
+
+
+ 22,122 +
+ 流动人口 +
+
+
+
+ 26,004 +
+ 房屋总数 +
+
+
+
+ 25,531 +
+ 自住房屋 +
+
+
+
+ 464 +
+ 出租房屋 +
+
+
+
+ 39 +
+ 闲置房屋 +
+
-
-
- 71,320 -
- 常住人口 -
-
-
-
- 22,122 -
- 流动人口 -
-
-
-
- 26,004 -
- 房屋总数 -
-
-
-
- 25,531 -
- 自住房屋 -
-
-
-
- 464 -
- 出租房屋 -
-
-
-
- 39 -
- 闲置房屋 -
- -
@@ -86,6 +87,10 @@
-->
+ +
+ + - - + - + - +
@@ -185,57 +188,36 @@
+
- + 消息提醒
更多>
-
-
+
+
{{ item.createdTime }}
-
- {{ item.content }} +
+ {{ + item.content }}
+
-
-
-
-
- - 暂无提醒～ -
-
-
-
-
-
-
- - 消息提醒 -
-
更多>
-
-
已读 未读
-
-
- {{ item.createdTime }} -
-
- {{ item.content }} -
-
@@ -245,31 +227,41 @@
- - +
+
居民分类更新情况 更新设置 +
+ +
+ + + + + + + + + + + + + + + + + + + + + +
居民类别总人数分类信息不完整数更新负责人更新周期更新人数
{{ item.shenfen }}{{ item.zongNumber }}{{ item.noAllNuber }}{{ item.fuzeren }}{{ item.zhouqi }}{{ item.addNum }}
- - +
- +
@@ -305,6 +297,18 @@ export default { total: "", list: [], }, + tableList: [ + { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' }, + { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' }, + { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' }, + { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' }, + { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' }, + { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' }, + { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' }, + { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' }, + { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' }, + { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' }, + ], znycCategory: { loading: false, total: "", @@ -329,9 +333,38 @@ export default { noticeData: [], activeName: "resi", - + numberLiM: [{ mer: 720, bilv: 0.45 }, { mer: 724, bilv: 0.56 }, { mer: 718, bilv: 0.54 }, { mer: 725, bilv: 0.69 }, { mer: 727, bilv: 0.36 }, { mer: 728, bilv: 0.64 }, { mer: 725, bilv: 0.78 }, { mer: 750, bilv: 0.25 }, { mer: 760, bilv: 0.96 }, { mer: 700, bilv: 0.38 }, { mer: 710, bilv: 0.62 }], myChart: {}, - agencyLevel:'', + agencyLevel: '', + xData: ["党员", "残疾人", "退役军人", "失业人员", "低保人员", "保障房人员", "特殊人员", "大病人员", "慢病人员", "特扶人员", "老年人"], + yData: [ + // { + // value: 720, + // itemStyle: { + // color: { + // type: 'linear', + // x: 0, + // y: 0, + // x2: 0, + // y2: 1, + // colorStops: [{ + // offset: 0, color: '#2D7DF2' // 上部颜色 + // }, { + // offset: 0.45, color: '#7EB1FE' // 中部颜色 + // }, { + // offset: 0.45, color: '#EFB632' // 中部颜色 + // }, { + // offset: 1, color: '#FDD77D' // 下部颜色 + // }], + // global: false // 默认为 false + // }, + // shadowColor: "#91cc75", + // borderType: "dashed", + // // opacity: 0.5 + // } + // },725,165,765,742,710,720,730,735,762,754 + ], + myChartStyle: { float: "left", width: "120%", height: "500px"}, } }, computed: { @@ -358,20 +391,30 @@ export default { }, }, mounted() { + this.ehso(); + + + + + + //图形 + this.initEcharts(); + this.getApiData(); this.$nextTick(() => { this.initChart() }) this.agencyLevel = localStorage.getItem("level", data.level); console.log( - "dynamicMenuRoutes----------------------------", - this.$store.state.sidebarMenuList + "dynamicMenuRoutes----------------------------", + this.$store.state.sidebarMenuList ); }, methods: { initChart() { this.$http.get("/governance/satisfactionOverview/notSatisfactionTrend").then(({ data: { data } }) => { this.myChart = echarts.init(document.getElementById("my_chart")); + let series = data.series.map((item, index) => { return { ...item, @@ -601,7 +644,63 @@ export default { this.$message.error(msg); } }, - }, + + initEcharts() { + // 基本柱状图 + const option = { + xAxis: { + type: 'category', + axisLabel: { + rotate: -45, + // textStyle: { + // fontSize: 9.1 + // } + }, + data: this.xData, + + }, + yAxis: {}, + series: [ + { + type: "bar", //形状为柱状图 + barWidth: '40%', + data: this.yData, + }, + ], + }; + const myChart = echarts.init(document.getElementById("mychart")); + myChart.setOption(option); + //随着屏幕大小调节图表 + window.addEventListener("resize", () => { + myChart.resize(); + }); + }, + ehso() { + this.yData = this.numberLiM.map(item => ({ + value: item.mer, + itemStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0, color: '#2D7DF2' }, + { offset: item.bilv, color: '#7EB1FE' }, + { offset: item.bilv, color: '#EFB632' }, + { offset: 1, color: '#FDD77D' } + ], + global: false + }, + shadowColor: "#91cc75", + borderType: "dashed", + // opacity: 0.5 + } + })); + }, + +}, };