|
|
@@ -0,0 +1,244 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-tabs v-model="activeName1" @tab-click="handleClick">
|
|
|
+ <el-tab-pane :label="dict.label" :name="dict.value" v-for="(dict, index) in dict.type.TJ019" :key="dict.value">
|
|
|
+ <el-tabs type="card" v-model="activeName2" @tab-click="handleTabsClick(index)">
|
|
|
+ <el-tab-pane label="按行政区划统计" name="1">
|
|
|
+ <div class="echarts-box">
|
|
|
+ <div class="ssqh">
|
|
|
+ <p class="sxzd">行政区划</p>
|
|
|
+ <dept-tree :isTj="true" :isLoad="treeliadzt[3 * index + 1]" :ref="'dztree' + (3 * index + 1)"
|
|
|
+ :userId="user.userData.dept.parentId" @handleNodeClick="NodeClick(activeName1, activeName2, $event)"
|
|
|
+ >
|
|
|
+ </dept-tree>
|
|
|
+ </div>
|
|
|
+ <Echarts-box danwei="" v-loading="loading" title="护理员补贴发放统计-行政区划" :echartsId="'two' + dict.value"
|
|
|
+ type="bar" xStr="ssqh" :tableList="formData[3 * index + 1].vales" :isPie="false"
|
|
|
+ :labelKeys="formData[3 * index + 1].keys"
|
|
|
+ >
|
|
|
+ </Echarts-box>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="echarts-text">注：统计数据为“0”，对于自建和部省两级部署的省份有3种原因：一是数据未上报；二是数据已上报正在抽取或清洗中；三是已上报数据但不包括此类数据。 对于大集中部署模式的省份则是数据未填报。</div> -->
|
|
|
+ <!-- table区域 -->
|
|
|
+ <div class="xxtj-table">
|
|
|
+ <div class="flex-box1">
|
|
|
+ <span></span>
|
|
|
+ <el-button type="primary" icon="el-icon-download" size="mini"
|
|
|
+ @click="handleExport(formData[3 * index + 1], dict.label)"
|
|
|
+ >
|
|
|
+ 导出
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <el-table v-loading="loading" :data="formData[3 * index + 1].vales" style="width: 100%" stripe>
|
|
|
+ <el-table-column align="center" type="index" label="序号"></el-table-column>
|
|
|
+ <el-table-column align="center" v-for="item in formData[3 * index + 1].keys" :key="item.prop"
|
|
|
+ :prop="item.prop" :label="item.label" :width="item.width"
|
|
|
+ >
|
|
|
+ <el-table-column align="center" v-for="ite in item.data" :key="ite.prop + item.prop"
|
|
|
+ :prop="ite.prop" :label="ite.label"
|
|
|
+ />
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapGetters, mapState } from 'vuex'
|
|
|
+import { getstatisticaldata } from '@/api/system/dict/type'
|
|
|
+import { decryptData_ECB, decryptRowData_ECB } from '@/api/tool/sm4'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'Hlybtfftj',
|
|
|
+ dicts: ['TJ019'],
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ ...mapGetters(['level'])
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: true,
|
|
|
+ // 外侧tabs绑定的name
|
|
|
+ activeName1: '1',
|
|
|
+ // 内侧tabs绑定的name
|
|
|
+ activeName2: '1',
|
|
|
+ activeName2o: ['1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1'],
|
|
|
+ tabisini: [false, true, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false],
|
|
|
+ treeliadzt: [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false],
|
|
|
+ queryParams: {
|
|
|
+ dictType: 'TJ019',
|
|
|
+ para1: '1',
|
|
|
+ para2: null,
|
|
|
+ para3: '2',
|
|
|
+ para4: null
|
|
|
+ },
|
|
|
+ formDataidx: 1,
|
|
|
+ formData: [
|
|
|
+ { unit: null, vales: null, keys: null }
|
|
|
+ ],
|
|
|
+ index: '0'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 父tabs栏切换事件
|
|
|
+ handleClick() {
|
|
|
+ this.activeName2 = this.activeName2o[this.activeName1]
|
|
|
+ this.queryParams.para2 = null
|
|
|
+ this.queryParams.para4 = null
|
|
|
+ this.queryParams.para3 = this.activeName2
|
|
|
+ this.queryParams.para1 = this.activeName1
|
|
|
+ this.formDataidx = (this.activeName1 - 1) * 3 + parseInt(this.activeName2)
|
|
|
+ if (this.tabisini[this.formDataidx] == false) {
|
|
|
+ this.treeliadzt[this.formDataidx] = true
|
|
|
+ this.getTableList()
|
|
|
+ this.tabisini[this.formDataidx] = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 子tabs栏切换事件
|
|
|
+ handleTabsClick() {
|
|
|
+ this.activeName2o[this.activeName1] = this.activeName2
|
|
|
+ this.queryParams.para3 = this.activeName2
|
|
|
+ this.queryParams.para2 = null
|
|
|
+ this.queryParams.para4 = null
|
|
|
+ this.formDataidx = (this.activeName1 - 1) * 3 + parseInt(this.activeName2)
|
|
|
+ if (this.tabisini[this.formDataidx] == false) {
|
|
|
+ this.treeliadzt[this.formDataidx] = true
|
|
|
+ this.getTableList()
|
|
|
+ this.tabisini[this.formDataidx] = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 节点单击事件
|
|
|
+ handleNodeClick(data) {
|
|
|
+ this.queryParams.para2 = data.code
|
|
|
+ this.getTableList()
|
|
|
+ },
|
|
|
+ NodeClick(idxa, idxb, data) {
|
|
|
+ this.queryParams.para2 = data.code
|
|
|
+ this.getTableList()
|
|
|
+ },
|
|
|
+ // 获取表格数据
|
|
|
+ async getTableList() {
|
|
|
+ this.loading = true
|
|
|
+ let retdata = await getstatisticaldata(this.queryParams)
|
|
|
+ this.loading = false
|
|
|
+ if (retdata.code == 200) {
|
|
|
+ var data = this.$DBRetToObjA(retdata.data)
|
|
|
+ this.formData[this.formDataidx] = data[0]
|
|
|
+ this.keys()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ keys() {
|
|
|
+ let res = [], data1 = [], data6 = []
|
|
|
+ , arrA = ['data2', 'data3', 'data4', 'data5']
|
|
|
+ , arrB = ['data7', 'data8', 'data9', 'data10', 'data11']
|
|
|
+ this.formData[this.formDataidx].keys.forEach((item) => {
|
|
|
+ if (item.prop !== 'year') {
|
|
|
+ if (arrA.includes(item.prop)) {
|
|
|
+ data1.push(item)
|
|
|
+ } else if (arrB.includes(item.prop)) {
|
|
|
+ data6.push(item)
|
|
|
+ } else {
|
|
|
+ res.push(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ res.forEach((item) => {
|
|
|
+ if (item.prop === 'data1') {
|
|
|
+ item.data = data1
|
|
|
+ } else if (item.prop === 'data6') {
|
|
|
+ item.data = data6
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(res, 'res')
|
|
|
+
|
|
|
+ this.formData[this.formDataidx].keys = res
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() { },
|
|
|
+ created() {
|
|
|
+ for (let i = 0; i < 100; i++) {
|
|
|
+ this.formData[i] =
|
|
|
+ {
|
|
|
+ unit: null, vales: null, keys: null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.getTableList()
|
|
|
+ this.treeliadzt[1] = true
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.echarts-box {
|
|
|
+ width: 100%;
|
|
|
+ /* height: 500px; */
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.ssqh {
|
|
|
+ width: 20%;
|
|
|
+}
|
|
|
+
|
|
|
+.echarts {
|
|
|
+ padding: 20px;
|
|
|
+ width: 85%;
|
|
|
+}
|
|
|
+
|
|
|
+.echarts-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.echarts-title div:nth-child(1) {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.black-box {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ background: #000;
|
|
|
+}
|
|
|
+
|
|
|
+.echarts-title div:nth-child(1) span:nth-child(2) {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.echarts-text,
|
|
|
+.echarts-radio,
|
|
|
+.xxtj-table {
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.xxtj-table,
|
|
|
+.echarts,
|
|
|
+.ssqh {
|
|
|
+ border: 1px solid #dfe4ed;
|
|
|
+}
|
|
|
+
|
|
|
+.el-tab-pane {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.left-bottom-text {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 10%;
|
|
|
+ z-index: 99;
|
|
|
+}
|
|
|
+
|
|
|
+.echarts-text,
|
|
|
+.left-bottom-text {
|
|
|
+ color: #000000a6;
|
|
|
+}
|
|
|
+
|
|
|
+.sxzd {
|
|
|
+ font-weight: 600;
|
|
|
+ margin: 10px 15px;
|
|
|
+}
|
|
|
+</style>
|
NanMing