style:图表的设置
Showing
13 changed files
with
78 additions
and
135 deletions
| ... | @@ -31,5 +31,6 @@ npm install --registry=https://registry.npm.taobao.org | ... | @@ -31,5 +31,6 @@ npm install --registry=https://registry.npm.taobao.org | 
| 31 | "CODE": "BDCJGPT", {"BDCSBPT":上报: "BDCJGPT":监管} | 31 | "CODE": "BDCJGPT", {"BDCSBPT":上报: "BDCJGPT":监管} | 
| 32 | "SERVERAPI": "/bdcsjsb", | 32 | "SERVERAPI": "/bdcsjsb", | 
| 33 | "calcHeight": 200, {上报:160 监管:200} | 33 | "calcHeight": 200, {上报:160 监管:200} | 
| 34 | "echartTextColor": "#FFFFFF", {上报:"#4A4A4A" 监管:"#FFFFFF"} | ||
| 34 | "MANAGEMENTAPI": "http://192.168.2.38:8090/management" | 35 | "MANAGEMENTAPI": "http://192.168.2.38:8090/management" | 
| 35 | } | 36 | } | 
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... | 
| 1 | { | 1 | { | 
| 2 | "TITLE": "汉中市数据上报系统", | 2 | "TITLE": "汉中市数据上报系统", | 
| 3 | "THEME": "sb", | 3 | "THEME": "sb", | 
| 4 | "CODE": "BDCSBPT", | 4 | "CODE": "BDCJGPT", | 
| 5 | "SERVERAPI": "/bdcsjsb", | 5 | "SERVERAPI": "/bdcsjsb", | 
| 6 | "calcHeight": 160, | 6 | "calcHeight": 160, | 
| 7 | "echartTextColor": "#FFFFFF", | ||
| 7 | "MANAGEMENTAPI": "http://192.168.2.38:8090/management" | 8 | "MANAGEMENTAPI": "http://192.168.2.38:8090/management" | 
| 8 | } | 9 | } | 
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... | 
| ... | @@ -15,14 +15,4 @@ export default { | ... | @@ -15,14 +15,4 @@ export default { | 
| 15 | } | 15 | } | 
| 16 | } | 16 | } | 
| 17 | } | 17 | } | 
| 18 | </script> | ||
| 19 | <style lang="scss" scoped> | ||
| 20 | .hasTagsView { | ||
| 21 | .app-main { | ||
| 22 | overflow-x: auto; | ||
| 23 | box-sizing: border-box; | ||
| 24 | background-color: #EDF1F7; | ||
| 25 | box-sizing: border-box; | ||
| 26 | } | ||
| 27 | } | ||
| 28 | </style> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | 
| 18 | </script> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... | 
| 1 | <!-- | 1 | <!-- | 
| 2 | * @Description: | 2 | * @Description: | 
| 3 | * @Autor: renchao | 3 | * @Autor: renchao | 
| 4 | * @LastEditTime: 2023-03-22 10:23:46 | 4 | * @LastEditTime: 2023-03-28 10:12:27 | 
| 5 | --> | 5 | --> | 
| 6 | <template> | 6 | <template> | 
| 7 | <section> | 7 | <transition name="fade-transform" mode="out-in"> | 
| 8 | <transition name="fade-transform" mode="out-in"> | 8 | <router-view /> | 
| 9 | <router-view /> | 9 | </transition> | 
| 10 | </transition> | ||
| 11 | </section> | ||
| 12 | </template> | 10 | </template> | 
| 13 | <script> | 11 | <script> | 
| 14 | export default { | 12 | export default { | ... | ... | 
| 1 | <!-- | 1 | <!-- | 
| 2 | * @Description: | 2 | * @Description: | 
| 3 | * @Autor: renchao | 3 | * @Autor: renchao | 
| 4 | * @LastEditTime: 2023-03-23 09:21:00 | 4 | * @LastEditTime: 2023-03-28 10:14:20 | 
| 5 | --> | 5 | --> | 
| 6 | <template> | 6 | <template> | 
| 7 | <div class="app-wrapper"> | 7 | <div class="app-wrapper"> | 
| 8 | <navbar /> | 8 | <navbar /> | 
| 9 | <div class="main-container"> | 9 | <div class="main-container"> | 
| 10 | <sidebar class="sidebar-container" /> | 10 | <sidebar class="sidebar-container" /> | 
| 11 | <div class="app-main"> | 11 | <div class="app-content"> | 
| 12 | <tags-view v-if="needTagsView" /> | 12 | <tags-view v-if="needTagsView" /> | 
| 13 | <app-main /> | 13 | <app-main /> | 
| 14 | </div> | 14 | </div> | 
| ... | @@ -40,17 +40,6 @@ export default { | ... | @@ -40,17 +40,6 @@ export default { | 
| 40 | } | 40 | } | 
| 41 | } | 41 | } | 
| 42 | </script> | 42 | </script> | 
| 43 | <style lang="scss" scoped> | ||
| 44 | .app-main { | ||
| 45 | height: calc(100vh - 74px); | ||
| 46 | overflow-x: hidden; | ||
| 47 | box-sizing: border-box; | ||
| 48 | flex: 1; | ||
| 49 | width: 100%; | ||
| 50 | background: #EAEBF0; | ||
| 51 | padding: 10px; | ||
| 52 | } | ||
| 53 | </style> | ||
| 54 | <style lang="scss"> | 43 | <style lang="scss"> | 
| 55 | @import "~@/styles/mixin.scss"; | 44 | @import "~@/styles/mixin.scss"; | 
| 56 | @import "~@/styles/sbSidebar.scss"; | 45 | @import "~@/styles/sbSidebar.scss"; | 
| ... | @@ -83,4 +72,13 @@ export default { | ... | @@ -83,4 +72,13 @@ export default { | 
| 83 | width: 100%; | 72 | width: 100%; | 
| 84 | transition: width 0.28s; | 73 | transition: width 0.28s; | 
| 85 | } | 74 | } | 
| 75 | |||
| 76 | .app-content { | ||
| 77 | overflow-x: hidden; | ||
| 78 | box-sizing: border-box; | ||
| 79 | flex: 1; | ||
| 80 | width: 100%; | ||
| 81 | background: #EAEBF0; | ||
| 82 | padding: 10px; | ||
| 83 | } | ||
| 86 | </style> | 84 | </style> | ... | ... | 
| ... | @@ -190,6 +190,12 @@ | ... | @@ -190,6 +190,12 @@ | 
| 190 | } | 190 | } | 
| 191 | } | 191 | } | 
| 192 | 192 | ||
| 193 | .echarts-box { | ||
| 194 | display: flex; | ||
| 195 | justify-content: center; | ||
| 196 | height: calc(100vh - 260px); | ||
| 197 | } | ||
| 198 | |||
| 193 | .complex-header { | 199 | .complex-header { | 
| 194 | .el-table--border th.el-table__cell { | 200 | .el-table--border th.el-table__cell { | 
| 195 | border-bottom: 1px solid #458ACF !important; | 201 | border-bottom: 1px solid #458ACF !important; | 
| ... | @@ -1080,12 +1086,15 @@ | ... | @@ -1080,12 +1086,15 @@ | 
| 1080 | .informationbase { | 1086 | .informationbase { | 
| 1081 | margin: 0.1875rem 1.0417rem; | 1087 | margin: 0.1875rem 1.0417rem; | 
| 1082 | overflow-y: auto; | 1088 | overflow-y: auto; | 
| 1089 | |||
| 1083 | .form-wrapper { | 1090 | .form-wrapper { | 
| 1084 | padding: 0px 120px 0px; | 1091 | padding: 0px 120px 0px; | 
| 1092 | |||
| 1085 | .el-form-item { | 1093 | .el-form-item { | 
| 1086 | /deep/.el-form-item__label { | 1094 | /deep/.el-form-item__label { | 
| 1087 | color: #ffffff; | 1095 | color: #ffffff; | 
| 1088 | } | 1096 | } | 
| 1097 | |||
| 1089 | ::v-deep .el-input .el-input__inner { | 1098 | ::v-deep .el-input .el-input__inner { | 
| 1090 | padding: 0 8px; | 1099 | padding: 0 8px; | 
| 1091 | height: 40px; | 1100 | height: 40px; | 
| ... | @@ -1093,13 +1102,14 @@ | ... | @@ -1093,13 +1102,14 @@ | 
| 1093 | border: 1px solid #6bc1fc; | 1102 | border: 1px solid #6bc1fc; | 
| 1094 | } | 1103 | } | 
| 1095 | } | 1104 | } | 
| 1105 | |||
| 1096 | .el-form-item--small.el-form-item { | 1106 | .el-form-item--small.el-form-item { | 
| 1097 | margin-bottom: 16px; | 1107 | margin-bottom: 16px; | 
| 1098 | } | 1108 | } | 
| 1099 | } | 1109 | } | 
| 1110 | |||
| 1100 | .bottom-wrapper { | 1111 | .bottom-wrapper { | 
| 1101 | padding: 0px 120px 0px; | 1112 | padding: 0px 120px 0px; | 
| 1102 | text-align: center; | 1113 | text-align: center; | 
| 1103 | } | 1114 | } | 
| 1104 | } | 1115 | } | 
| 1105 | |||
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... | 
| ... | @@ -9,7 +9,7 @@ | ... | @@ -9,7 +9,7 @@ | 
| 9 | 9 | ||
| 10 | 10 | ||
| 11 | .from-clues { | 11 | .from-clues { | 
| 12 | height: 100%; | 12 | // height: 100%; | 
| 13 | width: 100%; | 13 | width: 100%; | 
| 14 | min-width: 1280px; | 14 | min-width: 1280px; | 
| 15 | box-sizing: border-box; | 15 | box-sizing: border-box; | 
| ... | @@ -19,7 +19,6 @@ | ... | @@ -19,7 +19,6 @@ | 
| 19 | width: 100%; | 19 | width: 100%; | 
| 20 | padding: 7px 15px 15px 15px; | 20 | padding: 7px 15px 15px 15px; | 
| 21 | box-sizing: border-box; | 21 | box-sizing: border-box; | 
| 22 | background-size: 100% 100%; | ||
| 23 | background: #FFFFFF; | 22 | background: #FFFFFF; | 
| 24 | border-radius: 4px; | 23 | border-radius: 4px; | 
| 25 | } | 24 | } | 
| ... | @@ -30,7 +29,6 @@ | ... | @@ -30,7 +29,6 @@ | 
| 30 | margin-top: 10px; | 29 | margin-top: 10px; | 
| 31 | background: #FFFFFF; | 30 | background: #FFFFFF; | 
| 32 | border-radius: 4px; | 31 | border-radius: 4px; | 
| 33 | background-size: 100% 100%; | ||
| 34 | padding: 15px; | 32 | padding: 15px; | 
| 35 | } | 33 | } | 
| 36 | 34 | ||
| ... | @@ -57,6 +55,12 @@ | ... | @@ -57,6 +55,12 @@ | 
| 57 | } | 55 | } | 
| 58 | } | 56 | } | 
| 59 | 57 | ||
| 58 | .echarts-box { | ||
| 59 | display: flex; | ||
| 60 | justify-content: center; | ||
| 61 | height: calc(100vh - 230px); | ||
| 62 | } | ||
| 63 | |||
| 60 | /* --------------进度条美化---------------- */ | 64 | /* --------------进度条美化---------------- */ | 
| 61 | ::-webkit-scrollbar { | 65 | ::-webkit-scrollbar { | 
| 62 | width: 7px; | 66 | width: 7px; | 
| ... | @@ -891,4 +895,4 @@ | ... | @@ -891,4 +895,4 @@ | 
| 891 | padding: 0px 120px 0px; | 895 | padding: 0px 120px 0px; | 
| 892 | text-align: center; | 896 | text-align: center; | 
| 893 | } | 897 | } | 
| 894 | } | 898 | } | 
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... | 
| 1 | <template> | 1 | <template> | 
| 2 | <!-- 监控日志 --> | 2 | <!-- 监控日志 --> | 
| 3 | <div class="jktjDetail form-clues"> | 3 | <div class="jktjDetail from-clues"> | 
| 4 | <!-- 头部搜索 --> | 4 | <!-- 头部搜索 --> | 
| 5 | <div class="from-clues-header"> | 5 | <div class="from-clues-header"> | 
| 6 | <el-form ref="form" :model="form" label-width="100px"> | 6 | <el-form ref="form" :model="form" label-width="100px"> | 
| 7 | <el-form-item v-if="BASE_API.THEME == 'jg'"> | 7 | <el-form-item v-if="BASE_API.THEME == 'jg'"> | 
| 8 | <Breadcrumb /> | 8 | <Breadcrumb /> | 
| 9 | </el-form-item> | 9 | </el-form-item> | 
| 10 | <el-row> | 10 | <el-row class="mb-5"> | 
| 11 | <el-col :span="4"> | 11 | <el-col :span="4"> | 
| 12 | <el-form-item label="开始日期" prop="startTime" class="d-flex"> | 12 | <el-form-item label="开始日期" prop="startTime" class="d-flex"> | 
| 13 | <el-date-picker type="date" :clearable="false" class="width100" placeholder="开始日期" | 13 | <el-date-picker type="date" :clearable="false" class="width100" placeholder="开始日期" | 
| ... | @@ -31,11 +31,11 @@ | ... | @@ -31,11 +31,11 @@ | 
| 31 | </el-form> | 31 | </el-form> | 
| 32 | </div> | 32 | </div> | 
| 33 | <!-- 表格 --> | 33 | <!-- 表格 --> | 
| 34 | <div class="form-clues-content echarts-box" v-if="pieChartsData.length"> | 34 | <div class="from-clues-content echarts-box" v-if="pieChartsData.length"> | 
| 35 | <div id="myChart" class="chart"></div> | 35 | <div id="myChart" class="chart" style="height:100%;width:100%;"></div> | 
| 36 | <div id="myChart-bar" class="chart-bar"></div> | 36 | <div id="myChart-bar" class="chart-bar" style="height:100%;width:100%;"></div> | 
| 37 | </div> | 37 | </div> | 
| 38 | <div class="form-clues-content echarts-box center" v-else>暂无数据</div> | 38 | <div class="from-clues-content center" v-else>暂无数据</div> | 
| 39 | </div> | 39 | </div> | 
| 40 | </template> | 40 | </template> | 
| 41 | <script> | 41 | <script> | 
| ... | @@ -123,10 +123,10 @@ export default { | ... | @@ -123,10 +123,10 @@ export default { | 
| 123 | // 绘制图表 | 123 | // 绘制图表 | 
| 124 | myChart.setOption({ | 124 | myChart.setOption({ | 
| 125 | legend: { | 125 | legend: { | 
| 126 | bottom: "2%", | 126 | bottom: "-1%", | 
| 127 | left: "center", | 127 | left: "center", | 
| 128 | textStyle: { | 128 | textStyle: { | 
| 129 | color: "#fff", | 129 | color: this.BASE_API.echartTextColor, | 
| 130 | }, | 130 | }, | 
| 131 | }, | 131 | }, | 
| 132 | tooltip: { | 132 | tooltip: { | 
| ... | @@ -141,7 +141,7 @@ export default { | ... | @@ -141,7 +141,7 @@ export default { | 
| 141 | name: "各业务类型办理数量", | 141 | name: "各业务类型办理数量", | 
| 142 | type: "pie", | 142 | type: "pie", | 
| 143 | radius: [0, 250], | 143 | radius: [0, 250], | 
| 144 | center: ["50%", "45%"], | 144 | center: ["50%", "32%"], | 
| 145 | roseType: "area", | 145 | roseType: "area", | 
| 146 | itemStyle: { | 146 | itemStyle: { | 
| 147 | borderRadius: 8, | 147 | borderRadius: 8, | 
| ... | @@ -227,7 +227,7 @@ export default { | ... | @@ -227,7 +227,7 @@ export default { | 
| 227 | top: 20, | 227 | top: 20, | 
| 228 | textStyle: { | 228 | textStyle: { | 
| 229 | show: true, | 229 | show: true, | 
| 230 | color: "#fff", | 230 | color: this.BASE_API.echartTextColor, | 
| 231 | fontSize: "16", | 231 | fontSize: "16", | 
| 232 | }, | 232 | }, | 
| 233 | }, | 233 | }, | 
| ... | @@ -239,7 +239,7 @@ export default { | ... | @@ -239,7 +239,7 @@ export default { | 
| 239 | interval: 0, | 239 | interval: 0, | 
| 240 | textStyle: { | 240 | textStyle: { | 
| 241 | show: true, | 241 | show: true, | 
| 242 | color: "#fff", | 242 | color: this.BASE_API.echartTextColor, | 
| 243 | fontSize: "16", | 243 | fontSize: "16", | 
| 244 | }, | 244 | }, | 
| 245 | }, | 245 | }, | 
| ... | @@ -250,13 +250,13 @@ export default { | ... | @@ -250,13 +250,13 @@ export default { | 
| 250 | type: "value", | 250 | type: "value", | 
| 251 | name: "单位:天", | 251 | name: "单位:天", | 
| 252 | nameTextStyle: { | 252 | nameTextStyle: { | 
| 253 | color: "#fff", | 253 | color: this.BASE_APIechartTextColor, | 
| 254 | fontSize: "16", | 254 | fontSize: "16", | 
| 255 | }, | 255 | }, | 
| 256 | axisLabel: { | 256 | axisLabel: { | 
| 257 | textStyle: { | 257 | textStyle: { | 
| 258 | show: true, | 258 | show: true, | 
| 259 | color: "#fff", | 259 | color: this.BASE_API.echartTextColor, | 
| 260 | fontSize: "16", | 260 | fontSize: "16", | 
| 261 | }, | 261 | }, | 
| 262 | }, | 262 | }, | 
| ... | @@ -322,8 +322,6 @@ export default { | ... | @@ -322,8 +322,6 @@ export default { | 
| 322 | </script> | 322 | </script> | 
| 323 | <style scoped lang="scss"> | 323 | <style scoped lang="scss"> | 
| 324 | .jktjDetail { | 324 | .jktjDetail { | 
| 325 | height: 100%; | ||
| 326 | display: flex; | ||
| 327 | flex-direction: column; | 325 | flex-direction: column; | 
| 328 | 326 | ||
| 329 | .rows { | 327 | .rows { | 
| ... | @@ -333,26 +331,6 @@ export default { | ... | @@ -333,26 +331,6 @@ export default { | 
| 333 | .center { | 331 | .center { | 
| 334 | line-height: 50vh; | 332 | line-height: 50vh; | 
| 335 | text-align: center; | 333 | text-align: center; | 
| 336 | } | ||
| 337 | |||
| 338 | .echarts-box { | ||
| 339 | display: flex; | ||
| 340 | justify-content: center; | ||
| 341 | |||
| 342 | .chart { | ||
| 343 | width: 40%; | ||
| 344 | height: 100%; | ||
| 345 | float: left; | ||
| 346 | } | ||
| 347 | |||
| 348 | .chart-bar { | ||
| 349 | width: 60%; | ||
| 350 | } | ||
| 351 | } | ||
| 352 | |||
| 353 | .form-clues-content { | ||
| 354 | flex: 1; | ||
| 355 | height: 100%; | ||
| 356 | color: #b6b5b5; | 334 | color: #b6b5b5; | 
| 357 | } | 335 | } | 
| 358 | } | 336 | } | ... | ... | 
| 1 | <template> | 1 | <template> | 
| 2 | <!-- 监控日志 --> | 2 | <!-- 监控日志 --> | 
| 3 | <div class="jktjDetail form-clues"> | 3 | <div class="jktjDetail from-clues"> | 
| 4 | <!-- 头部搜索 --> | 4 | <!-- 头部搜索 --> | 
| 5 | <div class="from-clues-header"> | 5 | <div class="from-clues-header"> | 
| 6 | <el-form ref="form" :model="form" label-width="80px"> | 6 | <el-form ref="form" :model="form" label-width="80px"> | 
| 7 | <el-form-item v-if="BASE_API.THEME=='jg'"> | 7 | <el-form-item v-if="BASE_API.THEME == 'jg'"> | 
| 8 | <Breadcrumb /> | 8 | <Breadcrumb /> | 
| 9 | </el-form-item> | 9 | </el-form-item> | 
| 10 | <el-row> | 10 | <el-row class="mb-5"> | 
| 11 | <el-col :span="4"> | 11 | <el-col :span="4"> | 
| 12 | <el-form-item label="行政区" class="d-flex"> | 12 | <el-form-item label="行政区" class="d-flex"> | 
| 13 | <el-select v-model="form.qxdm" class="width100" clearable placeholder="行政区"> | 13 | <el-select v-model="form.qxdm" class="width100" clearable placeholder="行政区"> | 
| ... | @@ -39,10 +39,10 @@ | ... | @@ -39,10 +39,10 @@ | 
| 39 | </el-form> | 39 | </el-form> | 
| 40 | </div> | 40 | </div> | 
| 41 | <!-- 图表 --> | 41 | <!-- 图表 --> | 
| 42 | <div class="form-clues-content echarts-box" v-if="chartData.length"> | 42 | <div class="from-clues-content echarts-box" v-if="chartData.length"> | 
| 43 | <div id="myChart" class="chart"></div> | 43 | <div id="myChart" class="chart" style="height:100%;width:100%;"></div> | 
| 44 | </div> | 44 | </div> | 
| 45 | <div class="form-clues-content echarts-box center" v-else>暂无数据</div> | 45 | <div class="from-clues-content echarts-box center" v-else>暂无数据</div> | 
| 46 | </div> | 46 | </div> | 
| 47 | </template> | 47 | </template> | 
| 48 | 48 | ||
| ... | @@ -136,7 +136,7 @@ export default { | ... | @@ -136,7 +136,7 @@ export default { | 
| 136 | axisPointer: { | 136 | axisPointer: { | 
| 137 | type: "cross", | 137 | type: "cross", | 
| 138 | crossStyle: { | 138 | crossStyle: { | 
| 139 | color: "#fff", | 139 | color: this.BASE_API.echartTextColor, | 
| 140 | }, | 140 | }, | 
| 141 | }, | 141 | }, | 
| 142 | }, | 142 | }, | 
| ... | @@ -145,7 +145,7 @@ export default { | ... | @@ -145,7 +145,7 @@ export default { | 
| 145 | top: '16', | 145 | top: '16', | 
| 146 | textStyle: { | 146 | textStyle: { | 
| 147 | show: true, | 147 | show: true, | 
| 148 | color: "#fff", | 148 | color: this.BASE_API.echartTextColor, | 
| 149 | fontSize: "16", | 149 | fontSize: "16", | 
| 150 | }, | 150 | }, | 
| 151 | }, | 151 | }, | 
| ... | @@ -162,7 +162,7 @@ export default { | ... | @@ -162,7 +162,7 @@ export default { | 
| 162 | axisLabel: { | 162 | axisLabel: { | 
| 163 | textStyle: { | 163 | textStyle: { | 
| 164 | show: true, | 164 | show: true, | 
| 165 | color: "#fff", | 165 | color: this.BASE_API.echartTextColor, | 
| 166 | fontSize: "16", | 166 | fontSize: "16", | 
| 167 | }, | 167 | }, | 
| 168 | formatter: function (val) { | 168 | formatter: function (val) { | 
| ... | @@ -195,7 +195,7 @@ export default { | ... | @@ -195,7 +195,7 @@ export default { | 
| 195 | type: "value", | 195 | type: "value", | 
| 196 | name: "数量/个", | 196 | name: "数量/个", | 
| 197 | nameTextStyle: { | 197 | nameTextStyle: { | 
| 198 | color: "#fff", | 198 | color: this.BASE_API.echartTextColor, | 
| 199 | fontSize: "16", | 199 | fontSize: "16", | 
| 200 | }, | 200 | }, | 
| 201 | // interval: this.interval, | 201 | // interval: this.interval, | 
| ... | @@ -203,7 +203,7 @@ export default { | ... | @@ -203,7 +203,7 @@ export default { | 
| 203 | formatter: "{value}", | 203 | formatter: "{value}", | 
| 204 | textStyle: { | 204 | textStyle: { | 
| 205 | show: true, | 205 | show: true, | 
| 206 | color: "#fff", | 206 | color: this.BASE_API.echartTextColor, | 
| 207 | fontSize: "16", | 207 | fontSize: "16", | 
| 208 | }, | 208 | }, | 
| 209 | }, | 209 | }, | 
| ... | @@ -212,7 +212,7 @@ export default { | ... | @@ -212,7 +212,7 @@ export default { | 
| 212 | type: "value", | 212 | type: "value", | 
| 213 | name: "成功率", | 213 | name: "成功率", | 
| 214 | nameTextStyle: { | 214 | nameTextStyle: { | 
| 215 | color: "#fff", | 215 | color: this.BASE_API.echartTextColor, | 
| 216 | fontSize: "16", | 216 | fontSize: "16", | 
| 217 | }, | 217 | }, | 
| 218 | splitNumber: 2, | 218 | splitNumber: 2, | 
| ... | @@ -220,7 +220,7 @@ export default { | ... | @@ -220,7 +220,7 @@ export default { | 
| 220 | formatter: "{value} %", | 220 | formatter: "{value} %", | 
| 221 | textStyle: { | 221 | textStyle: { | 
| 222 | show: true, | 222 | show: true, | 
| 223 | color: "#fff", | 223 | color: this.BASE_API.echartTextColor, | 
| 224 | fontSize: "16", | 224 | fontSize: "16", | 
| 225 | }, | 225 | }, | 
| 226 | }, | 226 | }, | 
| ... | @@ -287,8 +287,6 @@ export default { | ... | @@ -287,8 +287,6 @@ export default { | 
| 287 | </script> | 287 | </script> | 
| 288 | <style scoped lang="scss"> | 288 | <style scoped lang="scss"> | 
| 289 | .jktjDetail { | 289 | .jktjDetail { | 
| 290 | height: 100%; | ||
| 291 | display: flex; | ||
| 292 | flex-direction: column; | 290 | flex-direction: column; | 
| 293 | 291 | ||
| 294 | .rows { | 292 | .rows { | 
| ... | @@ -300,21 +298,5 @@ export default { | ... | @@ -300,21 +298,5 @@ export default { | 
| 300 | text-align: center; | 298 | text-align: center; | 
| 301 | color: #b6b5b5; | 299 | color: #b6b5b5; | 
| 302 | } | 300 | } | 
| 303 | |||
| 304 | .echarts-box { | ||
| 305 | display: flex; | ||
| 306 | justify-content: center; | ||
| 307 | height: 500px; | ||
| 308 | |||
| 309 | .chart { | ||
| 310 | width: 100%; | ||
| 311 | height: 100%; | ||
| 312 | } | ||
| 313 | } | ||
| 314 | |||
| 315 | .form-clues-content { | ||
| 316 | flex: 1; | ||
| 317 | height: 100%; | ||
| 318 | } | ||
| 319 | } | 301 | } | 
| 320 | </style> | 302 | </style> | ... | ... | 
| 1 | <template> | 1 | <template> | 
| 2 | <!-- 监控日志 --> | 2 | <!-- 监控日志 --> | 
| 3 | <div class="jktjDetail form-clues"> | 3 | <div class="jktjDetail from-clues"> | 
| 4 | <!-- 头部搜索 --> | 4 | <!-- 头部搜索 --> | 
| 5 | <div class="from-clues-header"> | 5 | <div class="from-clues-header"> | 
| 6 | <el-form ref="form" :model="form" label-width="100px"> | 6 | <el-form ref="form" :model="form" label-width="100px"> | 
| 7 | <el-form-item v-if="BASE_API.THEME == 'jg'"> | 7 | <el-form-item v-if="BASE_API.THEME == 'jg'"> | 
| 8 | <Breadcrumb /> | 8 | <Breadcrumb /> | 
| 9 | </el-form-item> | 9 | </el-form-item> | 
| 10 | <el-row> | 10 | <el-row class="mb-5"> | 
| 11 | <el-col :span="4"> | 11 | <el-col :span="4"> | 
| 12 | <el-form-item label="行政区" class="d-flex"> | 12 | <el-form-item label="行政区" class="d-flex"> | 
| 13 | <el-select v-model="form.qxdm" class="width100" clearable placeholder="行政区"> | 13 | <el-select v-model="form.qxdm" class="width100" clearable placeholder="行政区"> | 
| ... | @@ -39,13 +39,12 @@ | ... | @@ -39,13 +39,12 @@ | 
| 39 | </el-form> | 39 | </el-form> | 
| 40 | </div> | 40 | </div> | 
| 41 | <!-- 图表 --> | 41 | <!-- 图表 --> | 
| 42 | <div class="form-clues-content echarts-box" v-if="chartData.length"> | 42 | <div class="from-clues-content echarts-box" v-if="chartData.length"> | 
| 43 | <div id="myChart" class="chart"></div> | 43 | <div id="myChart" class="chart" style="height:100%;width:100%;"></div> | 
| 44 | </div> | 44 | </div> | 
| 45 | <div class="form-clues-content echarts-box center" v-else>暂无数据</div> | 45 | <div class="from-clues-content echarts-box center" v-else>暂无数据</div> | 
| 46 | </div> | 46 | </div> | 
| 47 | </template> | 47 | </template> | 
| 48 | |||
| 49 | <script> | 48 | <script> | 
| 50 | import { mapGetters } from "vuex"; | 49 | import { mapGetters } from "vuex"; | 
| 51 | import efficient from "@/api/efficient"; | 50 | import efficient from "@/api/efficient"; | 
| ... | @@ -168,7 +167,7 @@ export default { | ... | @@ -168,7 +167,7 @@ export default { | 
| 168 | }, | 167 | }, | 
| 169 | textStyle: { | 168 | textStyle: { | 
| 170 | show: true, | 169 | show: true, | 
| 171 | color: "#fff", | 170 | color: this.BASE_API.echartTextColor, | 
| 172 | fontSize: "16", | 171 | fontSize: "16", | 
| 173 | }, | 172 | }, | 
| 174 | }, | 173 | }, | 
| ... | @@ -179,13 +178,13 @@ export default { | ... | @@ -179,13 +178,13 @@ export default { | 
| 179 | type: "value", | 178 | type: "value", | 
| 180 | name: "数量/个", | 179 | name: "数量/个", | 
| 181 | nameTextStyle: { | 180 | nameTextStyle: { | 
| 182 | color: "#fff", | 181 | color: this.BASE_API.echartTextColor, | 
| 183 | fontSize: "16", | 182 | fontSize: "16", | 
| 184 | }, | 183 | }, | 
| 185 | axisLabel: { | 184 | axisLabel: { | 
| 186 | textStyle: { | 185 | textStyle: { | 
| 187 | show: true, | 186 | show: true, | 
| 188 | color: "#fff", | 187 | color: this.BASE_API.echartTextColor, | 
| 189 | fontSize: "16", | 188 | fontSize: "16", | 
| 190 | }, | 189 | }, | 
| 191 | }, | 190 | }, | 
| ... | @@ -215,8 +214,6 @@ export default { | ... | @@ -215,8 +214,6 @@ export default { | 
| 215 | </script> | 214 | </script> | 
| 216 | <style scoped lang="scss"> | 215 | <style scoped lang="scss"> | 
| 217 | .jktjDetail { | 216 | .jktjDetail { | 
| 218 | height: 100%; | ||
| 219 | display: flex; | ||
| 220 | flex-direction: column; | 217 | flex-direction: column; | 
| 221 | 218 | ||
| 222 | .rows { | 219 | .rows { | 
| ... | @@ -228,21 +225,5 @@ export default { | ... | @@ -228,21 +225,5 @@ export default { | 
| 228 | text-align: center; | 225 | text-align: center; | 
| 229 | color: #b6b5b5; | 226 | color: #b6b5b5; | 
| 230 | } | 227 | } | 
| 231 | |||
| 232 | .echarts-box { | ||
| 233 | display: flex; | ||
| 234 | justify-content: center; | ||
| 235 | height: 500px; | ||
| 236 | |||
| 237 | .chart { | ||
| 238 | width: 100%; | ||
| 239 | height: 100%; | ||
| 240 | } | ||
| 241 | } | ||
| 242 | |||
| 243 | .form-clues-content { | ||
| 244 | flex: 1; | ||
| 245 | height: 100%; | ||
| 246 | } | ||
| 247 | } | 228 | } | 
| 248 | </style> | 229 | </style> | ... | ... | 
| ... | @@ -33,7 +33,7 @@ | ... | @@ -33,7 +33,7 @@ | 
| 33 | </div> | 33 | </div> | 
| 34 | <!-- 列表区域 --> | 34 | <!-- 列表区域 --> | 
| 35 | <div class="from-clues-content complex-header"> | 35 | <div class="from-clues-content complex-header"> | 
| 36 | <lb-table ref="table" :header-cell-style="headerStyle1" :calcHeight="200" :pagination="false" | 36 | <lb-table ref="table" :header-cell-style="headerStyle1" :calcHeight="BASE_API.calcHeight" :pagination="false" | 
| 37 | :column="tableData.columns" :data="tableData.data"> | 37 | :column="tableData.columns" :data="tableData.data"> | 
| 38 | </lb-table> | 38 | </lb-table> | 
| 39 | 39 | ... | ... | 
| ... | @@ -34,7 +34,7 @@ | ... | @@ -34,7 +34,7 @@ | 
| 34 | </div> | 34 | </div> | 
| 35 | <!-- 列表区域 --> | 35 | <!-- 列表区域 --> | 
| 36 | <div class="from-clues-content complex-header"> | 36 | <div class="from-clues-content complex-header"> | 
| 37 | <lb-table ref="table" :pagination="false" :calcHeight="200" :column="tableData.columns" :data="tableData.data"> | 37 | <lb-table ref="table" :pagination="false" :calcHeight="BASE_API.calcHeight" :column="tableData.columns" :data="tableData.data"> | 
| 38 | </lb-table> | 38 | </lb-table> | 
| 39 | <down-lb-table ref="table" v-show="false" :id="'mytable'" :downExcel="true" :pagination="false" | 39 | <down-lb-table ref="table" v-show="false" :id="'mytable'" :downExcel="true" :pagination="false" | 
| 40 | :column="tableData.columns" :data="tableData.data" :downTitle="downTitle"> | 40 | :column="tableData.columns" :data="tableData.data" :downTitle="downTitle"> | ... | ... | 
| ... | @@ -2,7 +2,7 @@ | ... | @@ -2,7 +2,7 @@ | 
| 2 | * @Author: yangwei | 2 | * @Author: yangwei | 
| 3 | * @Date: 2023-02-17 16:32:50 | 3 | * @Date: 2023-02-17 16:32:50 | 
| 4 | * @LastEditors: Please set LastEditors | 4 | * @LastEditors: Please set LastEditors | 
| 5 | * @LastEditTime: 2023-03-27 14:58:51 | 5 | * @LastEditTime: 2023-03-28 10:24:52 | 
| 6 | * @FilePath: \bdcjg-web\src\views\statistics\registerBookQuality\index.vue | 6 | * @FilePath: \bdcjg-web\src\views\statistics\registerBookQuality\index.vue | 
| 7 | * @Description: | 7 | * @Description: | 
| 8 | * | 8 | * | 
| ... | @@ -43,8 +43,8 @@ | ... | @@ -43,8 +43,8 @@ | 
| 43 | </div> | 43 | </div> | 
| 44 | <!-- 列表区域 --> | 44 | <!-- 列表区域 --> | 
| 45 | <div class="from-clues-content complex-header"> | 45 | <div class="from-clues-content complex-header"> | 
| 46 | <lb-table ref="table" :pagination="false" :border="true" :calcHeight="200" :header-cell-style="headerStyle" | 46 | <lb-table ref="table" :pagination="false" :border="true" :calcHeight="BASE_API.calcHeight" | 
| 47 | :column="tableData.columns" :data="tableData.data"> | 47 | :header-cell-style="headerStyle" :column="tableData.columns" :data="tableData.data"> | 
| 48 | </lb-table> | 48 | </lb-table> | 
| 49 | <down-lb-table ref="table" v-show="false" :id="'mytable'" :header-cell-style="headerStyle1" :downExcel="true" | 49 | <down-lb-table ref="table" v-show="false" :id="'mytable'" :header-cell-style="headerStyle1" :downExcel="true" | 
| 50 | :pagination="false" :column="tableData.columns" :data="tableData.data" :downTitle="downTitle"> | 50 | :pagination="false" :column="tableData.columns" :data="tableData.data" :downTitle="downTitle"> | ... | ... | 
- 
Please register or sign in to post a comment