积分管理

src/router/modules/index.js

@@ -696,5 +696,13 @@ export default[
     },
     component: () => import("@/views/dwcx/index.vue")
   },
-
+  {
+    path: "/ypbg",
+    name: "ypbg",
+    meta: {
+      title: '研判报告',
+      auth: 5
+    },
+    component: () => import("@/views/ypbg/index.vue")
+  },
 ]

src/views/ypbg/index.vue

+<!--  -->
+<template>
+  <div id="thypbg">
+    <h1></h1>
+    <div class="title">
+      <img src="../../assets/img/jh.png" alt="" />
+      <div class="name">研判报告</div>
+    </div>
+    <div class="content">
+      <div class="yp_body">
+        <h1>2021年1-12月份全区刑侦工作实绩积分通报</h1>
+        <p class="fontSize">各盟市、大林公安局刑侦（警）支队：</p>
+        <p class="fontContents">
+          按照《内蒙古自治区公安机关刑事侦查办案积分评价办法（试行）》，现将全区2021年1-12月份刑侦工作实绩积分情况通报如下：
+        </p>
+        <p class="fontContent">一、全区积分总体情况</p>
+        <p class="fontContents">
+          {{ dataobj.jfqk }}
+        </p>
+
+        <p class="fontContents">
+          {{ dataobj.jfrs }}
+        </p>
+        <p class="fontContent">二、各盟市积分排名前十民警情况</p>
+        <div>
+          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+            <el-tab-pane
+              :label="item.name"
+              :name="item.code"
+              v-for="item in dwList"
+              :key="item.code"
+            >
+              <tables :tableData="tableData1" :formThead="formThead1"></tables>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <p class="fontContent">
+          三、各旗县（市、区）公安局平均积分排名前十情况
+        </p>
+        <p class="fontContents">
+          {{ qxStr }}
+          <tables :tableData="tableData2" :formThead="formThead2"></tables>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import tables from "./table.vue";
+import Http from "@/utils/axiosHttp.js";
+import qs from "qs";
+import url from "@/api/base";
+export default {
+  data() {
+    return {
+      activeName: "150100000000",
+      tableData1: [],
+      formThead1: [
+        {
+          prop: "xm",
+          label: "姓名",
+        },
+        {
+          prop: "msgajcodeStr",
+          label: "所属盟市级公安局",
+        },
+        {
+          prop: "qxgsjcodeStr",
+          label: "所属旗县级公安局",
+        },
+        {
+          prop: "dwcodeStr",
+          label: "单位",
+        },
+        {
+          prop: "jh",
+          label: "警号",
+        },
+        {
+          prop: "jf",
+          label: "积分",
+        },
+      ],
+      dataobj: {},
+      dwList: [
+        {
+          name: "呼和浩特市",
+          code: "150100000000",
+        },
+        {
+          name: "包头市",
+          code: "150200000000",
+        },
+        {
+          name: "乌海市",
+          code: "150300000000",
+        },
+        {
+          name: "赤峰市",
+          code: "150400000000",
+        },
+        {
+          name: "通辽市",
+          code: "150500000000",
+        },
+        {
+          name: "鄂尔多斯市",
+          code: "150600000000",
+        },
+        {
+          name: "呼伦贝尔市",
+          code: "150700000000",
+        },
+        {
+          name: "巴彦淖尔市",
+          code: "150800000000",
+        },
+        {
+          name: "乌兰察布市",
+          code: "150900000000",
+        },
+        {
+          name: "兴安盟",
+          code: "152200000000",
+        },
+        {
+          name: "锡林郭勒盟",
+          code: "152500000000",
+        },
+        {
+          name: "阿拉善盟",
+          code: "152900000000",
+        },
+      ],
+      qxStr: "",
+      tableData2: [],
+      formThead2: [
+        {
+          prop: "qxcodeStr",
+          label: "单位",
+        },
+        {
+          prop: "mscodeStr",
+          label: "所属盟市级公安局",
+        },
+        {
+          prop: "zfs",
+          label: "分数",
+        },
+        {
+          prop: "rs",
+          label: "总人数",
+        },
+      ],
+      loading: null,
+    };
+  },
+
+  components: { tables },
+
+  computed: {},
+
+  created() {
+    this.loading = this.$loading({
+      lock: true,
+      text: "正在查询...",
+      spinner: "el-icon-loading",
+      background: "rgba(255, 255, 255, 0.7)",
+    });
+    this.getData();
+    this.getMspm("150100000000");
+    this.getQxpm();
+  },
+
+  mounted() {},
+
+  methods: {
+    handleClick(item) {
+      this.getMspm(item.name);
+    },
+    getData() {
+      let self = this;
+      let url = "/jfmb/getJfmbXq";
+      let params = {
+        xxzjbh: this.$route.query.xxzjbh,
+      };
+      self
+        .doQueryRequest(params, url)
+        .then((res) => {
+          if (res.code == 200) {
+            this.dataobj = res.data.jfmb;
+          }
+        })
+        .catch((err) => {});
+    },
+    getMspm(code) {
+      let self = this;
+      let url = "/jfmb/getJfmbMspm";
+      let params = {
+        xxzjbh: this.$route.query.xxzjbh,
+        unitcode: code,
+      };
+      self
+        .doQueryRequest(params, url)
+        .then((res) => {
+          if (res.code == 200) {
+            self.tableData1 = res.data.rows;
+          }
+        })
+        .catch((err) => {});
+    },
+    getQxpm() {
+      let self = this;
+      let url = "/jfmb/getJfmbQxpm";
+      let params = {
+        xxzjbh: this.$route.query.xxzjbh,
+      };
+      self
+        .doQueryRequest(params, url)
+        .then((res) => {
+          if (res.code == 200) {
+            this.qxStr = res.data.qxpmms;
+            this.tableData2 = res.data.rows;
+            this.loading.close();
+          }
+        })
+        .catch((err) => {});
+    },
+    doQueryRequest(form, relurl) {
+      /*post方法*/
+      return Http({
+        url: url.rzURL + relurl,
+        data: qs.stringify(form),
+        method: "post",
+        headers: {
+          "blade-auth": sessionStorage.getItem("token"),
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+#thypbg {
+  /deep/.el-tabs__header {
+    margin: unset;
+  }
+  .title {
+    height: 52px;
+    background: #1f212c;
+    padding-left: 32px;
+    display: flex;
+    align-items: center;
+    img {
+      width: 36px;
+      height: 36px;
+    }
+    .name {
+      font-size: 18px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      line-height: 24px;
+      color: #ffffff;
+    }
+  }
+  .fontSize {
+    font-size: 24px;
+    font-weight: 540;
+  }
+  .fontContent {
+    font-size: 24px;
+    font-weight: 540;
+    text-indent: 40px;
+  }
+  .fontContents {
+    font-size: 24px;
+    font-weight: 540;
+    text-indent: 40px;
+  }
+  .content {
+    width: 1360px;
+    margin: 0 auto;
+    margin-top: 24px;
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    margin-bottom: 68px;
+    .btn {
+      width: 108px;
+      height: 36px;
+      background: #3670ff;
+      box-shadow: 0px 4px 6px rgba(54, 112, 255, 0.2);
+      opacity: 1;
+      border-radius: 4px;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #ffffff;
+      text-align: center;
+      line-height: 36px;
+      margin-left: 40px;
+    }
+    .yp_body {
+      background: #ffffff;
+      border: 1px solid #e2e2e2;
+      border-radius: 8px;
+      position: relative;
+      padding: 10px 32px;
+      padding-bottom: 20px;
+      h1 {
+        text-align: center;
+        font-size: 42px;
+        font-weight: 500;
+      }
+      .yp_title {
+        height: 64px;
+        display: flex;
+        align-items: center;
+        .yp_img {
+          width: 32px;
+          height: 32px;
+        }
+        .yp_name {
+          font-size: 20px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          line-height: 26px;
+          color: #1f212c;
+          margin-left: 12px;
+        }
+        .yp_dy {
+          width: 76px;
+          height: 28px;
+          position: absolute;
+          right: 32px;
+        }
+      }
+      .yp_contnet {
+        width: 1171px;
+        .jqzs {
+          width: 720px;
+          padding: 23px 36px;
+          span {
+            height: 21px;
+            font-size: 17px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            line-height: 21px;
+            color: #333333;
+          }
+          p {
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            line-height: 26px;
+            color: #666666;
+          }
+        }
+        .subtitle {
+          width: 1056px;
+          height: 36px;
+          background: linear-gradient(90deg, #4c5459 0%, #ffffff 100%);
+          font-size: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          line-height: 36px;
+          color: #ffffff;
+          padding-left: 16px;
+        }
+        .xqgdfaqk {
+          width: 100%;
+          height: 298px;
+        }
+      }
+    }
+  }
+  .bj {
+    padding: 24px 36px 32px 36px;
+  }
+  .activeColor {
+    color: #3670ff;
+    font-size: 14px;
+  }
+
+  .activeColor1 {
+    color: #666;
+    font-size: 14px;
+    padding-left: 16px;
+  }
+
+  .activeColor2 {
+    color: #333;
+    font-size: 14px;
+  }
+
+  .activeColor3 {
+    color: #3670ff;
+    padding-left: 16px;
+    font-size: 14px;
+  }
+  .upclass {
+    color: #ef4c4c;
+    padding-left: 5px;
+  }
+  .downclass {
+    color: #35ca1e;
+    padding-left: 5px;
+  }
+}
+</style>
\ No newline at end of file

src/views/ypbg/table.vue

+<!--  -->
+<template>
+  <div>
+    <el-table :data="tableData" style="width: 100%" border>
+      <el-table-column
+        align="center"
+        v-for="columnTitle in formThead"
+        :prop="columnTitle.prop"
+        :key="columnTitle.prop"
+        :label="columnTitle.label"
+      >
+        <template slot-scope="scope">
+          <div v-html="scope.row[columnTitle.prop]"></div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tableData: {
+      type: Array,
+      default: () => [],
+    },
+    formThead: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {};
+  },
+
+  components: {},
+
+  computed: {},
+
+  created() {},
+
+  mounted() {},
+
+  methods: {},
+};
+</script>
+<style lang='scss' scoped>
+</style>
\ No newline at end of file