modify

package-lock.json

@@ -5816,6 +5816,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.1.2.tgz",
+      "integrity": "sha512-okUhO4sw22vwZp+rTPNjd/bvTdpug4K4sHNHyrV8NdAncIX9/AarlolFqtJCAYKGFYhUBNjIWu1EznFrSWTFxg==",
+      "requires": {
+        "tslib": "2.0.3",
+        "zrender": "5.1.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -18706,6 +18722,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.1.1.tgz",
+      "integrity": "sha512-oeWlmUZPQdS9f5hK4pV21tHPqA3wgQ7CkKkw7l0CCBgWlJ/FP+lRgLFtUBW6yam4JX8y9CdHJo1o587VVrbcoQ==",
+      "requires": {
+        "tslib": "2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
     }
   }
 }

package.json

@@ -17,6 +17,7 @@
     "axios": "^0.19.0",
     "babel-eslint": "^8.0.1",
     "babel-plugin-component": "^1.1.1",
+    "echarts": "^5.1.2",
     "element-theme": "^2.0.1",
     "element-ui": "^2.11.1",
     "gulp-autoprefixer": "^6.1.0",

src/components/echarts.vue

+<template>
+  <div class="echarts">
+    <div
+      ref="chartpie"
+      :style="'width:'+width+';height:'+height"
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "echarts",
+  components: {},
+  props: {
+    options: Object,
+    height: String,
+    width: String,
+    // bage: String,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    getEchart() {
+      const chart = this.$refs.chartpie;
+      if (chart) {
+        const myChart = this.$echarts.init(chart);
+
+        //const myChart = echarts.init(chart, null, { renderer: "svg" });
+        const option = this.options;
+        myChart.setOption(option);
+        window.addEventListener("resize", function () {
+          myChart.resize();
+        });
+      }
+      this.$on("hook:destroyed", () => {
+        window.removeEventListener("resize", function () {
+          myChart.resize();
+        });
+      });
+    },
+  },
+  created() {},
+  mounted() {
+    this.getEchart();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.echarts {
+  width: 100%;
+}
+</style>
\ No newline at end of file

src/i18n/zh-CN.js

@@ -3,7 +3,7 @@ const t = {}
 t.loading = '加载中...'
 
 t.brand = {}
-t.brand.lg = '检察阳光码管理系统'
+t.brand.lg = '奉化区人民检察院满意度评价系统'
 t.brand.mini = '阳光码'
 
 t.add = '新增'

src/main.js

@@ -17,7 +17,10 @@ import renProcessDetail from '@/components/ren-process-detail'
 import renDeptTree from '@/components/ren-dept-tree'
 import renRegionTree from '@/components/ren-region-tree'
 import { hasPermission, getDictLabel } from '@/utils'
+
 import cloneDeep from 'lodash/cloneDeep'
+import * as echarts from 'echarts';
+
 
 Vue.config.productionTip = false
 
@@ -39,7 +42,7 @@ Vue.use(renProcessDetail)
 Vue.prototype.$http = http
 Vue.prototype.$hasPermission = hasPermission
 Vue.prototype.$getDictLabel = getDictLabel
-
+Vue.prototype.$echarts = echarts
 // 保存整站vuex本地储存初始状态
 window.SITE_CONFIG['storeState'] = cloneDeep(store.state)
 

src/views/main-navbar.vue

@@ -3,15 +3,23 @@
     class="aui-navbar"
     :class="`aui-navbar--${$store.state.navbarLayoutType}`"
   >
-    <div class="aui-navbar__header">
+    <div
+      class="aui-navbar__header"
+      style="width:460px"
+    >
       <h1
         class="aui-navbar__brand"
         @click="$router.push({ name: 'home' })"
       >
-        <a
+        <!--  <a
           class="aui-navbar__brand-lg"
           href="javascript:;"
-        >{{ $t('brand.lg') }}</a>
+        >{{ $t('brand.lg') }}</a> -->
+        <img
+          src="../assets/img/logo.png"
+          alt=""
+        >
+
         <a
           class="aui-navbar__brand-mini"
           href="javascript:;"

src/views/modules/fhjw/fhjwcommentstatistical.vue

+<template>
+
+  <el-card
+    shadow="never"
+    class="aui-card--fill"
+  >
+    <el-form
+      :inline="true"
+      :model="dataForm"
+      @keyup.enter.native="getDataList()"
+    >
+
+      <el-form-item>
+        <el-date-picker
+          class="date-val"
+          v-model="dataForm.dateVal"
+          type="monthrange"
+          range-separator="至"
+          start-placeholder="开始月份"
+          end-placeholder="结束月份"
+        >
+
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="top">
+
+      <!-- <div
+        ref="chartpie"
+        style="height:450px;width:100%"
+      ></div> -->
+
+      <Echarts
+        :options="optionsAll"
+        height="450px"
+        width="100%"
+      />
+
+    </div>
+    <div class="bottom">
+      <div
+        class="item-pie"
+        v-for="(item,index) in list"
+        :key="item.id"
+      >
+        <!--  <Echarts
+          :options="optionsDepart[index]"
+          height="450px"
+          width="100%"
+        /> -->
+        <div
+          :id="forId(index)"
+          style="height:300px;width:100%;"
+        ></div>
+      </div>
+
+    </div>
+
+  </el-card>
+</template>
+
+<script>
+import Echarts from "../../../components/echarts.vue";
+import * as echarts from "echarts";
+export default {
+  name: "fhjwcommentstatistical",
+  components: { Echarts },
+  data() {
+    return {
+      dataForm: {
+        dateVal: "",
+      },
+      chartList: [], //
+      getId: [], //用来生成echarts
+      chartList_values: [], //取其值
+      optionsAll: {},
+      optionsDepart: {},
+      list: [
+        {
+          id: 1,
+          title: "第一检察部",
+          goodnum: 500,
+          middlenum: 20,
+          bandnum: 0,
+        },
+        {
+          id: 2,
+          title: "第二检察部",
+          goodnum: 800,
+          middlenum: 50,
+          bandnum: 1,
+        },
+        {
+          id: 3,
+          title: "第三检察部",
+          goodnum: 200,
+          middlenum: 5,
+          bandnum: 0,
+        },
+        {
+          id: 4,
+          title: "第四检察部",
+          goodnum: 100,
+          middlenum: 1,
+          bandnum: 1,
+        },
+        {
+          id: 5,
+          title: "第五检察部",
+          goodnum: 250,
+          middlenum: 2,
+          bandnum: 2,
+        },
+        {
+          id: 6,
+          title: "第六检察部",
+          goodnum: 500,
+          middlenum: 3,
+          bandnum: 1,
+        },
+        {
+          id: 7,
+          title: "第七检察部",
+          goodnum: 338,
+          middlenum: 8,
+          bandnum: 0,
+        },
+        {
+          id: 8,
+          title: "溪口检察部",
+          goodnum: 188,
+          middlenum: 2,
+          bandnum: 0,
+        },
+      ],
+    };
+  },
+  methods: {
+    forId(index) {
+      return "geo_" + index;
+    },
+    /*  show(option) {
+            console.log(option.level_incite_user_list, '每个等级的占比情况11');
+            this.chartList = option.level_incite_user_list;
+            this.mapTree();
+        }, */
+    mapTree() {
+      this.getId = [];
+      this.chartList_values = Object.values(this.list);
+      this.$nextTick(function () {
+        for (var i = 0; i < this.chartList_values.length; i++) {
+          let arr = [];
+
+          arr.push(
+            {
+              value: this.chartList_values[i].goodnum,
+              name: "好",
+            },
+            {
+              value: this.chartList_values[i].middlenum,
+              name: "中",
+            },
+            {
+              value: this.chartList_values[i].bandnum,
+              name: "差",
+            }
+          );
+
+          console.log(arr, "arr========");
+          //拿到channel_grade_name作为变量key
+          this.getId.push(echarts.init(document.getElementById("geo_" + i)));
+          this.getId[i].setOption({
+            title: {
+              text: this.chartList_values[i].title,
+              left: "center",
+            },
+            color: ["#91cc75", "#FFDC60", "#FF7070"],
+            tooltip: {
+              trigger: "item",
+              formatter: "{a} <br/>{b} : {c} ({d}%)",
+            },
+            legend: {
+              bottom: 0,
+              left: "center",
+              data: ["好", "中", "差"],
+            },
+            series: [
+              {
+                name: "占比",
+                type: "pie",
+                radius: "60%",
+                center: ["50%", "50%"],
+                selectedMode: "single",
+                data: arr,
+                emphasis: {
+                  itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: "rgba(0, 0, 0, 0.5)",
+                  },
+                },
+              },
+            ],
+          });
+        }
+      });
+    },
+    getPie() {
+      //const myChart = echarts.init(chart, null, { renderer: "svg" });
+      let legendData = [];
+      let goodData = [];
+      let middleData = [];
+      let badData = [];
+      this.list.forEach((ele) => {
+        legendData.push(ele.title);
+        goodData.push(ele.goodnum);
+        middleData.push(ele.middlenum);
+        badData.push(ele.bandnum);
+      });
+
+      this.optionsAll = {
+        color: ["#91cc75", "#FFDC60", "#FF7070"],
+        title: { text: "评价统计", left: "center" },
+        legend: {
+          bottom: 0,
+          data: ["好", "中", "差"],
+        },
+        xAxis: {
+          type: "category",
+          data: legendData,
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            name: "好",
+            data: goodData,
+            type: "bar",
+            label: {
+              show: true,
+              position: "top",
+            },
+          },
+          {
+            name: "中",
+            data: middleData,
+            type: "bar",
+            label: {
+              show: true,
+              position: "top",
+            },
+          },
+          {
+            name: "差",
+            data: badData,
+            type: "bar",
+            label: {
+              show: true,
+              position: "top",
+            },
+          },
+        ],
+      };
+    },
+  },
+  created() {
+    this.getPie();
+  },
+  mounted() {
+    this.mapTree();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.fhjwcommentstatistical {
+  width: 100%;
+  .top {
+    width: 100%;
+    display: flex;
+  }
+}
+.bottom {
+  width: 100%;
+
+  display: flex;
+  flex-wrap: wrap;
+
+  .item-pie {
+    width: calc(25% - 10px);
+    margin-right: 10px;
+    margin-top: 80px;
+    // flex: 1;
+
+    //display: flex;
+  }
+}
+</style>
\ No newline at end of file

src/views/modules/fhjw/fhjwstatistical.vue

 <template>
-  <div class="fhjwstatistical">
+  <el-card
+    shadow="never"
+    class="aui-card--fill"
+  >
+    <!-- <span class="label">筛选</span>
+    <el-date-picker
+      class="date-val"
+      v-model="dateVal"
+      type="monthrange"
+      range-separator="至"
+      start-placeholder="开始月份"
+      end-placeholder="结束月份"
+    >
+
+    </el-date-picker>
+    <el-button>查询</el-button> -->
+    <el-form
+      :inline="true"
+      :model="dataForm"
+      @keyup.enter.native="getDataList()"
+    >
+      <el-form-item>
+        <el-input
+          v-model="dataForm.department"
+          placeholder="部门名称"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-date-picker
+          class="date-val"
+          v-model="dataForm.dateVal"
+          type="monthrange"
+          range-separator="至"
+          start-placeholder="开始月份"
+          end-placeholder="结束月份"
+        >
+
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="titleline">
+      <div class="left">
+        <img
+          src="../../../assets/img/logo_tj.png"
+          alt=""
+          style="width:20px;height:20px"
+        >
+        意见统计
+      </div>
+      <div class="right">
+        <img
+          src="../../../assets/img/logo_tj.png"
+          alt=""
+          style="width:20px;height:20px"
+        >
+        代表委员意见统计
+      </div>
+    </div>
+    <div class="bottom">
+      <!--  <div
+        ref="chartpie1"
+        style="width:50%;height:250px;"
+      ></div> -->
+      <div style="flex:1;transform: translate3d(0, -10%, 0);">
+        <Echarts
+          :options="optionsComment"
+          height="300px"
+          width="100%"
+        />
+      </div>
+
+      <div style="flex:1;transform: translate3d(0, -10%, 0);">
+        <Echarts
+          :options="optionsDaibiao"
+          height="300px"
+          width="100%"
+        />
+      </div>
+      <!-- <div
+        ref="chartpie2"
+        style="width:50%;height:250px"
+      ></div> -->
+    </div>
+    <div class="bottom">
+      <!--  <div
+        ref="chartzhuzhuang"
+        style="width:100%;height:375px;"
+      ></div> -->
+      <Echarts
+        :options="optionsAll"
+        height="375px"
+        width="100%"
+      />
+    </div>
+
+  </el-card>
 
-  </div>
 </template>
 
 <script>
+import Echarts from "../../../components/echarts.vue";
 export default {
   name: "fhjwstatistical",
-  components: {},
+  components: { Echarts },
   data() {
-    return {};
+    return {
+      dataForm: {
+        dateVal: "",
+        department: "",
+      },
+      optionsComment: {},
+      optionsDaibiao: {},
+      optionsAll: {},
+    };
+  },
+  methods: {
+    getPie1() {
+      this.optionsComment = {
+        /*  title: {
+            text: "天气情况统计",
+            subtext: "虚构数据",
+            left: "center",
+          }, */
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        legend: {
+          bottom: 0,
+          left: "center",
+
+          data: [
+            "反映拖延消极办案",
+            "反映违规不当办案",
+            "反映办案不廉或作风不正",
+            "反映存在插手干预案件办理",
+            "反映其他方面问题",
+          ],
+        },
+        series: [
+          {
+            type: "pie",
+            radius: "70%",
+            center: ["50%", "50%"],
+            selectedMode: "single",
+            data: [
+              { value: 1548, name: "反映拖延消极办案" },
+              { value: 735, name: "反映违规不当办案" },
+              { value: 510, name: "反映办案不廉或作风不正" },
+              { value: 434, name: "反映存在插手干预案件办理" },
+              { value: 335, name: "反映其他方面问题" },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+    },
+    getPie2() {
+      this.optionsDaibiao = {
+        /*  title: {
+            text: "天气情况统计",
+            subtext: "虚构数据",
+            left: "center",
+          }, */
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        legend: {
+          bottom: 0,
+          left: "center",
+
+          data: [
+            "反映拖延消极办案",
+            "反映违规不当办案",
+            "反映办案不廉或作风不正",
+            "反映存在插手干预案件办理",
+            "反映其他方面问题",
+          ],
+        },
+        series: [
+          {
+            type: "pie",
+            radius: "70%",
+            center: ["50%", "50%"],
+            selectedMode: "single",
+            data: [
+              { value: 1548, name: "反映拖延消极办案" },
+              { value: 735, name: "反映违规不当办案" },
+              { value: 510, name: "反映办案不廉或作风不正" },
+              { value: 434, name: "反映存在插手干预案件办理" },
+              { value: 335, name: "反映其他方面问题" },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+    },
+    getZhuzhuang() {
+      this.optionsAll = {
+        title: {
+          text: "反馈统计",
+          left: "center",
+        },
+        xAxis: {
+          type: "category",
+          data: ["控告申诉", "意见反馈", "代表委员有话说"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            label: {
+              show: true,
+              position: "top",
+            },
+            data: [120, 200, 150],
+            type: "bar",
+          },
+        ],
+      };
+    },
+  },
+  created() {
+    this.getPie1();
+    this.getPie2();
+    this.getZhuzhuang();
   },
-  methods: {},
-  created() {},
+  mounted() {},
 };
 </script>
 
 <style lang="less" scoped>
-.fhjwstatistical {
-  width: 100%;
+.label,
+.date-val {
+  margin-right: 10px;
+}
+.titleline {
+  display: flex;
+  line-height: 50px;
+  font-size: 18px;
+  border-bottom: 1px solid #eee;
+  .left {
+    width: 50%;
+  }
+  .right {
+    width: 50%;
+  }
+}
+.bottom {
+  display: flex;
+  margin-top: 20px;
 }
 </style>
\ No newline at end of file

src/views/modules/home.vue

@@ -3,42 +3,136 @@
     shadow="never"
     class="aui-card--fill"
   >
-    <div class="title">
+    <!--  <div class="title">
       欢迎登陆检察阳光码管理系统
+    </div> -->
+    <div class="top">
+      <div
+        class="item"
+        v-for="item in list"
+        :key="item.id"
+      >
+        <div class="item-content">
+          <img
+            src="../../assets/img/member_icon_54.png"
+            alt=""
+            class="title-img"
+          >
+          <div class="right">
+            <div class="num">{{item.num}}</div>
+            <div class="title">{{item.title}}</div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+    <div class="titleline">
+      <div class="left">
+        <img
+          src="../../assets/img/logo_tj.png"
+          alt=""
+          style="width:20px;height:20px"
+        >
+        部门办案情况
+      </div>
+      <div class="right">
+        <img
+          src="../../assets/img/logo_tj.png"
+          alt=""
+          style="width:20px;height:20px"
+        >
+        部门办案情况统计
+      </div>
+    </div>
+    <div class="bottom">
+      <!--  <div
+        ref="chartpie"
+        style="width:40%;height:470px;flex:3.5"
+      ></div> -->
+      <div style="width:40%;transform: translate3d(0, -10%, 0);">
+        <Echarts
+          :options="optionHandlingSituation"
+          height="470px"
+          width="100%"
+        />
+      </div>
+
+      <div style="width:60%;transform: translate3d(0, -10%, 0);">
+        <Echarts
+          :options="optionHandlingSituationZhe"
+          height="470px"
+          width="100%"
+        />
+      </div>
+
+      <!-- <div
+        ref="chartzhexian"
+        style="width:60%;height:470px;flex:6.5"
+      ></div> -->
     </div>
 
   </el-card>
 </template>
 
 <script>
+import Echarts from "../../components/echarts.vue";
 export default {
+  components: { Echarts },
   data() {
     return {
-      sysInfo: {
-        osName: "",
-        osVersion: "",
-        osArch: "",
-        processors: 0,
-        totalPhysical: 0,
-        freePhysical: 0,
-        memoryRate: 0,
-        userLanguage: "",
-        jvmName: "",
-        javaVersion: "",
-        javaHome: "",
-        userDir: "",
-        javaTotalMemory: 0,
-        javaFreeMemory: 0,
-        javaMaxMemory: 0,
-        userName: "",
-        systemCpuLoad: 0,
-        userTimezone: "",
-      },
+      optionHandlingSituation: {},
+      optionHandlingSituationZhe: {},
+      list: [
+        {
+          id: 1,
+          title: "第一检察部",
+          num: 834,
+        },
+        {
+          id: 2,
+          title: "第二检察部",
+          num: 307,
+        },
+        {
+          id: 3,
+          title: "第三检察部",
+          num: 32,
+        },
+        {
+          id: 4,
+          title: "第四检察部",
+          num: 145,
+        },
+        {
+          id: 5,
+          title: "第五检察部",
+          num: 153,
+        },
+        {
+          id: 6,
+          title: "第六检察部",
+          num: 81,
+        },
+        {
+          id: 7,
+          title: "第七检察部",
+          num: 271,
+        },
+        {
+          id: 8,
+          title: "溪口检察部",
+          num: 8,
+        },
+      ],
     };
   },
+
   created() {
     //  this.getSysInfo();
+    this.getPie();
+    this.getZhe();
   },
+  mounted() {},
   methods: {
     getSysInfo() {
       this.$http
@@ -51,16 +145,219 @@ export default {
         })
         .catch(() => {});
     },
+    getPie() {
+      this.optionHandlingSituation = {
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        legend: {
+          bottom: 0,
+          left: "center",
+
+          data: [
+            "第一检察部",
+            "第二检察部",
+            "第三检察部",
+            "第四检察部",
+            "第五检察部",
+            "第六检察部",
+            "第七检察部",
+            "溪口检察部",
+          ],
+        },
+        series: [
+          {
+            name: "占比",
+            type: "pie",
+            radius: "70%",
+            center: ["50%", "50%"],
+            selectedMode: "single",
+            data: [
+              { value: 1548, name: "第一检察部" },
+              { value: 735, name: "第二检察部" },
+              { value: 510, name: "第三检察部" },
+              { value: 434, name: "第四检察部" },
+              { value: 335, name: "第五检察部" },
+              { value: 335, name: "第六检察部" },
+              { value: 335, name: "第七检察部" },
+              { value: 335, name: "溪口检察部" },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+    },
+    getZhe() {
+      this.optionHandlingSituationZhe = {
+        /* title: {
+            text: "折线图堆叠",
+          }, */
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          bottom: 0,
+          left: "center",
+          data: [
+            "第一检察部",
+            "第二检察部",
+            "第三检察部",
+            "第四检察部",
+            "第五检察部",
+            "第六检察部",
+            "第七检察部",
+            "溪口检察部",
+          ],
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        /*  toolbox: {
+            feature: {
+              saveAsImage: {},
+            },
+          }, */
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "2020-12",
+            "2021-01",
+            "2021-02",
+            "2021-03",
+            "2021-04",
+            "2021-05",
+          ],
+        },
+        yAxis: {
+          type: "value",
+          axisLine: {
+            show: true,
+          },
+        },
+        series: [
+          {
+            name: "第一检察部",
+            type: "line",
+            stack: "总量",
+            data: [120, 132, 101, 134, 90, 230],
+          },
+          {
+            name: "第二检察部",
+            type: "line",
+            stack: "总量",
+            data: [220, 182, 191, 234, 290, 330],
+          },
+          {
+            name: "第三检察部",
+            type: "line",
+            stack: "总量",
+            data: [150, 232, 201, 154, 190, 330],
+          },
+          {
+            name: "第四检察部",
+            type: "line",
+            stack: "总量",
+            data: [320, 332, 301, 334, 390, 330],
+          },
+          {
+            name: "第五检察部",
+            type: "line",
+            stack: "总量",
+            data: [820, 932, 901, 934, 1290, 1330],
+          },
+          {
+            name: "第六检察部",
+            type: "line",
+            stack: "总量",
+            data: [320, 332, 301, 334, 390, 330],
+          },
+          {
+            name: "第七检察部",
+            type: "line",
+            stack: "总量",
+            data: [100, 200, 300, 500, 200, 100],
+          },
+          {
+            name: "溪口检察部",
+            type: "line",
+            stack: "总量",
+            data: [500, 100, 500, 200, 50, 10],
+          },
+        ],
+      };
+    },
   },
 };
 </script>
-<style scoped>
-.title {
+<style lang="less" scoped>
+.top {
+  display: flex;
+  justify-content: space-between;
+  .item {
+    background: #4f96e1;
+    color: #fff;
+    display: flex;
+    width: 150px;
+    height: 90px;
+    text-align: center;
+    vertical-align: middle;
+    padding: 10px 10px 0;
+    border-radius: 8px;
+    position: relative;
+    .num {
+      font-size: 30px;
+    }
+    .item-content {
+      position: absolute;
+      width: 80%;
+      margin: 0 auto;
+      top: 50%;
+
+      transform: translate(0, -50%);
+      display: flex;
+    }
+    .title-img {
+      width: 40px;
+      height: 40px;
+      //vertical-align: middle;
+    }
+    .right {
+      margin-left: 10px;
+      text-align: right;
+    }
+    .title,
+    .num {
+      text-align: right;
+    }
+  }
+}
+.titleline {
+  display: flex;
+  line-height: 50px;
+  font-size: 18px;
+  margin-top: 35px;
+  border-bottom: 1px solid #eee;
+  .left {
+    width: 40%;
+  }
+  .right {
+    width: 60%;
+  }
+}
+.bottom {
   width: 100%;
-  font-weight: 600;
-  text-align: center;
-  font-size: 28px;
-  position: absolute;
-  top: 50%;
+  display: flex;
+  margin-top: 20px;
 }
 </style>

src/views/pages/login.vue

@@ -3,7 +3,11 @@
     <div class="aui-content__wrapper">
       <main class="aui-content">
         <div class="login-header">
-          <h2 class="login-brand">{{ $t('brand.lg') }}</h2>
+          <!-- <h2 class="login-brand">{{ $t('brand.lg') }}</h2> -->
+          <img
+            src="../../assets/img/logo.png"
+            alt=""
+          >
         </div>
         <div class="login-body">
           <h3 class="login-title">{{ $t('login.title') }}</h3>