数据展示

src/main/data-center-admin/src/router.js

@@ -276,6 +276,38 @@ const router = new Router({
                     meta: {
                         title: 'gis'
                     }
+                },
+                {
+                    path: '/summaryStateEdit',
+                    name: 'SummaryStateEdit',
+                    component: () => import(/* webpackChunkName: "summaryStateEdit" */ '@/views/SummaryStateEdit.vue'),
+                    meta: {
+                        title: '数据统计编辑'
+                    }
+                },
+                {
+                    path: '/summaryStateList',
+                    name: 'SummaryStateList',
+                    component: () => import(/* webpackChunkName: "summaryStateList" */ '@/views/SummaryStateList.vue'),
+                    meta: {
+                        title: '数据统计'
+                    }
+                },
+                {
+                    path: '/summaryTypeEdit',
+                    name: 'SummaryTypeEdit',
+                    component: () => import(/* webpackChunkName: "summaryTypeEdit" */ '@/views/SummaryTypeEdit.vue'),
+                    meta: {
+                        title: '数据表名编辑'
+                    }
+                },
+                {
+                    path: '/summaryTypeList',
+                    name: 'SummaryTypeList',
+                    component: () => import(/* webpackChunkName: "summaryTypeList" */ '@/views/SummaryTypeList.vue'),
+                    meta: {
+                        title: '数据表名'
+                    }
                 }
                 /**INSERT_LOCATION**/
             ]

src/main/data-center-admin/src/views/Admin.vue

@@ -253,6 +253,8 @@ export default {
                     icon: 'fas fa-bars',
                     children: [
                         { active: false, name: '系统模块', path: '/categoryList', icon: 'fas fa-bars' },
+                        { active: false, name: '数据总览', path: '/summaryStateList', icon: 'fas fa-bars' },
+                        { active: false, name: '数据表名', path: '/summaryTypeList', icon: 'fas fa-bars' },
                         { active: false, name: '检测规则', path: '/thresholdList', icon: 'fas fa-bars' },
                         { active: false, name: '企业数量', path: '/orgNumStatList', icon: 'fas fa-bars' },
                         { active: false, name: '项目数量', path: '/projectNumStatList', icon: 'fas fa-bars' },

src/main/data-center-admin/src/views/SummaryStateEdit.vue

@@ -0,0 +1,153 @@
+<template>
+    <div class="edit-view">
+        <div class="edit-view__content-wrapper">
+            <div class="edit-view__content-section">
+                <el-form
+                    :model="formData"
+                    :rules="rules"
+                    ref="form"
+                    label-width="80px"
+                    label-position="right"
+                    size="small"
+                    style="max-width: 500px;"
+                >
+                    <el-form-item prop="title" label="表名">
+                        <el-input v-model="formData.title"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="val1" label="南昌市">
+                        <el-input v-model="formData.val1"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="val2" label="九江市">
+                        <el-input v-model="formData.val2"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="val3" label="景德镇市">
+                        <el-input v-model="formData.val3"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="val4" label="萍乡市">
+                        <el-input v-model="formData.val4"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="val5" label="新余市">
+                        <el-input v-model="formData.val5"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="val6" label="鹰潭市">
+                        <el-input v-model="formData.val6"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="val7" label="赣州市">
+                        <el-input v-model="formData.val7"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="val8" label="宜春市">
+                        <el-input v-model="formData.val8"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="val9" label="上饶市">
+                        <el-input v-model="formData.val9"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="val10" label="吉安市">
+                        <el-input v-model="formData.val10"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="val11" label="抚州市">
+                        <el-input v-model="formData.val11"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="type" label="分类">
+                        <el-input v-model="formData.type"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="yAxisIndex" label="y轴">
+                        <el-input-number type="number" v-model="formData.yAxisIndex"></el-input-number>
+                    </el-form-item>
+                    <el-form-item prop="chartType" label="图表类型">
+                        <el-select v-model="formData.chartType" clearable filterable placeholder="请选择">
+                            <el-option
+                                v-for="item in chartTypeOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            >
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+                        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id"
+                            >删除
+                        </el-button>
+                        <el-button @click="$router.go(-1)">取消</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'SummaryStateEdit',
+    created() {
+        if (this.$route.query.id) {
+            this.$http
+                .get('summaryState/get/' + this.$route.query.id)
+                .then(res => {
+                    this.formData = res;
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.$message.error(e.error);
+                });
+        }
+    },
+    data() {
+        return {
+            saving: false,
+            formData: {},
+            rules: {},
+            chartTypeOptions: [
+                { label: '柱状图', value: 'bar' },
+                { label: '折线图', value: 'line' },
+                { label: '饼状图', value: 'pie' }
+            ]
+        };
+    },
+    methods: {
+        onSave() {
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    this.submit();
+                } else {
+                    return false;
+                }
+            });
+        },
+        submit() {
+            let data = { ...this.formData };
+
+            this.saving = true;
+            this.$http
+                .post('/summaryState/save', data, { body: 'json' })
+                .then(res => {
+                    this.saving = false;
+                    this.$message.success('成功');
+                    this.$router.go(-1);
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.saving = false;
+                    this.$message.error(e.error);
+                });
+        },
+        onDelete() {
+            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
+                .then(() => {
+                    return this.$http.post(`/summaryState/del/${this.formData.id}`);
+                })
+                .then(() => {
+                    this.$message.success('删除成功');
+                    this.$router.go(-1);
+                })
+                .catch(e => {
+                    if (e !== 'cancel') {
+                        console.log(e);
+                        this.$message.error(e.error);
+                    }
+                });
+        }
+    }
+};
+</script>
+<style lang="less" scoped></style>

src/main/data-center-admin/src/views/SummaryStateList.vue

@@ -0,0 +1,184 @@
+<template>
+    <div class="list-view">
+        <div class="filters-container">
+            <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+            <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索 </el-button>
+            <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加 </el-button>
+            <el-button
+                @click="download"
+                type="primary"
+                icon="el-icon-download"
+                :loading="downloading"
+                class="filter-item"
+                >导出EXCEL
+            </el-button>
+        </div>
+        <el-table
+            :data="tableData"
+            row-key="id"
+            ref="table"
+            header-row-class-name="table-header-row"
+            header-cell-class-name="table-header-cell"
+            row-class-name="table-row"
+            cell-class-name="table-cell"
+            :height="tableHeight"
+        >
+            <el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
+            <el-table-column prop="id" label="ID" width="100"> </el-table-column>
+            <el-table-column prop="title" label="项名"> </el-table-column>
+            <el-table-column prop="type.name" label="总表名"> </el-table-column>
+            <el-table-column prop="yAxisIndex" label="y轴"> </el-table-column>
+            <el-table-column prop="chartType" label="图表类型" :formatter="chartTypeFormatter"> </el-table-column>
+            <el-table-column prop="val1" label="南昌市"> </el-table-column>
+            <el-table-column prop="val2" label="九江市"> </el-table-column>
+            <el-table-column prop="val3" label="景德镇市"> </el-table-column>
+            <el-table-column prop="val4" label="萍乡市"> </el-table-column>
+            <el-table-column prop="val5" label="新余市"> </el-table-column>
+            <el-table-column prop="val6" label="鹰潭市"> </el-table-column>
+            <el-table-column prop="val7" label="赣州市"> </el-table-column>
+            <el-table-column prop="val8" label="宜春市"> </el-table-column>
+            <el-table-column prop="val9" label="上饶市"> </el-table-column>
+            <el-table-column prop="val10" label="吉安市"> </el-table-column>
+            <el-table-column prop="val11" label="抚州市"> </el-table-column>
+            <el-table-column label="操作" align="center" fixed="right" min-width="150">
+                <template slot-scope="{ row }">
+                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination-wrapper">
+            <!-- <div class="multiple-mode-wrapper">
+                <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+                <el-button-group v-else>
+                    <el-button @click="operation1">批量操作1</el-button>
+                    <el-button @click="operation2">批量操作2</el-button>
+                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
+                </el-button-group>
+            </div> -->
+            <el-pagination
+                background
+                @size-change="onSizeChange"
+                @current-change="onCurrentChange"
+                :current-page="page"
+                :page-sizes="[10, 20, 30, 40, 50]"
+                :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="totalElements"
+            >
+            </el-pagination>
+        </div>
+    </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+import pageableTable from '@/mixins/pageableTable';
+
+export default {
+    name: 'SummaryStateList',
+    mixins: [pageableTable],
+    data() {
+        return {
+            multipleMode: false,
+            search: '',
+            url: '/summaryState/all',
+            downloading: false,
+            chartTypeOptions: [
+                { label: '柱状图', value: 'bar' },
+                { label: '折线图', value: 'line' },
+                { label: '饼状图', value: 'pie' }
+            ]
+        };
+    },
+    computed: {
+        selection() {
+            return this.$refs.table.selection.map(i => i.id);
+        }
+    },
+    methods: {
+        chartTypeFormatter(row, column, cellValue, index) {
+            let selectedOption = this.chartTypeOptions.find(i => i.value === cellValue);
+            if (selectedOption) {
+                return selectedOption.label;
+            }
+            return '';
+        },
+        beforeGetData() {
+            if (this.search) {
+                return { search: this.search };
+            }
+        },
+        toggleMultipleMode(multipleMode) {
+            this.multipleMode = multipleMode;
+            if (!multipleMode) {
+                this.$refs.table.clearSelection();
+            }
+        },
+        addRow() {
+            this.$router.push({
+                path: '/summaryStateEdit',
+                query: {
+                    ...this.$route.query
+                }
+            });
+        },
+        editRow(row) {
+            this.$router.push({
+                path: '/summaryStateEdit',
+                query: {
+                    id: row.id
+                }
+            });
+        },
+        download() {
+            this.downloading = true;
+            this.$axios
+                .get('/summaryState/excel', {
+                    responseType: 'blob',
+                    params: { size: 10000 }
+                })
+                .then(res => {
+                    console.log(res);
+                    this.downloading = false;
+                    const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+                    const link = document.createElement('a');
+                    link.href = downloadUrl;
+                    link.setAttribute('download', res.headers['content-disposition'].split('filename=')[1]);
+                    document.body.appendChild(link);
+                    link.click();
+                    link.remove();
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.downloading = false;
+                    this.$message.error(e.error);
+                });
+        },
+        operation1() {
+            this.$notify({
+                title: '提示',
+                message: this.selection
+            });
+        },
+        operation2() {
+            this.$message('操作2');
+        },
+        deleteRow(row) {
+            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
+                .then(() => {
+                    return this.$http.post(`/summaryState/del/${row.id}`);
+                })
+                .then(() => {
+                    this.$message.success('删除成功');
+                    this.getData();
+                })
+                .catch(e => {
+                    if (e !== 'cancel') {
+                        this.$message.error(e.error);
+                    }
+                });
+        }
+    }
+};
+</script>
+<style lang="less" scoped></style>

src/main/data-center-admin/src/views/SummaryTypeEdit.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="edit-view">
+        <div class="edit-view__content-wrapper">
+            <div class="edit-view__content-section">
+                <el-form
+                    :model="formData"
+                    :rules="rules"
+                    ref="form"
+                    label-width="52px"
+                    label-position="right"
+                    size="small"
+                    style="max-width: 500px;"
+                >
+                    <el-form-item prop="name" label="表名">
+                        <el-input v-model="formData.name"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+                        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id"
+                            >删除
+                        </el-button>
+                        <el-button @click="$router.go(-1)">取消</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'SummaryTypeEdit',
+    created() {
+        if (this.$route.query.id) {
+            this.$http
+                .get('summaryType/get/' + this.$route.query.id)
+                .then(res => {
+                    this.formData = res;
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.$message.error(e.error);
+                });
+        }
+    },
+    data() {
+        return {
+            saving: false,
+            formData: {},
+            rules: {}
+        };
+    },
+    methods: {
+        onSave() {
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    this.submit();
+                } else {
+                    return false;
+                }
+            });
+        },
+        submit() {
+            let data = { ...this.formData };
+
+            this.saving = true;
+            this.$http
+                .post('/summaryType/save', data, { body: 'json' })
+                .then(res => {
+                    this.saving = false;
+                    this.$message.success('成功');
+                    this.$router.go(-1);
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.saving = false;
+                    this.$message.error(e.error);
+                });
+        },
+        onDelete() {
+            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
+                .then(() => {
+                    return this.$http.post(`/summaryType/del/${this.formData.id}`);
+                })
+                .then(() => {
+                    this.$message.success('删除成功');
+                    this.$router.go(-1);
+                })
+                .catch(e => {
+                    if (e !== 'cancel') {
+                        console.log(e);
+                        this.$message.error(e.error);
+                    }
+                });
+        }
+    }
+};
+</script>
+<style lang="less" scoped></style>

src/main/data-center-admin/src/views/SummaryTypeList.vue

@@ -0,0 +1,158 @@
+<template>
+    <div class="list-view">
+        <div class="filters-container">
+            <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+            <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索 </el-button>
+            <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加 </el-button>
+            <el-button
+                @click="download"
+                type="primary"
+                icon="el-icon-download"
+                :loading="downloading"
+                class="filter-item"
+                >导出EXCEL
+            </el-button>
+        </div>
+        <el-table
+            :data="tableData"
+            row-key="id"
+            ref="table"
+            header-row-class-name="table-header-row"
+            header-cell-class-name="table-header-cell"
+            row-class-name="table-row"
+            cell-class-name="table-cell"
+            :height="tableHeight"
+        >
+            <el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
+            <el-table-column prop="id" label="ID" width="100"> </el-table-column>
+            <el-table-column prop="name" label="表名"> </el-table-column>
+            <el-table-column label="操作" align="center" fixed="right" min-width="150">
+                <template slot-scope="{ row }">
+                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination-wrapper">
+            <!-- <div class="multiple-mode-wrapper">
+                <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+                <el-button-group v-else>
+                    <el-button @click="operation1">批量操作1</el-button>
+                    <el-button @click="operation2">批量操作2</el-button>
+                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
+                </el-button-group>
+            </div> -->
+            <el-pagination
+                background
+                @size-change="onSizeChange"
+                @current-change="onCurrentChange"
+                :current-page="page"
+                :page-sizes="[10, 20, 30, 40, 50]"
+                :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="totalElements"
+            >
+            </el-pagination>
+        </div>
+    </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+import pageableTable from '@/mixins/pageableTable';
+
+export default {
+    name: 'SummaryTypeList',
+    mixins: [pageableTable],
+    data() {
+        return {
+            multipleMode: false,
+            search: '',
+            url: '/summaryType/all',
+            downloading: false
+        };
+    },
+    computed: {
+        selection() {
+            return this.$refs.table.selection.map(i => i.id);
+        }
+    },
+    methods: {
+        beforeGetData() {
+            if (this.search) {
+                return { search: this.search };
+            }
+        },
+        toggleMultipleMode(multipleMode) {
+            this.multipleMode = multipleMode;
+            if (!multipleMode) {
+                this.$refs.table.clearSelection();
+            }
+        },
+        addRow() {
+            this.$router.push({
+                path: '/summaryTypeEdit',
+                query: {
+                    ...this.$route.query
+                }
+            });
+        },
+        editRow(row) {
+            this.$router.push({
+                path: '/summaryTypeEdit',
+                query: {
+                    id: row.id
+                }
+            });
+        },
+        download() {
+            this.downloading = true;
+            this.$axios
+                .get('/summaryType/excel', {
+                    responseType: 'blob',
+                    params: { size: 10000 }
+                })
+                .then(res => {
+                    console.log(res);
+                    this.downloading = false;
+                    const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+                    const link = document.createElement('a');
+                    link.href = downloadUrl;
+                    link.setAttribute('download', res.headers['content-disposition'].split('filename=')[1]);
+                    document.body.appendChild(link);
+                    link.click();
+                    link.remove();
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.downloading = false;
+                    this.$message.error(e.error);
+                });
+        },
+        operation1() {
+            this.$notify({
+                title: '提示',
+                message: this.selection
+            });
+        },
+        operation2() {
+            this.$message('操作2');
+        },
+        deleteRow(row) {
+            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
+                .then(() => {
+                    return this.$http.post(`/summaryType/del/${row.id}`);
+                })
+                .then(() => {
+                    this.$message.success('删除成功');
+                    this.getData();
+                })
+                .catch(e => {
+                    if (e !== 'cancel') {
+                        this.$message.error(e.error);
+                    }
+                });
+        }
+    }
+};
+</script>
+<style lang="less" scoped></style>

src/main/data-center/src/components/card.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="card">
         <div class="card-top" :style="{ backgroundImage: `url(${require('../assets/shuju_img_top.png')})` }">
-            <div class="left">
+            <div class="left" :class="{ small: title.length > 15 }">
                 <img :src="require(`../assets/${icon}.png`)" alt="" />
                 <span>{{ title }}</span>
             </div>
@@ -77,5 +77,11 @@ export default {
         color: #3cbef2;
         margin-left: 8px;
     }
+
+    &.small {
+        span {
+            font-size: 16px;
+        }
+    }
 }
 </style>

src/main/data-center/src/components/navMenus.vue

@@ -2,7 +2,10 @@
     <div class="menu-list">
         <div
             class="menu-item"
-            :class="{ active: $route.name === 'home' && (chooseMenu === index || item.active) }"
+            :class="{
+                active: $route.name === 'home' && (chooseMenu === index || item.active),
+                more: item.name.length > 6,
+            }"
             @mouseover="item.active = true"
             @mouseout="item.active = false"
             v-for="(item, index) in menus"
@@ -63,6 +66,15 @@ export default {
             z-index: 2;
         }
 
+        &.more {
+            span {
+                width: 120px;
+                text-align: center;
+                font-size: 14px;
+                white-space: inherit;
+            }
+        }
+
         &:nth-child(n + 3) {
             img {
                 right: 0;

src/main/data-center/src/views/ChartScreen copy.vue

@@ -0,0 +1,975 @@
+<template>
+    <div class="chart-screen">
+        <el-row>
+            <el-col :span="6" :lg="6" :md="8" :sm="12">
+                <card icon="shuju_icon_qiyeshuliang" title="企业增长(趋势图)">
+                    <div class="chart" ref="lineChart"></div>
+                </card>
+            </el-col>
+            <el-col :span="6" :lg="6" :md="8" :sm="12">
+                <card icon="shuju_icon_geshiqiye" title="技术买入/卖出(柱状图)">
+                    <div class="chart" ref="barChart"></div>
+                </card>
+            </el-col>
+            <el-col :span="6" :lg="6" :md="8" :sm="12">
+                <card icon="shuju_icon_geshixiangmu" title="军转民/民参军(多阶梯图)">
+                    <div class="chart" ref="moreLineChart"></div>
+                </card>
+            </el-col>
+            <el-col :span="6" :lg="6" :md="8" :sm="12">
+                <card icon="shuju_icon_xiangmu" title="技术交易堆叠(条形图)">
+                    <div class="chart" ref="moreBarChart"></div>
+                </card>
+            </el-col>
+
+            <el-col :span="6" :lg="6" :md="8" :sm="12">
+                <card icon="shuju_icon_qiyeshuliang" title="各市园区(多色气泡图)">
+                    <div class="chart" ref="scatterChart"></div>
+                </card>
+            </el-col>
+            <el-col :span="6" :lg="6" :md="8" :sm="12">
+                <card icon="shuju_icon_xiangmu" title="门户新闻(饼状图)">
+                    <div class="chart" ref="pieChart"></div>
+                </card>
+            </el-col>
+            <el-col :span="6" :lg="6" :md="8" :sm="12">
+                <card icon="shuju_icon_qiyeshuliang" title="收入支出(瀑布图)">
+                    <div class="chart" ref="waterChart"></div>
+                </card>
+            </el-col>
+            <el-col :span="6" :lg="6" :md="8" :sm="12">
+                <card icon="shuju_icon_qiyeshuliang" title="多线(雷达图)">
+                    <div class="chart" ref="radarChart"></div>
+                </card>
+            </el-col>
+            <el-col :span="12" :lg="12" :md="24">
+                <card icon="shuju_icon_qiyeshuliang" title="分组(条形图)">
+                    <div class="chart" ref="groupBarChart"></div>
+                </card>
+            </el-col>
+            <el-col :span="12" :lg="12" :md="24">
+                <card icon="shuju_icon_jishu" title="可拖拽图">
+                    <div class="chart" ref="pictorialBox"></div>
+                </card>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script>
+import Card from '../components/card.vue';
+import * as echarts from 'echarts';
+import chartOptions from '../mixins/chartOptions';
+export default {
+    name: 'ChartScreen',
+    components: { Card },
+    mixins: [chartOptions],
+    data() {
+        return {
+            label: [
+                '南昌市',
+                '景德镇市',
+                '萍乡市',
+                '九江市',
+                '新余市',
+                '鹰潭市',
+                '赣州市',
+                '吉安市',
+                '宜春市',
+                '抚州市',
+                '上饶市',
+            ],
+            dates: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+            values: [75, 23, 12, 59, 77, 14, 76, 35, 25, 11, 71],
+            chartList: [],
+            labelInfo: {
+                val1: '南昌市',
+                val2: '九江市',
+                val3: '景德镇市',
+                val4: '萍乡市',
+                val5: '新余市',
+                val6: '鹰潭市',
+                val7: '赣州市',
+                val8: '宜春市',
+                val9: '上饶市',
+                val10: '吉安市',
+                val11: '抚州市',
+            },
+            chartMap: new Map(),
+        };
+    },
+    mounted() {
+        this.initLine();
+        this.initBar();
+        this.initMreLineChart();
+        this.initMoreBarChart();
+        this.initScatterChart();
+        this.initPieChart();
+        this.initWaterChat();
+        this.initRadarChart();
+        this.initGroupBarChart();
+        this.initPictorialBox();
+        this.getData();
+    },
+    methods: {
+        getData() {
+            this.$http
+                .get('/summaryState/all', {
+                    page: 0,
+                    size: 99,
+                })
+                .then((res) => {
+                    let list = res.content;
+                    let map = new Map();
+                    list.forEach((item) => {
+                        let _list = [];
+                        if (map.has(item.type.name)) {
+                            _list = map.get(item.type.name);
+                        }
+                        _list.push(item);
+                        map.set(item.type.name, _list);
+                    });
+                    console.log(map);
+                });
+        },
+        initLine() {
+            let myChart = echarts.init(this.$refs.lineChart, 'jmrh');
+            this.initChat(myChart);
+            myChart.setOption({
+                tooltip: {
+                    formatter: () => {
+                        return '';
+                    },
+                },
+                grid: {
+                    bottom: 35,
+                },
+                color: ['#5CFFAC'],
+                xAxis: {
+                    data: this.dates,
+                },
+                series: [
+                    {
+                        name: '项目数量',
+                        data: this.values,
+                        type: 'line',
+                        areaStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: '#5CFFAC',
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(92, 255, 172, 0)',
+                                    },
+                                ],
+                                global: false,
+                            },
+                        },
+                        label: {
+                            show: false,
+                            formatter: '{b}\r\n{c}',
+                            backgroundColor: '#34D281',
+                            color: '#fff',
+                            padding: [3, 5],
+                            borderRadius: 4,
+                            position: 'top',
+                            textStyle: {
+                                lineHeight: 16,
+                            },
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                            },
+                        },
+                        labelLayout: this.labelLayout,
+                    },
+                ],
+            });
+            this.chartList[0] = myChart;
+        },
+        initMreLineChart() {
+            let myChart = echarts.init(this.$refs.moreLineChart, 'jmrh');
+            this.initChat(myChart);
+            let data1 = [...this.label].map((item) => {
+                return this.getRadom();
+            });
+            let data2 = [...this.label].map((item) => {
+                return this.getRadom();
+            });
+
+            myChart.setOption({
+                legend: {
+                    show: true,
+                    data: ['军转民', '民参军'],
+                    left: '10%',
+                    top: 20,
+                },
+                grid: {
+                    bottom: 35,
+                    top: 70,
+                },
+                color: ['#5B8FF9', '#5AD8A6'],
+                xAxis: {
+                    data: this.label,
+                    axisLabel: {
+                        rotate: -60,
+                        margin: 5,
+                        formatter: (value) => {
+                            return value.replace(/市/, '');
+                        },
+                    },
+                },
+                series: [
+                    {
+                        name: '军转民',
+                        data: data1,
+                        type: 'line',
+                        step: true,
+                    },
+                    {
+                        name: '民参军',
+                        data: data2,
+                        type: 'line',
+                        step: true,
+                    },
+                ],
+            });
+            this.chartList[2] = myChart;
+        },
+        initMoreBarChart() {
+            let myChart = echarts.init(this.$refs.moreBarChart, 'jmrh');
+            this.initChat(myChart);
+            let data1 = [...this.label].map((item) => {
+                return this.getRadom();
+            });
+            let data2 = [...this.label].map((item) => {
+                return this.getRadom();
+            });
+
+            myChart.setOption({
+                legend: {
+                    show: true,
+                    data: ['买入数量', '卖出数量'],
+                    left: '10%',
+                    top: 20,
+                },
+                grid: {
+                    bottom: 35,
+                    top: 70,
+                },
+                xAxis: {
+                    data: this.label,
+                    boundaryGap: true,
+                    axisLabel: {
+                        rotate: -60,
+                        margin: 5,
+                        formatter: (value) => {
+                            return value.replace(/市/, '');
+                        },
+                    },
+                },
+                series: [
+                    {
+                        name: '买入数量',
+                        data: data1,
+                        type: 'bar',
+                        stack: 'one',
+                    },
+                    {
+                        name: '卖出数量',
+                        data: data2,
+                        type: 'bar',
+                        stack: 'one',
+                    },
+                ],
+            });
+            this.chartList[3] = myChart;
+        },
+        initBar() {
+            let myChart = echarts.init(this.$refs.barChart, 'jmrh');
+            this.initChat(myChart);
+            myChart.setOption({
+                grid: {
+                    bottom: 35,
+                },
+                xAxis: {
+                    data: this.label,
+                    boundaryGap: true,
+                    axisLabel: {
+                        rotate: -60,
+                        margin: 5,
+                        formatter: (value) => {
+                            return value.replace(/市/, '');
+                        },
+                    },
+                },
+                series: [
+                    {
+                        name: '项目数量',
+                        data: this.values,
+                        type: 'bar',
+                    },
+                ],
+            });
+            this.chartList[1] = myChart;
+        },
+        initScatterChart() {
+            let myChart = echarts.init(this.$refs.scatterChart, 'jmrh');
+            this.initChat(myChart);
+            let data1 = [...this.label].map((item) => {
+                return this.getRadom();
+            });
+            let data2 = [...this.label].map((item) => {
+                return this.getRadom();
+            });
+            let data3 = [...this.label].map((item) => {
+                return this.getRadom();
+            });
+            let data4 = [...this.label].map((item) => {
+                return this.getRadom();
+            });
+
+            let itemStyle = {
+                opacity: 0.8,
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                shadowColor: 'rgba(0,0,0,0.3)',
+            };
+
+            myChart.setOption({
+                legend: {
+                    show: true,
+                    data: ['第一季度', '第二季度', '第三季度', '第四季度'],
+                    left: '10%',
+                    top: 20,
+                },
+                grid: {
+                    bottom: 35,
+                    top: 70,
+                },
+                xAxis: {
+                    data: this.label,
+                    boundaryGap: true,
+                    axisLabel: {
+                        rotate: -60,
+                        margin: 5,
+                        formatter: (value) => {
+                            return value.replace(/市/, '');
+                        },
+                    },
+                },
+                series: [
+                    {
+                        name: '第一季度',
+                        data: data1,
+                        type: 'scatter',
+                        stack: 'one',
+                        itemStyle: itemStyle,
+                    },
+                    {
+                        name: '第二季度',
+                        data: data2,
+                        type: 'scatter',
+                        stack: 'one',
+                        itemStyle: itemStyle,
+                    },
+                    {
+                        name: '第三季度',
+                        data: data3,
+                        type: 'scatter',
+                        stack: 'one',
+                        itemStyle: itemStyle,
+                    },
+                    {
+                        name: '第四季度',
+                        data: data4,
+                        type: 'scatter',
+                        stack: 'one',
+                        itemStyle: itemStyle,
+                    },
+                ],
+            });
+            this.chartList[4] = myChart;
+        },
+        initPieChart() {
+            let myChart = echarts.init(this.$refs.pieChart, 'jmrh');
+            // this.initChat(myChart);
+
+            myChart.setOption({
+                tooltip: {
+                    trigger: 'item',
+                },
+                legend: {
+                    show: true,
+                    left: 20,
+                    top: 0,
+                },
+                series: [
+                    {
+                        name: '访问来源',
+                        type: 'pie',
+                        radius: '50%',
+                        top: 40,
+                        data: [
+                            { value: 1048, name: '热点推荐' },
+                            { value: 735, name: '新闻资讯' },
+                            { value: 580, name: '行业动态' },
+                            { value: 484, name: '通知通告' },
+                            { value: 300, name: '政策法规' },
+                        ],
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)',
+                            },
+                        },
+                    },
+                ],
+            });
+
+            this.chartList[6] = myChart;
+        },
+        initWaterChat() {
+            let myChart = echarts.init(this.$refs.waterChart, 'jmrh');
+            myChart.setOption({
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        // 坐标轴指示器，坐标轴触发有效
+                        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                    formatter: function (params) {
+                        var tar;
+                        if (params[1].value !== '-') {
+                            tar = params[1];
+                        } else {
+                            tar = params[0];
+                        }
+                        return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
+                    },
+                },
+                legend: {
+                    data: ['支出', '收入'],
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true,
+                },
+                xAxis: {
+                    type: 'category',
+                    splitLine: { show: false },
+                    data: (function () {
+                        var list = [];
+                        for (var i = 1; i <= 11; i++) {
+                            list.push('11月' + i + '日');
+                        }
+                        return list;
+                    })(),
+                },
+                yAxis: {
+                    type: 'value',
+                },
+                series: [
+                    {
+                        name: '辅助',
+                        type: 'bar',
+                        stack: '总量',
+                        itemStyle: {
+                            barBorderColor: 'rgba(0,0,0,0)',
+                            color: 'rgba(0,0,0,0)',
+                        },
+                        emphasis: {
+                            itemStyle: {
+                                barBorderColor: 'rgba(0,0,0,0)',
+                                color: 'rgba(0,0,0,0)',
+                            },
+                        },
+                        data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292],
+                    },
+                    {
+                        name: '收入',
+                        type: 'bar',
+                        stack: '总量',
+                        label: {
+                            show: true,
+                            position: 'top',
+                        },
+                        data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-'],
+                    },
+                    {
+                        name: '支出',
+                        type: 'bar',
+                        stack: '总量',
+                        label: {
+                            show: true,
+                            position: 'bottom',
+                        },
+                        data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203],
+                    },
+                ],
+            });
+            this.chartList[7] = myChart;
+        },
+        initRadarChart() {
+            let myChart = echarts.init(this.$refs.radarChart, 'jmrh');
+            var dataBJ = [
+                [55, 9, 56, 0.46, 18, 6, 1],
+                [25, 11, 21, 0.65, 34, 9, 2],
+                [56, 7, 63, 0.3, 14, 5, 3],
+                [33, 7, 29, 0.33, 16, 6, 4],
+                [42, 24, 44, 0.76, 40, 16, 5],
+                [82, 58, 90, 1.77, 68, 33, 6],
+                [74, 49, 77, 1.46, 48, 27, 7],
+                [78, 55, 80, 1.29, 59, 29, 8],
+                [267, 216, 280, 4.8, 108, 64, 9],
+                [185, 127, 216, 2.52, 61, 27, 10],
+                [39, 19, 38, 0.57, 31, 15, 11],
+                [41, 11, 40, 0.43, 21, 7, 12],
+                [64, 38, 74, 1.04, 46, 22, 13],
+                [108, 79, 120, 1.7, 75, 41, 14],
+                [108, 63, 116, 1.48, 44, 26, 15],
+                [33, 6, 29, 0.34, 13, 5, 16],
+                [94, 66, 110, 1.54, 62, 31, 17],
+                [186, 142, 192, 3.88, 93, 79, 18],
+                [57, 31, 54, 0.96, 32, 14, 19],
+                [22, 8, 17, 0.48, 23, 10, 20],
+                [39, 15, 36, 0.61, 29, 13, 21],
+                [94, 69, 114, 2.08, 73, 39, 22],
+                [99, 73, 110, 2.43, 76, 48, 23],
+                [31, 12, 30, 0.5, 32, 16, 24],
+                [42, 27, 43, 1, 53, 22, 25],
+                [154, 117, 157, 3.05, 92, 58, 26],
+                [234, 185, 230, 4.09, 123, 69, 27],
+                [160, 120, 186, 2.77, 91, 50, 28],
+                [134, 96, 165, 2.76, 83, 41, 29],
+                [52, 24, 60, 1.03, 50, 21, 30],
+                [46, 5, 49, 0.28, 10, 6, 31],
+            ];
+
+            var dataGZ = [
+                [26, 37, 27, 1.163, 27, 13, 1],
+                [85, 62, 71, 1.195, 60, 8, 2],
+                [78, 38, 74, 1.363, 37, 7, 3],
+                [21, 21, 36, 0.634, 40, 9, 4],
+                [41, 42, 46, 0.915, 81, 13, 5],
+                [56, 52, 69, 1.067, 92, 16, 6],
+                [64, 30, 28, 0.924, 51, 2, 7],
+                [55, 48, 74, 1.236, 75, 26, 8],
+                [76, 85, 113, 1.237, 114, 27, 9],
+                [91, 81, 104, 1.041, 56, 40, 10],
+                [84, 39, 60, 0.964, 25, 11, 11],
+                [64, 51, 101, 0.862, 58, 23, 12],
+                [70, 69, 120, 1.198, 65, 36, 13],
+                [77, 105, 178, 2.549, 64, 16, 14],
+                [109, 68, 87, 0.996, 74, 29, 15],
+                [73, 68, 97, 0.905, 51, 34, 16],
+                [54, 27, 47, 0.592, 53, 12, 17],
+                [51, 61, 97, 0.811, 65, 19, 18],
+                [91, 71, 121, 1.374, 43, 18, 19],
+                [73, 102, 182, 2.787, 44, 19, 20],
+                [73, 50, 76, 0.717, 31, 20, 21],
+                [84, 94, 140, 2.238, 68, 18, 22],
+                [93, 77, 104, 1.165, 53, 7, 23],
+                [99, 130, 227, 3.97, 55, 15, 24],
+                [146, 84, 139, 1.094, 40, 17, 25],
+                [113, 108, 137, 1.481, 48, 15, 26],
+                [81, 48, 62, 1.619, 26, 3, 27],
+                [56, 48, 68, 1.336, 37, 9, 28],
+                [82, 92, 174, 3.29, 0, 13, 29],
+                [106, 116, 188, 3.628, 101, 16, 30],
+                [118, 50, 0, 1.383, 76, 11, 31],
+            ];
+
+            var dataSH = [
+                [91, 45, 125, 0.82, 34, 23, 1],
+                [65, 27, 78, 0.86, 45, 29, 2],
+                [83, 60, 84, 1.09, 73, 27, 3],
+                [109, 81, 121, 1.28, 68, 51, 4],
+                [106, 77, 114, 1.07, 55, 51, 5],
+                [109, 81, 121, 1.28, 68, 51, 6],
+                [106, 77, 114, 1.07, 55, 51, 7],
+                [89, 65, 78, 0.86, 51, 26, 8],
+                [53, 33, 47, 0.64, 50, 17, 9],
+                [80, 55, 80, 1.01, 75, 24, 10],
+                [117, 81, 124, 1.03, 45, 24, 11],
+                [99, 71, 142, 1.1, 62, 42, 12],
+                [95, 69, 130, 1.28, 74, 50, 13],
+                [116, 87, 131, 1.47, 84, 40, 14],
+                [108, 80, 121, 1.3, 85, 37, 15],
+                [134, 83, 167, 1.16, 57, 43, 16],
+                [79, 43, 107, 1.05, 59, 37, 17],
+                [71, 46, 89, 0.86, 64, 25, 18],
+                [97, 71, 113, 1.17, 88, 31, 19],
+                [84, 57, 91, 0.85, 55, 31, 20],
+                [87, 63, 101, 0.9, 56, 41, 21],
+                [104, 77, 119, 1.09, 73, 48, 22],
+                [87, 62, 100, 1, 72, 28, 23],
+                [168, 128, 172, 1.49, 97, 56, 24],
+                [65, 45, 51, 0.74, 39, 17, 25],
+                [39, 24, 38, 0.61, 47, 17, 26],
+                [39, 24, 39, 0.59, 50, 19, 27],
+                [93, 68, 96, 1.05, 79, 29, 28],
+                [188, 143, 197, 1.66, 99, 51, 29],
+                [174, 131, 174, 1.55, 108, 50, 30],
+                [187, 143, 201, 1.39, 89, 53, 31],
+            ];
+
+            var lineStyle = {
+                normal: {
+                    width: 1,
+                    opacity: 0.5,
+                },
+            };
+
+            myChart.setOption({
+                legend: {
+                    top: 10,
+                    left: 10,
+                    data: ['北京', '上海', '广州'],
+                    itemGap: 20,
+                    orient: 'vertical',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 14,
+                    },
+                    selectedMode: 'single',
+                },
+                // visualMap: {
+                //     show: true,
+                //     min: 0,
+                //     max: 20,
+                //     dimension: 6,
+                //     inRange: {
+                //         colorLightness: [0.5, 0.8]
+                //     }
+                // },
+                radar: {
+                    left: 30,
+                    indicator: [
+                        { name: 'AQI', max: 300 },
+                        { name: 'PM2.5', max: 250 },
+                        { name: 'PM10', max: 300 },
+                        { name: 'CO', max: 5 },
+                        { name: 'NO2', max: 200 },
+                        { name: 'SO2', max: 100 },
+                    ],
+                    shape: 'circle',
+                    splitNumber: 5,
+                    name: {
+                        textStyle: {
+                            color: 'rgb(238, 197, 102)',
+                        },
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: [
+                                'rgba(238, 197, 102, 0.1)',
+                                'rgba(238, 197, 102, 0.2)',
+                                'rgba(238, 197, 102, 0.4)',
+                                'rgba(238, 197, 102, 0.6)',
+                                'rgba(238, 197, 102, 0.8)',
+                                'rgba(238, 197, 102, 1)',
+                            ].reverse(),
+                        },
+                    },
+                    splitArea: {
+                        show: false,
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: 'rgba(238, 197, 102, 0.5)',
+                        },
+                    },
+                },
+                series: [
+                    {
+                        name: '北京',
+                        type: 'radar',
+                        lineStyle: lineStyle,
+                        data: dataBJ,
+                        symbol: 'none',
+                        itemStyle: {
+                            color: '#F9713C',
+                        },
+                        areaStyle: {
+                            opacity: 0.1,
+                        },
+                    },
+                    {
+                        name: '上海',
+                        type: 'radar',
+                        lineStyle: lineStyle,
+                        data: dataSH,
+                        symbol: 'none',
+                        itemStyle: {
+                            color: '#B3E4A1',
+                        },
+                        areaStyle: {
+                            opacity: 0.05,
+                        },
+                    },
+                    {
+                        name: '广州',
+                        type: 'radar',
+                        lineStyle: lineStyle,
+                        data: dataGZ,
+                        symbol: 'none',
+                        itemStyle: {
+                            color: 'rgb(238, 197, 102)',
+                        },
+                        areaStyle: {
+                            opacity: 0.05,
+                        },
+                    },
+                ],
+            });
+
+            this.chartList[8] = myChart;
+        },
+        initGroupBarChart() {
+            let myChart = echarts.init(this.$refs.groupBarChart, 'jmrh');
+            this.initChat(myChart);
+            myChart.setOption({
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        // 坐标轴指示器，坐标轴触发有效
+                        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                },
+                legend: {
+                    right: 30,
+                    data: ['利润', '收入'],
+                },
+                grid: {
+                    top: 20,
+                },
+                xAxis: [
+                    {
+                        type: 'value',
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: 'category',
+                        axisTick: {
+                            show: false,
+                        },
+                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+                    },
+                ],
+                series: [
+                    {
+                        name: '利润',
+                        type: 'bar',
+                        label: {
+                            show: true,
+                            position: 'inside',
+                        },
+                        emphasis: {
+                            focus: 'series',
+                        },
+                        data: [200, 170, 240, 244, 200, 220, 210],
+                    },
+                    {
+                        name: '收入',
+                        type: 'bar',
+                        stack: '总量',
+                        label: {
+                            show: true,
+                        },
+                        emphasis: {
+                            focus: 'series',
+                        },
+                        data: [320, 302, 341, 374, 390, 450, 420],
+                    },
+                ],
+            });
+            this.chartList[9] = myChart;
+        },
+        initPictorialBox() {
+            let myChart = echarts.init(this.$refs.pictorialBox, 'jmrh');
+            var symbolSize = 20;
+            var data = [
+                [40, -10],
+                [-30, -5],
+                [-76.5, 20],
+                [-63.5, 40],
+                [-22.1, 50],
+            ];
+
+            let option = {
+                tooltip: {
+                    triggerOn: 'none',
+                    formatter: function (params) {
+                        return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
+                    },
+                },
+                grid: {
+                    top: 20,
+                    bottom: 30,
+                },
+                xAxis: {
+                    min: -100,
+                    max: 70,
+                    type: 'value',
+                    axisLine: { onZero: false },
+                },
+                yAxis: {
+                    min: -30,
+                    max: 60,
+                    type: 'value',
+                    axisLine: { onZero: false },
+                },
+                // dataZoom: [
+                //     {
+                //         type: 'slider',
+                //         xAxisIndex: 0,
+                //         filterMode: 'none',
+                //     },
+                //     {
+                //         type: 'slider',
+                //         yAxisIndex: 0,
+                //         filterMode: 'none',
+                //     },
+                //     {
+                //         type: 'inside',
+                //         xAxisIndex: 0,
+                //         filterMode: 'none',
+                //     },
+                //     {
+                //         type: 'inside',
+                //         yAxisIndex: 0,
+                //         filterMode: 'none',
+                //     },
+                // ],
+                series: [
+                    {
+                        id: 'a',
+                        type: 'line',
+                        smooth: true,
+                        symbolSize: symbolSize,
+                        data: data,
+                    },
+                ],
+            };
+
+            setTimeout(function () {
+                // Add shadow circles (which is not visible) to enable drag.
+                myChart.setOption({
+                    graphic: data.map(function (item, dataIndex) {
+                        return {
+                            type: 'circle',
+                            position: myChart.convertToPixel('grid', item),
+                            shape: {
+                                cx: 0,
+                                cy: 0,
+                                r: symbolSize / 2,
+                            },
+                            invisible: true,
+                            draggable: true,
+                            ondrag: function (dx, dy) {
+                                onPointDragging(dataIndex, [this.x, this.y]);
+                            },
+                            onmousemove: function () {
+                                showTooltip(dataIndex);
+                            },
+                            onmouseout: function () {
+                                hideTooltip(dataIndex);
+                            },
+                            z: 100,
+                        };
+                    }),
+                });
+            }, 0);
+
+            window.addEventListener('resize', updatePosition);
+
+            myChart.on('dataZoom', updatePosition);
+
+            function updatePosition() {
+                myChart.setOption({
+                    graphic: data.map(function (item, dataIndex) {
+                        return {
+                            position: myChart.convertToPixel('grid', item),
+                        };
+                    }),
+                });
+            }
+
+            function showTooltip(dataIndex) {
+                myChart.dispatchAction({
+                    type: 'showTip',
+                    seriesIndex: 0,
+                    dataIndex: dataIndex,
+                });
+            }
+
+            function hideTooltip(dataIndex) {
+                myChart.dispatchAction({
+                    type: 'hideTip',
+                });
+            }
+
+            function onPointDragging(dataIndex, pos) {
+                data[dataIndex] = myChart.convertFromPixel('grid', pos);
+
+                // Update data
+                myChart.setOption({
+                    series: [
+                        {
+                            id: 'a',
+                            data: data,
+                        },
+                    ],
+                });
+            }
+
+            myChart.setOption(option);
+            this.chartList[10] = myChart;
+        },
+        resize() {
+            let list = [...this.chartList];
+            list.forEach((item) => {
+                if (item) {
+                    item.resize();
+                }
+            });
+        },
+        getRadom() {
+            return Math.floor(Math.random() * 100) + 1;
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.el-col {
+    min-height: 330px;
+    height: 30vh;
+    padding: 10px;
+    box-sizing: border-box;
+}
+.chart {
+    width: 100%;
+    height: 100%;
+}
+.chart-screen {
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 20px;
+}
+</style>

src/main/data-center/src/views/ChartScreen.vue

@@ -1,6 +1,17 @@
 <template>
     <div class="chart-screen">
+        <div class="select">
+            <el-select v-model="year" placeholder="请选择">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+            </el-select>
+        </div>
         <el-row>
+            <el-col :span="6" :lg="6" :md="8" :sm="12" :key="index" v-for="(item, index) in chartTitles">
+                <card icon="shuju_icon_qiyeshuliang" :title="item">
+                    <div class="chart" :ref="`chartItem${index + 1}`"></div>
+                </card>
+            </el-col>
             <el-col :span="6" :lg="6" :md="8" :sm="12">
                 <card icon="shuju_icon_qiyeshuliang" title="企业增长(趋势图)">
                     <div class="chart" ref="lineChart"></div>
@@ -82,8 +93,42 @@ export default {
             dates: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
             values: [75, 23, 12, 59, 77, 14, 76, 35, 25, 11, 71],
             chartList: [],
+            labelInfo: {
+                val1: '南昌市',
+                val2: '九江市',
+                val3: '景德镇市',
+                val4: '萍乡市',
+                val5: '新余市',
+                val6: '鹰潭市',
+                val7: '赣州市',
+                val8: '宜春市',
+                val9: '上饶市',
+                val10: '吉安市',
+                val11: '抚州市',
+            },
+            labels: [
+                '南昌市',
+                '九江市',
+                '景德镇市',
+                '萍乡市',
+                '新余市',
+                '鹰潭市',
+                '赣州市',
+                '宜春市',
+                '上饶市',
+                '吉安市',
+                '抚州市',
+            ],
+            chartMap: new Map(),
+            year: '2020',
+            options: [{ value: '2020', label: '2020' }],
         };
     },
+    computed: {
+        chartTitles() {
+            return [...this.chartMap.keys()] || [];
+        },
+    },
     mounted() {
         this.initLine();
         this.initBar();
@@ -95,8 +140,168 @@ export default {
         this.initRadarChart();
         this.initGroupBarChart();
         this.initPictorialBox();
+        this.getData();
     },
     methods: {
+        getData() {
+            this.$http
+                .get('/summaryState/all', {
+                    page: 0,
+                    size: 99,
+                })
+                .then((res) => {
+                    let list = res.content;
+                    let map = new Map();
+                    list.forEach((item) => {
+                        let _list = [];
+                        if (map.has(item.type.name)) {
+                            _list = map.get(item.type.name);
+                        }
+                        _list.push(item);
+                        map.set(item.type.name, _list);
+                    });
+                    this.chartMap = map;
+                    this.$nextTick(() => {
+                        let titles = [...this.chartTitles];
+                        titles.forEach((item, index) => {
+                            this.initChart(this.chartMap.get(item), index + 1);
+                        });
+                    });
+                });
+        },
+        initChart(info, key = 1) {
+            console.log(info);
+            let myChart = echarts.init(this.$refs[`chartItem${key}`][0], 'jmrh');
+            this.initChat(myChart);
+            const labels = [...this.labels];
+            let yAxis = [];
+            let series = [];
+            let legend = {
+                data: [],
+            };
+            let yaxis = [
+                ...new Set(
+                    info.map((item) => {
+                        return item.yaxisIndex;
+                    })
+                ),
+            ];
+            let xAxis = {
+                data: labels,
+                boundaryGap: true,
+                axisLabel: {
+                    rotate: -60,
+                    margin: 5,
+                    formatter: (value) => {
+                        return value.replace(/市/, '');
+                    },
+                },
+            };
+
+            info.forEach((item) => {
+                if (item.chartType) {
+                    console.log(this.getValues(item));
+                    let values = this.getValues(item);
+                    let bai = item.val1.indexOf('%') !== -1;
+                    console.log(Math.max(...values));
+                    if (item.yaxisIndex != yAxis.length - 1) {
+                        yAxis.push({
+                            type: 'value',
+                            name: yaxis.length === 1 ? '' : item.title,
+                            min: 0,
+                            position: item.yaxisIndex ? 'right' : 'left',
+                            axisLine: {
+                                show: true,
+                            },
+                            axisLabel: {
+                                formatter: `{value}${bai ? '%' : ''}`,
+                            },
+                        });
+                    }
+
+                    if (item.chartType === 'pie') {
+                        xAxis = {};
+                        yAxis = [];
+                        series.push({
+                            name: item.title,
+                            type: 'pie',
+                            radius: '50%',
+                            top: 40,
+                            data: [
+                                { value: item.val1, name: '南昌市' },
+                                { value: item.val2, name: '九江市' },
+                                { value: item.val3, name: '景德镇市' },
+                                { value: item.val4, name: '萍乡市' },
+                                { value: item.val5, name: '新余市' },
+                                { value: item.val6, name: '鹰潭市' },
+                                { value: item.val7, name: '赣州市' },
+                                { value: item.val8, name: '宜春市' },
+                                { value: item.val9, name: '上饶市' },
+                                { value: item.val10, name: '吉安市' },
+                                { value: item.val11, name: '抚州市' },
+                            ],
+                            emphasis: {
+                                itemStyle: {
+                                    shadowBlur: 10,
+                                    shadowOffsetX: 0,
+                                    shadowColor: 'rgba(0, 0, 0, 0.5)',
+                                },
+                            },
+                        });
+                        legend = {
+                            show: true,
+                            left: 20,
+                            top: 0,
+                        };
+                    } else {
+                        series.push({
+                            name: item.title,
+                            type: item.chartType,
+                            data: values,
+                            yAxisIndex: item.yaxisIndex,
+                        });
+
+                        legend.data.push(item.title);
+                    }
+                }
+            });
+            console.log(series);
+            myChart.setOption({
+                legend,
+                grid: {
+                    top: 50,
+                    bottom: 35,
+                    right: yaxis.length > 1 ? 90 : 30,
+                },
+                xAxis: xAxis,
+                yAxis,
+                series,
+            });
+        },
+        getValues(info) {
+            console.log(info);
+            return [
+                info.val1,
+                info.val2,
+                info.val3,
+                info.val4,
+                info.val5,
+                info.val6,
+                info.val7,
+                info.val8,
+                info.val9,
+                info.val10,
+                info.val11,
+            ].map((item) => {
+                return Number(item.replace(/%/, ''));
+            });
+        },
+        getMinMax(list) {
+            list.sort(function (a, b) {
+                return a - b;
+            });
+            return [list[0], list[list.length - 1]];
+        },
         initLine() {
             let myChart = echarts.init(this.$refs.lineChart, 'jmrh');
             this.initChat(myChart);
@@ -937,4 +1142,16 @@ export default {
     overflow-y: auto;
     padding: 20px;
 }
+
+.select {
+    /deep/.el-select {
+        background-color: transparent;
+        .el-input__inner {
+            background-color: transparent;
+            border: 1px solid #48aadc;
+            color: #3bbdf1;
+        }
+    }
+    padding: 10px 10px 25px;
+}
 </style>

src/main/java/com/izouma/jmrh/domain/stat/SummaryState.java

@@ -0,0 +1,71 @@
+package com.izouma.jmrh.domain.stat;
+
+import com.izouma.jmrh.domain.BaseEntity;
+import com.izouma.jmrh.enums.ChartType;
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import javax.persistence.Entity;
+import javax.persistence.JoinColumn;
+import javax.persistence.OneToOne;
+import java.security.PrivateKey;
+
+@Data
+@Entity
+@AllArgsConstructor
+@NoArgsConstructor
+@Builder
+@ApiModel("汇总数据")
+public class SummaryState extends BaseEntity {
+    @ApiModelProperty("表名")
+    private String title;
+
+    @ApiModelProperty("南昌市")
+    private String val1;
+
+    @ApiModelProperty("九江市")
+    private String val2;
+
+    @ApiModelProperty("景德镇市")
+    private String val3;
+
+    @ApiModelProperty("萍乡市")
+    private String val4;
+
+    @ApiModelProperty("新余市")
+    private String val5;
+
+    @ApiModelProperty("鹰潭市")
+    private String val6;
+
+    @ApiModelProperty("赣州市")
+    private String val7;
+
+    @ApiModelProperty("宜春市")
+    private String val8;
+
+    @ApiModelProperty("上饶市")
+    private String val9;
+
+    @ApiModelProperty("吉安市")
+    private String val10;
+
+    @ApiModelProperty("抚州市")
+    private String val11;
+
+    @OneToOne
+    @JoinColumn(name = "type")
+    @ApiModelProperty(name = "分类")
+    private SummaryType type;
+
+    @ApiModelProperty("y轴")
+    private Integer yAxisIndex;
+
+    @ApiModelProperty("图表类型")
+    private ChartType chartType;
+
+}

src/main/java/com/izouma/jmrh/domain/stat/SummaryType.java

@@ -0,0 +1,18 @@
+package com.izouma.jmrh.domain.stat;
+
+import com.izouma.jmrh.domain.BaseEntity;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import javax.persistence.Entity;
+
+@Data
+@Entity
+@AllArgsConstructor
+@NoArgsConstructor
+@Builder
+public class SummaryType extends BaseEntity {
+    private String name;
+}

src/main/java/com/izouma/jmrh/enums/ChartType.java

@@ -0,0 +1,19 @@
+package com.izouma.jmrh.enums;
+
+public enum ChartType {
+    bar("柱状图","bar"),
+    line("折线图","line"),
+    pie("饼状图","pie");
+
+    private final String description;
+
+    private String name;
+    ChartType(String description, String name) {
+        this.description = description;
+        this.name = name;
+    }
+
+    public String getDescription() {
+        return description;
+    }
+}

src/main/java/com/izouma/jmrh/repo/stat/SummaryStateRepo.java

@@ -0,0 +1,8 @@
+package com.izouma.jmrh.repo.stat;
+
+import com.izouma.jmrh.domain.stat.SummaryState;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
+
+public interface SummaryStateRepo extends JpaRepository<SummaryState, Long>, JpaSpecificationExecutor<SummaryState> {
+}

src/main/java/com/izouma/jmrh/repo/stat/SummaryTypeRepo.java

@@ -0,0 +1,8 @@
+package com.izouma.jmrh.repo.stat;
+
+import com.izouma.jmrh.domain.stat.SummaryType;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
+
+public interface SummaryTypeRepo extends JpaRepository<SummaryType, Long>, JpaSpecificationExecutor<SummaryType> {
+}

src/main/java/com/izouma/jmrh/security/WebSecurityConfig.java

@@ -77,6 +77,8 @@ public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
                 .antMatchers("/test500").permitAll()
                 .antMatchers("/article/all").permitAll()
                 .antMatchers("/article/get/*").permitAll()
+                .antMatchers("/summaryState/all").permitAll()
+                .antMatchers("/summaryState/get/*").permitAll()
                 .antMatchers("/sms/*").permitAll()
                 .antMatchers("/user/toRegister").permitAll()
                 .antMatchers("/user/register").permitAll()

src/main/java/com/izouma/jmrh/service/stat/SummaryStateService.java

@@ -0,0 +1,14 @@
+package com.izouma.jmrh.service.stat;
+
+import com.izouma.jmrh.domain.stat.SummaryState;
+import com.izouma.jmrh.repo.stat.SummaryStateRepo;
+import lombok.AllArgsConstructor;
+import org.springframework.stereotype.Service;
+
+@Service
+@AllArgsConstructor
+public class SummaryStateService {
+
+    private SummaryStateRepo summaryStateRepo;
+
+}

src/main/java/com/izouma/jmrh/service/stat/SummaryTypeService.java

@@ -0,0 +1,14 @@
+package com.izouma.jmrh.service.stat;
+
+import com.izouma.jmrh.domain.stat.SummaryType;
+import com.izouma.jmrh.repo.stat.SummaryTypeRepo;
+import lombok.AllArgsConstructor;
+import org.springframework.stereotype.Service;
+
+@Service
+@AllArgsConstructor
+public class SummaryTypeService {
+
+    private SummaryTypeRepo summaryTypeRepo;
+
+}

src/main/java/com/izouma/jmrh/web/stat/SummaryStateController.java

@@ -0,0 +1,63 @@
+package com.izouma.jmrh.web.stat;
+
+import com.izouma.jmrh.web.BaseController;
+import com.izouma.jmrh.domain.stat.SummaryState;
+import com.izouma.jmrh.service.stat.SummaryStateService;
+import com.izouma.jmrh.dto.PageQuery;
+import com.izouma.jmrh.exception.BusinessException;
+import com.izouma.jmrh.repo.stat.SummaryStateRepo;
+import com.izouma.jmrh.utils.ObjUtils;
+import com.izouma.jmrh.utils.excel.ExcelUtils;
+
+import lombok.AllArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.web.bind.annotation.*;
+
+import javax.servlet.http.HttpServletResponse;
+import java.io.IOException;
+import java.util.List;
+
+@RestController
+@RequestMapping("/summaryState")
+@AllArgsConstructor
+public class SummaryStateController extends BaseController {
+    private SummaryStateService summaryStateService;
+    private SummaryStateRepo summaryStateRepo;
+
+    //@PreAuthorize("hasRole('ADMIN')")
+    @PostMapping("/save")
+    public SummaryState save(@RequestBody SummaryState record) {
+        if (record.getId() != null) {
+            SummaryState orig = summaryStateRepo.findById(record.getId()).orElseThrow(new BusinessException("无记录"));
+            ObjUtils.merge(orig, record);
+            return summaryStateRepo.save(orig);
+        }
+        return summaryStateRepo.save(record);
+    }
+
+
+    //@PreAuthorize("hasRole('ADMIN')")
+    @GetMapping("/all")
+    public Page<SummaryState> all(PageQuery pageQuery) {
+        return summaryStateRepo.findAll(toSpecification(pageQuery,SummaryState.class), toPageRequest(pageQuery));
+    }
+
+    @GetMapping("/get/{id}")
+    public SummaryState get(@PathVariable Long id) {
+        return summaryStateRepo.findById(id).orElseThrow(new BusinessException("无记录"));
+    }
+
+    @PostMapping("/del/{id}")
+    public void del(@PathVariable Long id) {
+        summaryStateRepo.deleteById(id);
+    }
+
+    @GetMapping("/excel")
+    @ResponseBody
+    public void excel(HttpServletResponse response, PageQuery pageQuery) throws IOException {
+        List<SummaryState> data = all(pageQuery).getContent();
+        ExcelUtils.export(response, data);
+    }
+}
+

src/main/java/com/izouma/jmrh/web/stat/SummaryTypeController.java

@@ -0,0 +1,63 @@
+package com.izouma.jmrh.web.stat;
+
+import com.izouma.jmrh.web.BaseController;
+import com.izouma.jmrh.domain.stat.SummaryType;
+import com.izouma.jmrh.service.stat.SummaryTypeService;
+import com.izouma.jmrh.dto.PageQuery;
+import com.izouma.jmrh.exception.BusinessException;
+import com.izouma.jmrh.repo.stat.SummaryTypeRepo;
+import com.izouma.jmrh.utils.ObjUtils;
+import com.izouma.jmrh.utils.excel.ExcelUtils;
+
+import lombok.AllArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.web.bind.annotation.*;
+
+import javax.servlet.http.HttpServletResponse;
+import java.io.IOException;
+import java.util.List;
+
+@RestController
+@RequestMapping("/summaryType")
+@AllArgsConstructor
+public class SummaryTypeController extends BaseController {
+    private SummaryTypeService summaryTypeService;
+    private SummaryTypeRepo summaryTypeRepo;
+
+    //@PreAuthorize("hasRole('ADMIN')")
+    @PostMapping("/save")
+    public SummaryType save(@RequestBody SummaryType record) {
+        if (record.getId() != null) {
+            SummaryType orig = summaryTypeRepo.findById(record.getId()).orElseThrow(new BusinessException("无记录"));
+            ObjUtils.merge(orig, record);
+            return summaryTypeRepo.save(orig);
+        }
+        return summaryTypeRepo.save(record);
+    }
+
+
+    //@PreAuthorize("hasRole('ADMIN')")
+    @GetMapping("/all")
+    public Page<SummaryType> all(PageQuery pageQuery) {
+        return summaryTypeRepo.findAll(toSpecification(pageQuery,SummaryType.class), toPageRequest(pageQuery));
+    }
+
+    @GetMapping("/get/{id}")
+    public SummaryType get(@PathVariable Long id) {
+        return summaryTypeRepo.findById(id).orElseThrow(new BusinessException("无记录"));
+    }
+
+    @PostMapping("/del/{id}")
+    public void del(@PathVariable Long id) {
+        summaryTypeRepo.deleteById(id);
+    }
+
+    @GetMapping("/excel")
+    @ResponseBody
+    public void excel(HttpServletResponse response, PageQuery pageQuery) throws IOException {
+        List<SummaryType> data = all(pageQuery).getContent();
+        ExcelUtils.export(response, data);
+    }
+}
+

src/main/resources/genjson/SummaryType.json

@@ -0,0 +1 @@
+{"tableName":"SummaryType","className":"SummaryType","remark":"数据表名","genTable":true,"genClass":true,"genList":true,"genForm":true,"genRouter":true,"javaPath":"/Users/panhui/work/jmrh/src/main/java/com/izouma/jmrh","viewPath":"/Users/panhui/work/jmrh/src/main/vue/src/views","routerPath":"/Users/panhui/work/jmrh/src/main/vue/src","resourcesPath":"/Users/panhui/work/jmrh/src/main/resources","dataBaseType":"Mysql","fields":[{"name":"name","modelName":"name","remark":"表名","showInList":true,"showInForm":true,"formType":"singleLineText"}],"readTable":false,"dataSourceCode":"dataSource","genJson":"","subtables":[],"update":false,"basePackage":"com.izouma.jmrh","tablePackage":"com.izouma.jmrh.domain.stat.SummaryType","genPackage":"stat"}