Merge branch 'dev' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web into dev
Showing
12 changed files
with
1352 additions
and
8 deletions
| ... | @@ -17,6 +17,7 @@ | ... | @@ -17,6 +17,7 @@ |
| 17 | "bpmn-js-token-simulation": "^0.10.0", | 17 | "bpmn-js-token-simulation": "^0.10.0", |
| 18 | "core-js": "^3.6.5", | 18 | "core-js": "^3.6.5", |
| 19 | "diagram-js": "^6.8.2", | 19 | "diagram-js": "^6.8.2", |
| 20 | "echarts": "^5.4.3", | ||
| 20 | "js-cookie": "2.2.0", | 21 | "js-cookie": "2.2.0", |
| 21 | "lodash": "^4.17.21", | 22 | "lodash": "^4.17.21", |
| 22 | "mxdraw": "^0.1.157", | 23 | "mxdraw": "^0.1.157", | ... | ... |
| ... | @@ -294,16 +294,22 @@ export const asyncRoutes = [ | ... | @@ -294,16 +294,22 @@ export const asyncRoutes = [ |
| 294 | name: 'tjfx', | 294 | name: 'tjfx', |
| 295 | children: [ | 295 | children: [ |
| 296 | { | 296 | { |
| 297 | path: 'ywltj', | 297 | path: 'bdcdjtjfx', |
| 298 | component: () => import('@/views/tjfx/ywltj/index.vue'), | 298 | component: () => import('@/views/tjfx/bdcdjtjfx/index.vue'), |
| 299 | name: 'qyxxba', | 299 | name: 'bdcdjtjfx', |
| 300 | meta: { title: '业务量统计' } | 300 | meta: { title: '不动产登记统计分析' } |
| 301 | }, | ||
| 302 | { | ||
| 303 | path: 'tjltj', | ||
| 304 | component: () => import('@/views/tjfx/tjltj/index.vue'), | ||
| 305 | name: 'tjltj', | ||
| 306 | meta: { title: '退件率统计' } | ||
| 301 | }, | 307 | }, |
| 302 | { | 308 | { |
| 303 | path: 'gzltj', | 309 | path: 'cstj', |
| 304 | component: () => import('@/views/tjfx/gzltj/index.vue'), | 310 | component: () => import('@/views/tjfx/cstj/index.vue'), |
| 305 | name: 'gzltj', | 311 | name: 'cstj', |
| 306 | meta: { title: '工作量统计' } | 312 | meta: { title: '超时统计' } |
| 307 | } | 313 | } |
| 308 | ] | 314 | ] |
| 309 | }, | 315 | }, | ... | ... |
src/views/tjfx/bdcdjtjfx/components/djlx.vue
0 → 100644
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-08-25 08:59:04 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div class="djlx"> | ||
| 8 | <div class="inquire"> | ||
| 9 | <el-form :model="queryForm" ref="queryForm" label-width="100px"> | ||
| 10 | <el-row> | ||
| 11 | <el-col :span="6"> | ||
| 12 | <el-form-item label="开始时间" class="width100"> | ||
| 13 | <el-date-picker | ||
| 14 | v-model="queryForm.kssj" | ||
| 15 | class="width100" | ||
| 16 | type="date" | ||
| 17 | placeholder="选择日期" | ||
| 18 | value-format="yyyy-MM-dd HH:mm:ss" | ||
| 19 | format="yyyy-MM-dd" | ||
| 20 | ></el-date-picker> | ||
| 21 | </el-form-item> | ||
| 22 | </el-col> | ||
| 23 | <el-col :span="6"> | ||
| 24 | <el-form-item label="结束时间" class="width100"> | ||
| 25 | <el-date-picker | ||
| 26 | v-model="queryForm.kssj" | ||
| 27 | class="width100" | ||
| 28 | type="date" | ||
| 29 | placeholder="选择日期" | ||
| 30 | value-format="yyyy-MM-dd HH:mm:ss" | ||
| 31 | format="yyyy-MM-dd" | ||
| 32 | ></el-date-picker> | ||
| 33 | </el-form-item> | ||
| 34 | </el-col> | ||
| 35 | <el-col :span="6"> | ||
| 36 | <el-form-item label="区域" class="width100"> | ||
| 37 | <el-select | ||
| 38 | v-model="queryForm.qy" | ||
| 39 | class="width100" | ||
| 40 | clearable | ||
| 41 | placeholder="请选择权利类型" | ||
| 42 | > | ||
| 43 | <el-option | ||
| 44 | v-for="item in dictData['A8']" | ||
| 45 | :key="item.dcode" | ||
| 46 | :label="item.dname" | ||
| 47 | :value="item.dcode" | ||
| 48 | > | ||
| 49 | </el-option> | ||
| 50 | </el-select> | ||
| 51 | </el-form-item> | ||
| 52 | </el-col> | ||
| 53 | <el-col :span="5" class="btnColRight"> | ||
| 54 | <el-form-item> | ||
| 55 | <el-button | ||
| 56 | type="primary" | ||
| 57 | native-type="submit" | ||
| 58 | @click="handleSearch" | ||
| 59 | >查询</el-button | ||
| 60 | > | ||
| 61 | </el-form-item> | ||
| 62 | </el-col> | ||
| 63 | </el-row> | ||
| 64 | </el-form> | ||
| 65 | </div> | ||
| 66 | <div class="concent"> | ||
| 67 | <div class="left"> | ||
| 68 | <el-table | ||
| 69 | height="187" | ||
| 70 | stripe | ||
| 71 | :data="tableList" | ||
| 72 | size="mini" | ||
| 73 | border | ||
| 74 | header-cell-class-name="table-header-gray" | ||
| 75 | > | ||
| 76 | <el-table-column | ||
| 77 | label="类型" | ||
| 78 | prop="name" | ||
| 79 | minWidth="100" | ||
| 80 | align="center" /> | ||
| 81 | <el-table-column | ||
| 82 | label="数量" | ||
| 83 | prop="agent" | ||
| 84 | minWidth="120" | ||
| 85 | align="center" | ||
| 86 | /></el-table> | ||
| 87 | </div> | ||
| 88 | <div class="right"> | ||
| 89 | <div ref="chart" style="width: 100%; height: 200px"></div> | ||
| 90 | </div> | ||
| 91 | </div> | ||
| 92 | </div> | ||
| 93 | </template> | ||
| 94 | <script> | ||
| 95 | import * as echarts from "echarts"; | ||
| 96 | import { mapGetters } from "vuex"; | ||
| 97 | export default { | ||
| 98 | components: {}, | ||
| 99 | computed: { | ||
| 100 | ...mapGetters(["dictData", "transfer"]), | ||
| 101 | }, | ||
| 102 | data () { | ||
| 103 | return { | ||
| 104 | queryForm: {}, | ||
| 105 | tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23], | ||
| 106 | }; | ||
| 107 | }, | ||
| 108 | mounted() { | ||
| 109 | // 创建一个 ECharts 实例 | ||
| 110 | this.chart = echarts.init(this.$refs.chart); | ||
| 111 | // 在 ECharts 实例中配置图表 | ||
| 112 | this.chart.setOption(this.getOption()); | ||
| 113 | }, | ||
| 114 | methods: { | ||
| 115 | getOption() { | ||
| 116 | return { | ||
| 117 | |||
| 118 | tooltip: { | ||
| 119 | trigger: "item", | ||
| 120 | formatter: "{a} <br/>{b}: {c} ({d}%)", | ||
| 121 | }, | ||
| 122 | series: [ | ||
| 123 | { | ||
| 124 | name: "饼图名称", | ||
| 125 | type: "pie", | ||
| 126 | radius: ["20%", "70%"], | ||
| 127 | avoidLabelOverlap: false, | ||
| 128 | label: { | ||
| 129 | show: false, | ||
| 130 | position: "center", | ||
| 131 | }, | ||
| 132 | emphasis: { | ||
| 133 | label: { | ||
| 134 | show: true, | ||
| 135 | fontSize: "30", | ||
| 136 | fontWeight: "bold", | ||
| 137 | }, | ||
| 138 | }, | ||
| 139 | labelLine: { | ||
| 140 | show: false, | ||
| 141 | }, | ||
| 142 | data: [ | ||
| 143 | { value: 335, name: "数据1" }, | ||
| 144 | { value: 310, name: "数据2" }, | ||
| 145 | { value: 234, name: "数据3" }, | ||
| 146 | { value: 135, name: "数据4" }, | ||
| 147 | { value: 1548, name: "数据5" }, | ||
| 148 | ], | ||
| 149 | }, | ||
| 150 | ], | ||
| 151 | }; | ||
| 152 | }, | ||
| 153 | |||
| 154 | handleSearch() {}, | ||
| 155 | }, | ||
| 156 | }; | ||
| 157 | </script> | ||
| 158 | <style scoped lang="scss"> | ||
| 159 | /deep/.el-card__header { | ||
| 160 | padding: 8px 10px; | ||
| 161 | } | ||
| 162 | |||
| 163 | /deep/.el-card__body { | ||
| 164 | padding: 3px 10px 5px 10px; | ||
| 165 | overflow: hidden; | ||
| 166 | } | ||
| 167 | .yhjgba { | ||
| 168 | .el-col { | ||
| 169 | padding: 4px; | ||
| 170 | } | ||
| 171 | .inquire { | ||
| 172 | width: 100%; | ||
| 173 | height: 40px; | ||
| 174 | border: 1px solid rgb(184, 217, 243); | ||
| 175 | // background-color: rebeccapurple; | ||
| 176 | } | ||
| 177 | .concent { | ||
| 178 | width: 100%; | ||
| 179 | height: 300px; | ||
| 180 | display: flex; | ||
| 181 | .left { | ||
| 182 | width: 70%; | ||
| 183 | height: 200px; | ||
| 184 | } | ||
| 185 | .right { | ||
| 186 | width: 30%; | ||
| 187 | height: 200px; | ||
| 188 | } | ||
| 189 | } | ||
| 190 | } | ||
| 191 | </style> |
src/views/tjfx/bdcdjtjfx/components/qytj.vue
0 → 100644
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-08-25 08:59:04 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div class="djlx"> | ||
| 8 | <div class="inquire"> | ||
| 9 | <el-form :model="queryForm" ref="queryForm" label-width="100px"> | ||
| 10 | <el-row> | ||
| 11 | <el-col :span="6"> | ||
| 12 | <el-form-item label="开始时间" class="width100"> | ||
| 13 | <el-date-picker | ||
| 14 | v-model="queryForm.kssj" | ||
| 15 | class="width100" | ||
| 16 | type="date" | ||
| 17 | placeholder="选择日期" | ||
| 18 | value-format="yyyy-MM-dd HH:mm:ss" | ||
| 19 | format="yyyy-MM-dd" | ||
| 20 | ></el-date-picker> | ||
| 21 | </el-form-item> | ||
| 22 | </el-col> | ||
| 23 | <el-col :span="6"> | ||
| 24 | <el-form-item label="结束时间" class="width100"> | ||
| 25 | <el-date-picker | ||
| 26 | v-model="queryForm.kssj" | ||
| 27 | class="width100" | ||
| 28 | type="date" | ||
| 29 | placeholder="选择日期" | ||
| 30 | value-format="yyyy-MM-dd HH:mm:ss" | ||
| 31 | format="yyyy-MM-dd" | ||
| 32 | ></el-date-picker> | ||
| 33 | </el-form-item> | ||
| 34 | </el-col> | ||
| 35 | <el-col :span="6"> | ||
| 36 | <el-form-item label="区域" class="width100"> | ||
| 37 | <el-select | ||
| 38 | v-model="queryForm.qy" | ||
| 39 | class="width100" | ||
| 40 | clearable | ||
| 41 | placeholder="请选择权利类型" | ||
| 42 | > | ||
| 43 | <el-option | ||
| 44 | v-for="item in dictData['A8']" | ||
| 45 | :key="item.dcode" | ||
| 46 | :label="item.dname" | ||
| 47 | :value="item.dcode" | ||
| 48 | > | ||
| 49 | </el-option> | ||
| 50 | </el-select> | ||
| 51 | </el-form-item> | ||
| 52 | </el-col> | ||
| 53 | <el-col :span="5" class="btnColRight"> | ||
| 54 | <el-form-item> | ||
| 55 | <el-button | ||
| 56 | type="primary" | ||
| 57 | native-type="submit" | ||
| 58 | @click="handleSearch" | ||
| 59 | >查询</el-button | ||
| 60 | > | ||
| 61 | </el-form-item> | ||
| 62 | </el-col> | ||
| 63 | </el-row> | ||
| 64 | </el-form> | ||
| 65 | </div> | ||
| 66 | <div class="concent"> | ||
| 67 | <div class="left"> | ||
| 68 | <el-table | ||
| 69 | height="187" | ||
| 70 | stripe | ||
| 71 | :data="tableList" | ||
| 72 | size="mini" | ||
| 73 | border | ||
| 74 | header-cell-class-name="table-header-gray" | ||
| 75 | > | ||
| 76 | <el-table-column | ||
| 77 | label="类型" | ||
| 78 | prop="name" | ||
| 79 | minWidth="100" | ||
| 80 | align="center" /> | ||
| 81 | <el-table-column | ||
| 82 | label="数量" | ||
| 83 | prop="agent" | ||
| 84 | minWidth="120" | ||
| 85 | align="center" | ||
| 86 | /></el-table> | ||
| 87 | </div> | ||
| 88 | <div class="right"> | ||
| 89 | <div ref="chart" style="width: 100%; height: 200px"></div> | ||
| 90 | </div> | ||
| 91 | </div> | ||
| 92 | </div> | ||
| 93 | </template> | ||
| 94 | <script> | ||
| 95 | import * as echarts from "echarts"; | ||
| 96 | import { mapGetters } from "vuex"; | ||
| 97 | export default { | ||
| 98 | components: {}, | ||
| 99 | computed: { | ||
| 100 | ...mapGetters(["dictData", "transfer"]), | ||
| 101 | }, | ||
| 102 | data () { | ||
| 103 | return { | ||
| 104 | queryForm: {}, | ||
| 105 | tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23], | ||
| 106 | }; | ||
| 107 | }, | ||
| 108 | mounted() { | ||
| 109 | // 创建一个 ECharts 实例 | ||
| 110 | this.chart = echarts.init(this.$refs.chart); | ||
| 111 | // 在 ECharts 实例中配置图表 | ||
| 112 | this.chart.setOption(this.getOption()); | ||
| 113 | }, | ||
| 114 | methods: { | ||
| 115 | getOption() { | ||
| 116 | return { | ||
| 117 | |||
| 118 | tooltip: { | ||
| 119 | trigger: "item", | ||
| 120 | formatter: "{a} <br/>{b}: {c} ({d}%)", | ||
| 121 | }, | ||
| 122 | series: [ | ||
| 123 | { | ||
| 124 | name: "饼图名称", | ||
| 125 | type: "pie", | ||
| 126 | radius: ["20%", "70%"], | ||
| 127 | avoidLabelOverlap: false, | ||
| 128 | label: { | ||
| 129 | show: false, | ||
| 130 | position: "center", | ||
| 131 | }, | ||
| 132 | emphasis: { | ||
| 133 | label: { | ||
| 134 | show: true, | ||
| 135 | fontSize: "30", | ||
| 136 | fontWeight: "bold", | ||
| 137 | }, | ||
| 138 | }, | ||
| 139 | labelLine: { | ||
| 140 | show: false, | ||
| 141 | }, | ||
| 142 | data: [ | ||
| 143 | { value: 335, name: "数据1" }, | ||
| 144 | { value: 310, name: "数据2" }, | ||
| 145 | { value: 234, name: "数据3" }, | ||
| 146 | { value: 135, name: "数据4" }, | ||
| 147 | { value: 1548, name: "数据5" }, | ||
| 148 | ], | ||
| 149 | }, | ||
| 150 | ], | ||
| 151 | }; | ||
| 152 | }, | ||
| 153 | |||
| 154 | handleSearch() {}, | ||
| 155 | }, | ||
| 156 | }; | ||
| 157 | </script> | ||
| 158 | <style scoped lang="scss"> | ||
| 159 | /deep/.el-card__header { | ||
| 160 | padding: 8px 10px; | ||
| 161 | } | ||
| 162 | |||
| 163 | /deep/.el-card__body { | ||
| 164 | padding: 3px 10px 5px 10px; | ||
| 165 | overflow: hidden; | ||
| 166 | } | ||
| 167 | .yhjgba { | ||
| 168 | .el-col { | ||
| 169 | padding: 4px; | ||
| 170 | } | ||
| 171 | .inquire { | ||
| 172 | width: 100%; | ||
| 173 | height: 40px; | ||
| 174 | border: 1px solid rgb(184, 217, 243); | ||
| 175 | // background-color: rebeccapurple; | ||
| 176 | } | ||
| 177 | .concent { | ||
| 178 | width: 100%; | ||
| 179 | height: 300px; | ||
| 180 | display: flex; | ||
| 181 | .left { | ||
| 182 | width: 70%; | ||
| 183 | height: 200px; | ||
| 184 | } | ||
| 185 | .right { | ||
| 186 | width: 30%; | ||
| 187 | height: 200px; | ||
| 188 | } | ||
| 189 | } | ||
| 190 | } | ||
| 191 | </style> |
src/views/tjfx/bdcdjtjfx/components/sjr.vue
0 → 100644
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-08-25 08:59:04 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div class="djlx"> | ||
| 8 | <div class="inquire"> | ||
| 9 | <el-form :model="queryForm" ref="queryForm" label-width="100px"> | ||
| 10 | <el-row> | ||
| 11 | <el-col :span="6"> | ||
| 12 | <el-form-item label="开始时间" class="width100"> | ||
| 13 | <el-date-picker | ||
| 14 | v-model="queryForm.kssj" | ||
| 15 | class="width100" | ||
| 16 | type="date" | ||
| 17 | placeholder="选择日期" | ||
| 18 | value-format="yyyy-MM-dd HH:mm:ss" | ||
| 19 | format="yyyy-MM-dd" | ||
| 20 | ></el-date-picker> | ||
| 21 | </el-form-item> | ||
| 22 | </el-col> | ||
| 23 | <el-col :span="6"> | ||
| 24 | <el-form-item label="结束时间" class="width100"> | ||
| 25 | <el-date-picker | ||
| 26 | v-model="queryForm.kssj" | ||
| 27 | class="width100" | ||
| 28 | type="date" | ||
| 29 | placeholder="选择日期" | ||
| 30 | value-format="yyyy-MM-dd HH:mm:ss" | ||
| 31 | format="yyyy-MM-dd" | ||
| 32 | ></el-date-picker> | ||
| 33 | </el-form-item> | ||
| 34 | </el-col> | ||
| 35 | <el-col :span="6"> | ||
| 36 | <el-form-item label="区域" class="width100"> | ||
| 37 | <el-select | ||
| 38 | v-model="queryForm.qy" | ||
| 39 | class="width100" | ||
| 40 | clearable | ||
| 41 | placeholder="请选择权利类型" | ||
| 42 | > | ||
| 43 | <el-option | ||
| 44 | v-for="item in dictData['A8']" | ||
| 45 | :key="item.dcode" | ||
| 46 | :label="item.dname" | ||
| 47 | :value="item.dcode" | ||
| 48 | > | ||
| 49 | </el-option> | ||
| 50 | </el-select> | ||
| 51 | </el-form-item> | ||
| 52 | </el-col> | ||
| 53 | <el-col :span="5" class="btnColRight"> | ||
| 54 | <el-form-item> | ||
| 55 | <el-button | ||
| 56 | type="primary" | ||
| 57 | native-type="submit" | ||
| 58 | @click="handleSearch" | ||
| 59 | >查询</el-button | ||
| 60 | > | ||
| 61 | </el-form-item> | ||
| 62 | </el-col> | ||
| 63 | </el-row> | ||
| 64 | </el-form> | ||
| 65 | </div> | ||
| 66 | <div class="concent"> | ||
| 67 | <div class="left"> | ||
| 68 | <el-table | ||
| 69 | height="187" | ||
| 70 | stripe | ||
| 71 | :data="tableList" | ||
| 72 | size="mini" | ||
| 73 | border | ||
| 74 | header-cell-class-name="table-header-gray" | ||
| 75 | > | ||
| 76 | <el-table-column | ||
| 77 | label="类型" | ||
| 78 | prop="name" | ||
| 79 | minWidth="100" | ||
| 80 | align="center" /> | ||
| 81 | <el-table-column | ||
| 82 | label="数量" | ||
| 83 | prop="agent" | ||
| 84 | minWidth="120" | ||
| 85 | align="center" | ||
| 86 | /></el-table> | ||
| 87 | </div> | ||
| 88 | <div class="right"> | ||
| 89 | <div ref="chart" style="width: 100%; height: 200px"></div> | ||
| 90 | </div> | ||
| 91 | </div> | ||
| 92 | </div> | ||
| 93 | </template> | ||
| 94 | <script> | ||
| 95 | import * as echarts from "echarts"; | ||
| 96 | import { mapGetters } from "vuex"; | ||
| 97 | export default { | ||
| 98 | components: {}, | ||
| 99 | computed: { | ||
| 100 | ...mapGetters(["dictData", "transfer"]), | ||
| 101 | }, | ||
| 102 | data () { | ||
| 103 | return { | ||
| 104 | queryForm: {}, | ||
| 105 | tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23], | ||
| 106 | }; | ||
| 107 | }, | ||
| 108 | mounted() { | ||
| 109 | // 创建一个 ECharts 实例 | ||
| 110 | this.chart = echarts.init(this.$refs.chart); | ||
| 111 | // 在 ECharts 实例中配置图表 | ||
| 112 | this.chart.setOption(this.getOption()); | ||
| 113 | }, | ||
| 114 | methods: { | ||
| 115 | getOption() { | ||
| 116 | return { | ||
| 117 | |||
| 118 | tooltip: { | ||
| 119 | trigger: "item", | ||
| 120 | formatter: "{a} <br/>{b}: {c} ({d}%)", | ||
| 121 | }, | ||
| 122 | series: [ | ||
| 123 | { | ||
| 124 | name: "饼图名称", | ||
| 125 | type: "pie", | ||
| 126 | radius: ["20%", "70%"], | ||
| 127 | avoidLabelOverlap: false, | ||
| 128 | label: { | ||
| 129 | show: false, | ||
| 130 | position: "center", | ||
| 131 | }, | ||
| 132 | emphasis: { | ||
| 133 | label: { | ||
| 134 | show: true, | ||
| 135 | fontSize: "30", | ||
| 136 | fontWeight: "bold", | ||
| 137 | }, | ||
| 138 | }, | ||
| 139 | labelLine: { | ||
| 140 | show: false, | ||
| 141 | }, | ||
| 142 | data: [ | ||
| 143 | { value: 335, name: "数据1" }, | ||
| 144 | { value: 310, name: "数据2" }, | ||
| 145 | { value: 234, name: "数据3" }, | ||
| 146 | { value: 135, name: "数据4" }, | ||
| 147 | { value: 1548, name: "数据5" }, | ||
| 148 | ], | ||
| 149 | }, | ||
| 150 | ], | ||
| 151 | }; | ||
| 152 | }, | ||
| 153 | |||
| 154 | handleSearch() {}, | ||
| 155 | }, | ||
| 156 | }; | ||
| 157 | </script> | ||
| 158 | <style scoped lang="scss"> | ||
| 159 | /deep/.el-card__header { | ||
| 160 | padding: 8px 10px; | ||
| 161 | } | ||
| 162 | |||
| 163 | /deep/.el-card__body { | ||
| 164 | padding: 3px 10px 5px 10px; | ||
| 165 | overflow: hidden; | ||
| 166 | } | ||
| 167 | .yhjgba { | ||
| 168 | .el-col { | ||
| 169 | padding: 4px; | ||
| 170 | } | ||
| 171 | .inquire { | ||
| 172 | width: 100%; | ||
| 173 | height: 40px; | ||
| 174 | border: 1px solid rgb(184, 217, 243); | ||
| 175 | // background-color: rebeccapurple; | ||
| 176 | } | ||
| 177 | .concent { | ||
| 178 | width: 100%; | ||
| 179 | height: 300px; | ||
| 180 | display: flex; | ||
| 181 | .left { | ||
| 182 | width: 70%; | ||
| 183 | height: 200px; | ||
| 184 | } | ||
| 185 | .right { | ||
| 186 | width: 30%; | ||
| 187 | height: 200px; | ||
| 188 | } | ||
| 189 | } | ||
| 190 | } | ||
| 191 | </style> |
src/views/tjfx/bdcdjtjfx/components/sjri.vue
0 → 100644
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-08-25 08:59:04 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div class="djlx"> | ||
| 8 | <div class="inquire"> | ||
| 9 | <el-form :model="queryForm" ref="queryForm" label-width="100px"> | ||
| 10 | <el-row> | ||
| 11 | <el-col :span="6"> | ||
| 12 | <el-form-item label="开始时间" class="width100"> | ||
| 13 | <el-date-picker | ||
| 14 | v-model="queryForm.kssj" | ||
| 15 | class="width100" | ||
| 16 | type="date" | ||
| 17 | placeholder="选择日期" | ||
| 18 | value-format="yyyy-MM-dd HH:mm:ss" | ||
| 19 | format="yyyy-MM-dd" | ||
| 20 | ></el-date-picker> | ||
| 21 | </el-form-item> | ||
| 22 | </el-col> | ||
| 23 | <el-col :span="6"> | ||
| 24 | <el-form-item label="结束时间" class="width100"> | ||
| 25 | <el-date-picker | ||
| 26 | v-model="queryForm.kssj" | ||
| 27 | class="width100" | ||
| 28 | type="date" | ||
| 29 | placeholder="选择日期" | ||
| 30 | value-format="yyyy-MM-dd HH:mm:ss" | ||
| 31 | format="yyyy-MM-dd" | ||
| 32 | ></el-date-picker> | ||
| 33 | </el-form-item> | ||
| 34 | </el-col> | ||
| 35 | <el-col :span="6"> | ||
| 36 | <el-form-item label="区域" class="width100"> | ||
| 37 | <el-select | ||
| 38 | v-model="queryForm.qy" | ||
| 39 | class="width100" | ||
| 40 | clearable | ||
| 41 | placeholder="请选择权利类型" | ||
| 42 | > | ||
| 43 | <el-option | ||
| 44 | v-for="item in dictData['A8']" | ||
| 45 | :key="item.dcode" | ||
| 46 | :label="item.dname" | ||
| 47 | :value="item.dcode" | ||
| 48 | > | ||
| 49 | </el-option> | ||
| 50 | </el-select> | ||
| 51 | </el-form-item> | ||
| 52 | </el-col> | ||
| 53 | <el-col :span="5" class="btnColRight"> | ||
| 54 | <el-form-item> | ||
| 55 | <el-button | ||
| 56 | type="primary" | ||
| 57 | native-type="submit" | ||
| 58 | @click="handleSearch" | ||
| 59 | >查询</el-button | ||
| 60 | > | ||
| 61 | </el-form-item> | ||
| 62 | </el-col> | ||
| 63 | </el-row> | ||
| 64 | </el-form> | ||
| 65 | </div> | ||
| 66 | <div class="concent"> | ||
| 67 | <div class="left"> | ||
| 68 | <el-table | ||
| 69 | height="187" | ||
| 70 | stripe | ||
| 71 | :data="tableList" | ||
| 72 | size="mini" | ||
| 73 | border | ||
| 74 | header-cell-class-name="table-header-gray" | ||
| 75 | > | ||
| 76 | <el-table-column | ||
| 77 | label="类型" | ||
| 78 | prop="name" | ||
| 79 | minWidth="100" | ||
| 80 | align="center" /> | ||
| 81 | <el-table-column | ||
| 82 | label="数量" | ||
| 83 | prop="agent" | ||
| 84 | minWidth="120" | ||
| 85 | align="center" | ||
| 86 | /></el-table> | ||
| 87 | </div> | ||
| 88 | <div class="right"> | ||
| 89 | <div ref="chart" style="width: 100%; height: 200px"></div> | ||
| 90 | </div> | ||
| 91 | </div> | ||
| 92 | </div> | ||
| 93 | </template> | ||
| 94 | <script> | ||
| 95 | import * as echarts from "echarts"; | ||
| 96 | import { mapGetters } from "vuex"; | ||
| 97 | export default { | ||
| 98 | components: {}, | ||
| 99 | computed: { | ||
| 100 | ...mapGetters(["dictData", "transfer"]), | ||
| 101 | }, | ||
| 102 | data () { | ||
| 103 | return { | ||
| 104 | queryForm: {}, | ||
| 105 | tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23], | ||
| 106 | }; | ||
| 107 | }, | ||
| 108 | mounted() { | ||
| 109 | // 创建一个 ECharts 实例 | ||
| 110 | this.chart = echarts.init(this.$refs.chart); | ||
| 111 | // 在 ECharts 实例中配置图表 | ||
| 112 | this.chart.setOption(this.getOption()); | ||
| 113 | }, | ||
| 114 | methods: { | ||
| 115 | getOption() { | ||
| 116 | return { | ||
| 117 | |||
| 118 | tooltip: { | ||
| 119 | trigger: "item", | ||
| 120 | formatter: "{a} <br/>{b}: {c} ({d}%)", | ||
| 121 | }, | ||
| 122 | series: [ | ||
| 123 | { | ||
| 124 | name: "饼图名称", | ||
| 125 | type: "pie", | ||
| 126 | radius: ["20%", "70%"], | ||
| 127 | avoidLabelOverlap: false, | ||
| 128 | label: { | ||
| 129 | show: false, | ||
| 130 | position: "center", | ||
| 131 | }, | ||
| 132 | emphasis: { | ||
| 133 | label: { | ||
| 134 | show: true, | ||
| 135 | fontSize: "30", | ||
| 136 | fontWeight: "bold", | ||
| 137 | }, | ||
| 138 | }, | ||
| 139 | labelLine: { | ||
| 140 | show: false, | ||
| 141 | }, | ||
| 142 | data: [ | ||
| 143 | { value: 335, name: "数据1" }, | ||
| 144 | { value: 310, name: "数据2" }, | ||
| 145 | { value: 234, name: "数据3" }, | ||
| 146 | { value: 135, name: "数据4" }, | ||
| 147 | { value: 1548, name: "数据5" }, | ||
| 148 | ], | ||
| 149 | }, | ||
| 150 | ], | ||
| 151 | }; | ||
| 152 | }, | ||
| 153 | |||
| 154 | handleSearch() {}, | ||
| 155 | }, | ||
| 156 | }; | ||
| 157 | </script> | ||
| 158 | <style scoped lang="scss"> | ||
| 159 | /deep/.el-card__header { | ||
| 160 | padding: 8px 10px; | ||
| 161 | } | ||
| 162 | |||
| 163 | /deep/.el-card__body { | ||
| 164 | padding: 3px 10px 5px 10px; | ||
| 165 | overflow: hidden; | ||
| 166 | } | ||
| 167 | .yhjgba { | ||
| 168 | .el-col { | ||
| 169 | padding: 4px; | ||
| 170 | } | ||
| 171 | .inquire { | ||
| 172 | width: 100%; | ||
| 173 | height: 40px; | ||
| 174 | border: 1px solid rgb(184, 217, 243); | ||
| 175 | // background-color: rebeccapurple; | ||
| 176 | } | ||
| 177 | .concent { | ||
| 178 | width: 100%; | ||
| 179 | height: 300px; | ||
| 180 | display: flex; | ||
| 181 | .left { | ||
| 182 | width: 70%; | ||
| 183 | height: 200px; | ||
| 184 | } | ||
| 185 | .right { | ||
| 186 | width: 30%; | ||
| 187 | height: 200px; | ||
| 188 | } | ||
| 189 | } | ||
| 190 | } | ||
| 191 | </style> |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-08-25 08:59:04 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div class="djlx"> | ||
| 8 | <div class="inquire"> | ||
| 9 | <el-form :model="queryForm" ref="queryForm" label-width="100px"> | ||
| 10 | <el-row> | ||
| 11 | <el-col :span="6"> | ||
| 12 | <el-form-item label="开始时间" class="width100"> | ||
| 13 | <el-date-picker | ||
| 14 | v-model="queryForm.kssj" | ||
| 15 | class="width100" | ||
| 16 | type="date" | ||
| 17 | placeholder="选择日期" | ||
| 18 | value-format="yyyy-MM-dd HH:mm:ss" | ||
| 19 | format="yyyy-MM-dd" | ||
| 20 | ></el-date-picker> | ||
| 21 | </el-form-item> | ||
| 22 | </el-col> | ||
| 23 | <el-col :span="6"> | ||
| 24 | <el-form-item label="结束时间" class="width100"> | ||
| 25 | <el-date-picker | ||
| 26 | v-model="queryForm.kssj" | ||
| 27 | class="width100" | ||
| 28 | type="date" | ||
| 29 | placeholder="选择日期" | ||
| 30 | value-format="yyyy-MM-dd HH:mm:ss" | ||
| 31 | format="yyyy-MM-dd" | ||
| 32 | ></el-date-picker> | ||
| 33 | </el-form-item> | ||
| 34 | </el-col> | ||
| 35 | <el-col :span="6"> | ||
| 36 | <el-form-item label="区域" class="width100"> | ||
| 37 | <el-select | ||
| 38 | v-model="queryForm.qy" | ||
| 39 | class="width100" | ||
| 40 | clearable | ||
| 41 | placeholder="请选择权利类型" | ||
| 42 | > | ||
| 43 | <el-option | ||
| 44 | v-for="item in dictData['A8']" | ||
| 45 | :key="item.dcode" | ||
| 46 | :label="item.dname" | ||
| 47 | :value="item.dcode" | ||
| 48 | > | ||
| 49 | </el-option> | ||
| 50 | </el-select> | ||
| 51 | </el-form-item> | ||
| 52 | </el-col> | ||
| 53 | <el-col :span="5" class="btnColRight"> | ||
| 54 | <el-form-item> | ||
| 55 | <el-button | ||
| 56 | type="primary" | ||
| 57 | native-type="submit" | ||
| 58 | @click="handleSearch" | ||
| 59 | >查询</el-button | ||
| 60 | > | ||
| 61 | </el-form-item> | ||
| 62 | </el-col> | ||
| 63 | </el-row> | ||
| 64 | </el-form> | ||
| 65 | </div> | ||
| 66 | <div class="concent"> | ||
| 67 | <div class="left"> | ||
| 68 | <el-table | ||
| 69 | height="187" | ||
| 70 | stripe | ||
| 71 | :data="tableList" | ||
| 72 | size="mini" | ||
| 73 | border | ||
| 74 | header-cell-class-name="table-header-gray" | ||
| 75 | > | ||
| 76 | <el-table-column | ||
| 77 | label="类型" | ||
| 78 | prop="name" | ||
| 79 | minWidth="100" | ||
| 80 | align="center" /> | ||
| 81 | <el-table-column | ||
| 82 | label="数量" | ||
| 83 | prop="agent" | ||
| 84 | minWidth="120" | ||
| 85 | align="center" | ||
| 86 | /></el-table> | ||
| 87 | </div> | ||
| 88 | <div class="right"> | ||
| 89 | <div ref="chart" style="width: 100%; height: 200px"></div> | ||
| 90 | </div> | ||
| 91 | </div> | ||
| 92 | </div> | ||
| 93 | </template> | ||
| 94 | <script> | ||
| 95 | import * as echarts from "echarts"; | ||
| 96 | import { mapGetters } from "vuex"; | ||
| 97 | export default { | ||
| 98 | components: {}, | ||
| 99 | computed: { | ||
| 100 | ...mapGetters(["dictData", "transfer"]), | ||
| 101 | }, | ||
| 102 | data () { | ||
| 103 | return { | ||
| 104 | queryForm: {}, | ||
| 105 | tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23], | ||
| 106 | }; | ||
| 107 | }, | ||
| 108 | mounted() { | ||
| 109 | // 创建一个 ECharts 实例 | ||
| 110 | this.chart = echarts.init(this.$refs.chart); | ||
| 111 | // 在 ECharts 实例中配置图表 | ||
| 112 | this.chart.setOption(this.getOption()); | ||
| 113 | }, | ||
| 114 | methods: { | ||
| 115 | getOption() { | ||
| 116 | return { | ||
| 117 | |||
| 118 | tooltip: { | ||
| 119 | trigger: "item", | ||
| 120 | formatter: "{a} <br/>{b}: {c} ({d}%)", | ||
| 121 | }, | ||
| 122 | series: [ | ||
| 123 | { | ||
| 124 | name: "饼图名称", | ||
| 125 | type: "pie", | ||
| 126 | radius: ["20%", "70%"], | ||
| 127 | avoidLabelOverlap: false, | ||
| 128 | label: { | ||
| 129 | show: false, | ||
| 130 | position: "center", | ||
| 131 | }, | ||
| 132 | emphasis: { | ||
| 133 | label: { | ||
| 134 | show: true, | ||
| 135 | fontSize: "30", | ||
| 136 | fontWeight: "bold", | ||
| 137 | }, | ||
| 138 | }, | ||
| 139 | labelLine: { | ||
| 140 | show: false, | ||
| 141 | }, | ||
| 142 | data: [ | ||
| 143 | { value: 335, name: "数据1" }, | ||
| 144 | { value: 310, name: "数据2" }, | ||
| 145 | { value: 234, name: "数据3" }, | ||
| 146 | { value: 135, name: "数据4" }, | ||
| 147 | { value: 1548, name: "数据5" }, | ||
| 148 | ], | ||
| 149 | }, | ||
| 150 | ], | ||
| 151 | }; | ||
| 152 | }, | ||
| 153 | |||
| 154 | handleSearch() {}, | ||
| 155 | }, | ||
| 156 | }; | ||
| 157 | </script> | ||
| 158 | <style scoped lang="scss"> | ||
| 159 | /deep/.el-card__header { | ||
| 160 | padding: 8px 10px; | ||
| 161 | } | ||
| 162 | |||
| 163 | /deep/.el-card__body { | ||
| 164 | padding: 3px 10px 5px 10px; | ||
| 165 | overflow: hidden; | ||
| 166 | } | ||
| 167 | .yhjgba { | ||
| 168 | .el-col { | ||
| 169 | padding: 4px; | ||
| 170 | } | ||
| 171 | .inquire { | ||
| 172 | width: 100%; | ||
| 173 | height: 40px; | ||
| 174 | border: 1px solid rgb(184, 217, 243); | ||
| 175 | // background-color: rebeccapurple; | ||
| 176 | } | ||
| 177 | .concent { | ||
| 178 | width: 100%; | ||
| 179 | height: 300px; | ||
| 180 | display: flex; | ||
| 181 | .left { | ||
| 182 | width: 70%; | ||
| 183 | height: 200px; | ||
| 184 | } | ||
| 185 | .right { | ||
| 186 | width: 30%; | ||
| 187 | height: 200px; | ||
| 188 | } | ||
| 189 | } | ||
| 190 | } | ||
| 191 | </style> |
src/views/tjfx/bdcdjtjfx/components/zszl.vue
0 → 100644
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-08-25 08:59:04 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div class="djlx"> | ||
| 8 | <div class="inquire"> | ||
| 9 | <el-form :model="queryForm" ref="queryForm" label-width="100px"> | ||
| 10 | <el-row> | ||
| 11 | <el-col :span="6"> | ||
| 12 | <el-form-item label="开始时间" class="width100"> | ||
| 13 | <el-date-picker | ||
| 14 | v-model="queryForm.kssj" | ||
| 15 | class="width100" | ||
| 16 | type="date" | ||
| 17 | placeholder="选择日期" | ||
| 18 | value-format="yyyy-MM-dd HH:mm:ss" | ||
| 19 | format="yyyy-MM-dd" | ||
| 20 | ></el-date-picker> | ||
| 21 | </el-form-item> | ||
| 22 | </el-col> | ||
| 23 | <el-col :span="6"> | ||
| 24 | <el-form-item label="结束时间" class="width100"> | ||
| 25 | <el-date-picker | ||
| 26 | v-model="queryForm.kssj" | ||
| 27 | class="width100" | ||
| 28 | type="date" | ||
| 29 | placeholder="选择日期" | ||
| 30 | value-format="yyyy-MM-dd HH:mm:ss" | ||
| 31 | format="yyyy-MM-dd" | ||
| 32 | ></el-date-picker> | ||
| 33 | </el-form-item> | ||
| 34 | </el-col> | ||
| 35 | <el-col :span="6"> | ||
| 36 | <el-form-item label="区域" class="width100"> | ||
| 37 | <el-select | ||
| 38 | v-model="queryForm.qy" | ||
| 39 | class="width100" | ||
| 40 | clearable | ||
| 41 | placeholder="请选择权利类型" | ||
| 42 | > | ||
| 43 | <el-option | ||
| 44 | v-for="item in dictData['A8']" | ||
| 45 | :key="item.dcode" | ||
| 46 | :label="item.dname" | ||
| 47 | :value="item.dcode" | ||
| 48 | > | ||
| 49 | </el-option> | ||
| 50 | </el-select> | ||
| 51 | </el-form-item> | ||
| 52 | </el-col> | ||
| 53 | <el-col :span="5" class="btnColRight"> | ||
| 54 | <el-form-item> | ||
| 55 | <el-button | ||
| 56 | type="primary" | ||
| 57 | native-type="submit" | ||
| 58 | @click="handleSearch" | ||
| 59 | >查询</el-button | ||
| 60 | > | ||
| 61 | </el-form-item> | ||
| 62 | </el-col> | ||
| 63 | </el-row> | ||
| 64 | </el-form> | ||
| 65 | </div> | ||
| 66 | <div class="concent"> | ||
| 67 | <div class="left"> | ||
| 68 | <el-table | ||
| 69 | height="187" | ||
| 70 | stripe | ||
| 71 | :data="tableList" | ||
| 72 | size="mini" | ||
| 73 | border | ||
| 74 | header-cell-class-name="table-header-gray" | ||
| 75 | > | ||
| 76 | <el-table-column | ||
| 77 | label="类型" | ||
| 78 | prop="name" | ||
| 79 | minWidth="100" | ||
| 80 | align="center" /> | ||
| 81 | <el-table-column | ||
| 82 | label="数量" | ||
| 83 | prop="agent" | ||
| 84 | minWidth="120" | ||
| 85 | align="center" | ||
| 86 | /></el-table> | ||
| 87 | </div> | ||
| 88 | <div class="right"> | ||
| 89 | <div ref="chart" style="width: 100%; height: 200px"></div> | ||
| 90 | </div> | ||
| 91 | </div> | ||
| 92 | </div> | ||
| 93 | </template> | ||
| 94 | <script> | ||
| 95 | import * as echarts from "echarts"; | ||
| 96 | import { mapGetters } from "vuex"; | ||
| 97 | export default { | ||
| 98 | components: {}, | ||
| 99 | computed: { | ||
| 100 | ...mapGetters(["dictData", "transfer"]), | ||
| 101 | }, | ||
| 102 | data () { | ||
| 103 | return { | ||
| 104 | queryForm: {}, | ||
| 105 | tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23], | ||
| 106 | }; | ||
| 107 | }, | ||
| 108 | mounted() { | ||
| 109 | // 创建一个 ECharts 实例 | ||
| 110 | this.chart = echarts.init(this.$refs.chart); | ||
| 111 | // 在 ECharts 实例中配置图表 | ||
| 112 | this.chart.setOption(this.getOption()); | ||
| 113 | }, | ||
| 114 | methods: { | ||
| 115 | getOption() { | ||
| 116 | return { | ||
| 117 | |||
| 118 | tooltip: { | ||
| 119 | trigger: "item", | ||
| 120 | formatter: "{a} <br/>{b}: {c} ({d}%)", | ||
| 121 | }, | ||
| 122 | series: [ | ||
| 123 | { | ||
| 124 | name: "饼图名称", | ||
| 125 | type: "pie", | ||
| 126 | radius: ["20%", "70%"], | ||
| 127 | avoidLabelOverlap: false, | ||
| 128 | label: { | ||
| 129 | show: false, | ||
| 130 | position: "center", | ||
| 131 | }, | ||
| 132 | emphasis: { | ||
| 133 | label: { | ||
| 134 | show: true, | ||
| 135 | fontSize: "30", | ||
| 136 | fontWeight: "bold", | ||
| 137 | }, | ||
| 138 | }, | ||
| 139 | labelLine: { | ||
| 140 | show: false, | ||
| 141 | }, | ||
| 142 | data: [ | ||
| 143 | { value: 335, name: "数据1" }, | ||
| 144 | { value: 310, name: "数据2" }, | ||
| 145 | { value: 234, name: "数据3" }, | ||
| 146 | { value: 135, name: "数据4" }, | ||
| 147 | { value: 1548, name: "数据5" }, | ||
| 148 | ], | ||
| 149 | }, | ||
| 150 | ], | ||
| 151 | }; | ||
| 152 | }, | ||
| 153 | |||
| 154 | handleSearch() {}, | ||
| 155 | }, | ||
| 156 | }; | ||
| 157 | </script> | ||
| 158 | <style scoped lang="scss"> | ||
| 159 | /deep/.el-card__header { | ||
| 160 | padding: 8px 10px; | ||
| 161 | } | ||
| 162 | |||
| 163 | /deep/.el-card__body { | ||
| 164 | padding: 3px 10px 5px 10px; | ||
| 165 | overflow: hidden; | ||
| 166 | } | ||
| 167 | .yhjgba { | ||
| 168 | .el-col { | ||
| 169 | padding: 4px; | ||
| 170 | } | ||
| 171 | .inquire { | ||
| 172 | width: 100%; | ||
| 173 | height: 40px; | ||
| 174 | border: 1px solid rgb(184, 217, 243); | ||
| 175 | // background-color: rebeccapurple; | ||
| 176 | } | ||
| 177 | .concent { | ||
| 178 | width: 100%; | ||
| 179 | height: 300px; | ||
| 180 | display: flex; | ||
| 181 | .left { | ||
| 182 | width: 70%; | ||
| 183 | height: 200px; | ||
| 184 | } | ||
| 185 | .right { | ||
| 186 | width: 30%; | ||
| 187 | height: 200px; | ||
| 188 | } | ||
| 189 | } | ||
| 190 | } | ||
| 191 | </style> |
src/views/tjfx/bdcdjtjfx/index.vue
0 → 100644
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-08-25 08:59:04 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div class="yhjgba"> | ||
| 8 | <el-row :gutter="8"> | ||
| 9 | <el-col :span="12"> | ||
| 10 | <el-card | ||
| 11 | shadow="hover" | ||
| 12 | :body-style="{ padding: '0' }" | ||
| 13 | style="height: 270px" | ||
| 14 | > | ||
| 15 | <div slot="header" class="flexst"> | ||
| 16 | <h5 class="title">根据登记类型统计分析收件</h5> | ||
| 17 | </div> | ||
| 18 | <djlx/> | ||
| 19 | </el-card> | ||
| 20 | </el-col> | ||
| 21 | <el-col :span="12"> | ||
| 22 | <el-card | ||
| 23 | shadow="hover" | ||
| 24 | :body-style="{ padding: '0' }" | ||
| 25 | style="height: 270px" | ||
| 26 | > | ||
| 27 | <div slot="header" class="flexst"> | ||
| 28 | <h5 class="title">根据证书种类统计分析发证情况</h5> | ||
| 29 | </div> | ||
| 30 | <zszl/> | ||
| 31 | </el-card> | ||
| 32 | </el-col> | ||
| 33 | </el-row> | ||
| 34 | <el-row :gutter="8" class="marginTop10"> | ||
| 35 | <el-col :span="12"> | ||
| 36 | <el-card | ||
| 37 | shadow="hover" | ||
| 38 | :body-style="{ padding: '0' }" | ||
| 39 | style="height: 270px" | ||
| 40 | > | ||
| 41 | <div slot="header" class="flexst"> | ||
| 42 | <h5 class="title">根据收件人统计分析收件</h5> | ||
| 43 | </div> | ||
| 44 | <djlx/> | ||
| 45 | </el-card> | ||
| 46 | </el-col> | ||
| 47 | |||
| 48 | <el-col :span="12"> | ||
| 49 | <el-card | ||
| 50 | shadow="hover" | ||
| 51 | :body-style="{ padding: '0' }" | ||
| 52 | style="height: 270px" | ||
| 53 | > | ||
| 54 | <div slot="header" class="flexst"> | ||
| 55 | <h5 class="title">收件日统计</h5> | ||
| 56 | </div> | ||
| 57 | <ul class="workbench flexst"></ul> | ||
| 58 | </el-card> | ||
| 59 | </el-col> | ||
| 60 | </el-row> | ||
| 61 | <el-row :gutter="8" class="marginTop10"> | ||
| 62 | <el-col :span="12"> | ||
| 63 | <el-card | ||
| 64 | shadow="hover" | ||
| 65 | :body-style="{ padding: '0' }" | ||
| 66 | style="height: 270px" | ||
| 67 | > | ||
| 68 | <div slot="header" class="flexst"> | ||
| 69 | <h5 class="title">根据区域统计分析收件</h5> | ||
| 70 | </div> | ||
| 71 | <qytj/> | ||
| 72 | </el-card> | ||
| 73 | </el-col> | ||
| 74 | <el-col :span="12"> | ||
| 75 | <el-card | ||
| 76 | shadow="hover" | ||
| 77 | :body-style="{ padding: '0' }" | ||
| 78 | style="height: 270px" | ||
| 79 | > | ||
| 80 | <div slot="header" class="flexst"> | ||
| 81 | <h5 class="title">收件月统计</h5> | ||
| 82 | </div> | ||
| 83 | <ul class="workbench flexst"></ul> | ||
| 84 | </el-card> | ||
| 85 | </el-col> | ||
| 86 | </el-row> | ||
| 87 | </div> | ||
| 88 | </template> | ||
| 89 | <script> | ||
| 90 | import * as echarts from "echarts"; | ||
| 91 | import { mapGetters } from "vuex"; | ||
| 92 | import djlx from "./components/djlx.vue"; | ||
| 93 | import zszl from "./components/zszl.vue"; | ||
| 94 | import qytj from "./components/qytj.vue"; | ||
| 95 | |||
| 96 | export default { | ||
| 97 | components: {djlx,zszl,qytj}, | ||
| 98 | computed: { | ||
| 99 | ...mapGetters(["dictData", "transfer"]), | ||
| 100 | }, | ||
| 101 | data() { | ||
| 102 | return { | ||
| 103 | queryForm: {}, | ||
| 104 | tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23], | ||
| 105 | }; | ||
| 106 | }, | ||
| 107 | mounted() { | ||
| 108 | // 创建一个 ECharts 实例 | ||
| 109 | this.chart = echarts.init(this.$refs.chart); | ||
| 110 | // 在 ECharts 实例中配置图表 | ||
| 111 | this.chart.setOption(this.getOption()); | ||
| 112 | }, | ||
| 113 | methods: { | ||
| 114 | getOption() { | ||
| 115 | return { | ||
| 116 | |||
| 117 | tooltip: { | ||
| 118 | trigger: "item", | ||
| 119 | formatter: "{a} <br/>{b}: {c} ({d}%)", | ||
| 120 | }, | ||
| 121 | series: [ | ||
| 122 | { | ||
| 123 | name: "饼图名称", | ||
| 124 | type: "pie", | ||
| 125 | radius: ["20%", "70%"], | ||
| 126 | avoidLabelOverlap: false, | ||
| 127 | label: { | ||
| 128 | show: false, | ||
| 129 | position: "center", | ||
| 130 | }, | ||
| 131 | emphasis: { | ||
| 132 | label: { | ||
| 133 | show: true, | ||
| 134 | fontSize: "30", | ||
| 135 | fontWeight: "bold", | ||
| 136 | }, | ||
| 137 | }, | ||
| 138 | labelLine: { | ||
| 139 | show: false, | ||
| 140 | }, | ||
| 141 | data: [ | ||
| 142 | { value: 335, name: "数据1" }, | ||
| 143 | { value: 310, name: "数据2" }, | ||
| 144 | { value: 234, name: "数据3" }, | ||
| 145 | { value: 135, name: "数据4" }, | ||
| 146 | { value: 1548, name: "数据5" }, | ||
| 147 | ], | ||
| 148 | }, | ||
| 149 | ], | ||
| 150 | }; | ||
| 151 | }, | ||
| 152 | |||
| 153 | handleSearch() {}, | ||
| 154 | }, | ||
| 155 | }; | ||
| 156 | </script> | ||
| 157 | <style scoped lang="scss"> | ||
| 158 | @import "~@/styles/mixin.scss"; | ||
| 159 | /deep/.el-card__header { | ||
| 160 | padding: 8px 10px; | ||
| 161 | } | ||
| 162 | |||
| 163 | /deep/.el-card__body { | ||
| 164 | padding: 3px 10px 5px 10px; | ||
| 165 | overflow: hidden; | ||
| 166 | } | ||
| 167 | .yhjgba { | ||
| 168 | .el-col { | ||
| 169 | padding: 4px; | ||
| 170 | } | ||
| 171 | .inquire { | ||
| 172 | width: 100%; | ||
| 173 | height: 40px; | ||
| 174 | border: 1px solid rgb(184, 217, 243); | ||
| 175 | // background-color: rebeccapurple; | ||
| 176 | } | ||
| 177 | .concent { | ||
| 178 | width: 100%; | ||
| 179 | height: 300px; | ||
| 180 | display: flex; | ||
| 181 | .left { | ||
| 182 | width: 70%; | ||
| 183 | height: 200px; | ||
| 184 | } | ||
| 185 | .right { | ||
| 186 | width: 30%; | ||
| 187 | height: 200px; | ||
| 188 | } | ||
| 189 | } | ||
| 190 | } | ||
| 191 | </style> |
This diff is collapsed.
Click to expand it.
-
Please register or sign in to post a comment