重庆可视化搭建

src/layout/CqMain.vue

+<!--
+ * @Author: your name
+ * @Date: 2021-07-20 14:08:33
+ * @LastEditTime: 2021-09-29 10:32:08
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \founder_vue\src\layout\main.vue
+-->
+<template>
+  <div id="home">
+    <el-container>
+      <Header title="智能侦查分系统" />
+      <el-container class="flex">
+        <MenuLayout
+          :leftMenu="leftMenu"
+          activeRouterIndex="cqRyksh"
+          routerType="withTheTitle"
+        />
+        <el-main>
+          <router-view></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+<script>
+import Header from "@/layout/Header.vue";
+import MenuLayout from "@/layout/MenuAsideLayout.vue";
+export default {
+  components: {
+    Header,
+    MenuLayout,
+  },
+  data() {
+    return {
+      leftMenu: [
+        {
+          id: "cqRagxsfmx",
+          label: "人案关联算法模型",
+          index: "cqRagxsfmx",
+          className: "el-icon-folder-remove",
+          children: [
+            {
+              id: "cqRyksh",
+              label: "人员可视化分析",
+              index: "cqRyksh",
+              disabled: false,
+            },
+          ],
+        },
+        {
+          id: "cqKshsfmx",
+          label: "可视化算法模型",
+          index: "cqKshsfmx",
+          className: "el-icon-user",
+          children: [
+            {
+              id: "cqHdkshfx",
+              label: "话单可视化分析",
+              index: "cqHdkshfx",
+              disabled: false,
+            },
+            {
+              id: "cqQqkshfx",
+              label: "QQ可视化分析",
+              index: "cqQqkshfx",
+              disabled: false,
+            },
+            {
+              id: "cqWxkshfx",
+              label: "微信可视化分析",
+              index: "cqWxkshfx",
+              disabled: false,
+            },
+            {
+              id: "cqYjwlskhfx",
+              label: "邮件往来可视化分析",
+              index: "cqYjwlskhfx",
+              disabled: false,
+            },
+            {
+              id: "cqTxtzkshfx",
+              label: "同行同住可视化分析",
+              index: "cqTxtzkshfx",
+              disabled: false,
+            },
+            {
+              id: "cqThkshfx",
+              label: "团伙可视化分析",
+              index: "cqThkshfx",
+              disabled: false,
+            },
+          ],
+        },
+        {
+          id: "cqYjycsf",
+          label: "预警预测算法模型",
+          index: "cqYjycsf",
+          className: "el-icon-warning",
+          children: [
+            {
+              id: "cqPyqszsfmx",
+              label: "朋友圈涉赃算法模型",
+              index: "cqPyqszsfmx",
+              disabled: false,
+            },
+          ],
+        },
+        {
+          id: "cqGxwlsfmx",
+          label: "关系网络算法模型",
+          index: "cqGxwlsfmx",
+          className: "el-icon-eleme",
+          children: [
+            {
+              id: "cqThxgxfx",
+              label: "团伙相关性分析",
+              index: "cqThxgxfx",
+              disabled: false,
+            },
+          ],
+        },
+      ],
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+#home /deep/ {
+  width: 100%;
+  height: 100vh;
+  background: url("~@/assets/img/graphEcharts/back.png") 0 0 / cover no-repeat;
+  .flex {
+    display: flex;
+  }
+  .el-main {
+    border: none;
+    position: relative;
+  }
+}
+</style>
\ No newline at end of file

src/router/index.js

 /*
  * @Author: your name
  * @Date: 2021-06-22 15:23:03
- * @LastEditTime: 2021-08-19 10:48:02
+ * @LastEditTime: 2021-09-29 10:04:31
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \founder_vue\src\router\index.js
@@ -11,6 +11,7 @@ import VueRouter from "vue-router";
 import rightContentRoutes from './modules/rightContent.js';
 import shRightContentRoutes from './modules/shceContent';
 import hnRightContentRoutes from './modules/hnContent';
+import cqRightContentRoutes from './modules/cqContent';
 import indexRoutes from "./modules/index";
 // import store from "../store";
 // import { getToken } from "../utils/auth";
@@ -39,6 +40,7 @@ const mainRouters = [
   rightContentRoutes,
   shRightContentRoutes,
   hnRightContentRoutes,
+  cqRightContentRoutes,
   {
     path: "*",
     name: "error",

src/router/modules/cqContent.js

+/*
+ * @Author: your name
+ * @Date: 2021-07-20 14:42:16
+ * @LastEditTime: 2021-09-29 10:29:12
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \founder_vue\src\router\modules\rightContent.js
+ */
+import Main from '@/layout/CqMain.vue'
+const createArr = [
+  {
+    path: "/cqQqkshfx",
+    name: "cqQqkshfx",
+    meta: {
+      title: 'QQ可视化分析'
+    },
+    component: () => import("@/views/cqksh/module/cqQqkshfx.vue")
+  },
+  {
+    path: "/cqWxkshfx",
+    name: "cqWxkshfx",
+    meta: {
+      title: '微信可视化分析'
+    },
+    component: () => import("@/views/cqksh/module/cqWxkshfx.vue")
+  },
+  {
+    path: "/cqYjwlskhfx",
+    name: "cqYjwlskhfx",
+    meta: {
+      title: '邮件往来可视化分析'
+    },
+    component: () => import("@/views/cqksh/module/cqYjwlskhfx.vue")
+  },
+  {
+    path: "/cqTxtzkshfx",
+    name: "cqTxtzkshfx",
+    meta: {
+      title: '同行同住可视化分析'
+    },
+    component: () => import("@/views/cqksh/module/cqTxtzkshfx.vue")
+  },
+  {
+    path: "/cqPyqszsfmx",
+    name: "cqPyqszsfmx",
+    meta: {
+      title: '朋友圈涉赃算法模型'
+    },
+    component: () => import("@/views/cqksh/module/cqPyqszsfmx.vue")
+  },
+]
+const carryArr = [
+  {
+    path: "/cqRyksh",
+    name: "cqRyksh",
+    meta: {
+      title: '人员可视化分析'
+    },
+    component: () => import("@/views/yppt/ragxfx.vue")
+  },
+  {
+    path: "/cqHdkshfx",
+    name: "cqHdkshfx",
+    meta: {
+      title: '话单可视化分析'
+    },
+    component: () => import("@/views/yppt/hdfx.vue")
+  },
+  {
+    path: "/cqThkshfx",
+    name: "cqThkshfx",
+    meta: {
+      title: '团伙可视化分析'
+    },
+    component: () => import("@/views/shceksh/shthfx.vue")
+  },
+  {
+    path: "/cqThxgxfx",
+    name: "cqThxgxfx",
+    meta: {
+      title: '团伙相关性分析'
+    },
+    component: () => import("@/views/yppt/qzkx.vue")
+  },
+]
+const router = [
+  ...createArr,
+  ...carryArr
+]
+
+export default {
+  path: "/cqksh",
+  name: "cqksh",
+  meta: {
+    title: "重庆可视化",
+  },
+  children: [...router],
+  component: Main
+}
\ No newline at end of file

src/router/modules/index.js

 /*
  * @Author: your name
  * @Date: 2021-07-20 19:28:01
- * @LastEditTime: 2021-09-28 15:45:24
+ * @LastEditTime: 2021-09-29 10:21:48
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \founder_vue\src\router\modules\index.js
  */
+const hnScreen = [
+  {
+    path: "/screenRagx",
+    name: "screenRagx",
+    meta: {
+      title: "人案关系",
+      auth: 5
+    },
+    component: () => import("@/views/cqksh/fullScreen/ragx.vue")
+  },
+  {
+    path: "/screenZhfx",
+    name: "screenZhfx",
+    meta: {
+      title: "综合分析",
+      auth: 5
+    },
+    component: () => import("@/views/cqksh/fullScreen/zhfx.vue")
+  },
+  {
+    path: "/screenWlfmqzdy",
+    name: "screenWlfmqzdy",
+    meta: {
+      title: "网络贩卖枪支分析",
+      auth: 5
+    },
+    component: () => import("@/views/cqksh/fullScreen/wlfmqzdy.vue")
+  },
+  {
+    path: "/screenWlysqzdy",
+    name: "screenWlysqzdy",
+    meta: {
+      title: "网络运送枪支分析",
+      auth: 5
+    },
+    component: () => import("@/views/cqksh/fullScreen/wlysqzdy.vue")
+  },
+  {
+    path: "/screenKdxxfx",
+    name: "screenKdxxfx",
+    meta: {
+      title: "快递信息分析",
+      auth: 5
+    },
+    component: () => import("@/views/cqksh/fullScreen/kdxxfx.vue")
+  },
+  {
+    path: "/screenKydhfx",
+    name: "screenKydhfx",
+    meta: {
+      title: "客运带货分析",
+      auth: 5
+    },
+    component: () => import("@/views/cqksh/fullScreen/kydhfx.vue")
+  },
+];
 export default [
+  ...hnScreen,
   {
     path: "/",
     redirect: "/argxfx"
@@ -84,60 +141,6 @@ export default [
     component: () => import("@/views/aroundnaotu/index.vue")
   },
   {
-    path: "/screenRagx",
-    name: "screenRagx",
-    meta: {
-      title: "人案关系",
-      auth: 5
-    },
-    component: () => import("@/views/cqksh/fullScreen/ragx.vue")
-  },
-  {
-    path: "/screenZhfx",
-    name: "screenZhfx",
-    meta: {
-      title: "综合分析",
-      auth: 5
-    },
-    component: () => import("@/views/cqksh/fullScreen/zhfx.vue")
-  },
-  {
-    path: "/screenWlfmqzdy",
-    name: "screenWlfmqzdy",
-    meta: {
-      title: "网络贩卖枪支分析",
-      auth: 5
-    },
-    component: () => import("@/views/cqksh/fullScreen/wlfmqzdy.vue")
-  },
-  {
-    path: "/screenWlysqzdy",
-    name: "screenWlysqzdy",
-    meta: {
-      title: "网络运送枪支分析",
-      auth: 5
-    },
-    component: () => import("@/views/cqksh/fullScreen/wlysqzdy.vue")
-  },
-  {
-    path: "/screenKdxxfx",
-    name: "screenKdxxfx",
-    meta: {
-      title: "快递信息分析",
-      auth: 5
-    },
-    component: () => import("@/views/cqksh/fullScreen/kdxxfx.vue")
-  },
-  {
-    path: "/screenKydhfx",
-    name: "screenKydhfx",
-    meta: {
-      title: "客运带货分析",
-      auth: 5
-    },
-    component: () => import("@/views/cqksh/fullScreen/kydhfx.vue")
-  },
-  {
     path: "*",
     name: "error",
     meta: {

src/router/modules/rightContent.js

 /*
  * @Author: your name
  * @Date: 2021-07-20 14:42:16
- * @LastEditTime: 2021-08-19 11:48:05
+ * @LastEditTime: 2021-09-29 10:27:25
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \founder_vue\src\router\modules\rightContent.js
  */
 import Main from '@/layout/Main.vue'
-const router = [
+const createArr = [
   {
     path: "/argxfx",
     name: "argxfx",
@@ -137,14 +137,6 @@ const router = [
     component: () => import("@/views/yppt/wlfmqzdy.vue")
   },
   {
-    path: "/thfx",
-    name: "thfx",
-    meta: {
-      title: '团伙分析'
-    },
-    component: () => import("@/views/yppt/thfx.vue")
-  },
-  {
     path: "/kydhfx",
     name: "kydhfx",
     meta: {
@@ -152,6 +144,20 @@ const router = [
     },
     component: () => import("@/views/yppt/kydhfx.vue")
   },
+];
+const carryArr = [
+  {
+    path: "/thfx",
+    name: "thfx",
+    meta: {
+      title: '团伙分析'
+    },
+    component: () => import("@/views/shceksh/shthfx.vue")
+  },
+]
+const router = [
+  ...createArr,
+  ...carryArr
 ]
 
 export default {

src/router/modules/shceContent.js

 /*
  * @Author: your name
  * @Date: 2021-07-20 14:42:16
- * @LastEditTime: 2021-08-13 16:41:57
+ * @LastEditTime: 2021-09-29 10:24:35
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \founder_vue\src\router\modules\rightContent.js
  */
 import Main from '@/layout/ShceMain.vue'
-const router = [
+const createArr = [
   {
     path: "/shargxfx",
     name: "shargxfx",
@@ -39,8 +39,9 @@ const router = [
       title: '人员线索比对'
     },
     component: () => import("@/views/shceksh/ryxsbd.vue")
-    },
-
+  }];
+const router = [
+  ...createArr
 ]
 
 export default {

src/views/cqksh/module/cqPyqszsfmx.vue

+<!--
+ * @Author: your name
+ * @Date: 2021-09-29 10:17:15
+ * @LastEditTime: 2021-09-29 10:17:16
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \founder_vue\src\views\cqksh\module\cqPyqszsfmx.vue
+-->

src/views/cqksh/module/cqQqkshfx.vue

+<!--
+ * @Author: your name
+ * @Date: 2021-09-29 10:06:27
+ * @LastEditTime: 2021-09-29 10:06:27
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \founder_vue\src\views\cqksh\module\cqRyksh.vue
+-->

src/views/cqksh/module/cqTxtzkshfx.vue

+<!--
+ * @Author: your name
+ * @Date: 2021-09-29 10:17:07
+ * @LastEditTime: 2021-09-29 10:17:08
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \founder_vue\src\views\cqksh\module\cqTxtzkshfx.vue
+-->

src/views/cqksh/module/cqWxkshfx.vue

+<!--
+ * @Author: your name
+ * @Date: 2021-09-29 10:16:51
+ * @LastEditTime: 2021-09-29 10:16:51
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \founder_vue\src\views\cqksh\module\cqWxkshfx.vue
+-->

src/views/cqksh/module/cqYjwlskhfx.vue

+<!--
+ * @Author: your name
+ * @Date: 2021-09-29 10:16:59
+ * @LastEditTime: 2021-09-29 10:16:59
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \founder_vue\src\views\cqksh\module\cqYjwlskhfx.vue
+-->

src/views/yppt/thfx.vue

-<template>
-  <div class="Content">
-    <right-content
-      :cxFormData="cxFormData"
-      :cxQueryField="cxQueryField"
-      :cxDefaultFormThead="cxDefaultFormThead"
-      :cxUrl="cxUrl"
-      :detailUrl="detailUrl"
-      :tableProps="tableProps"
-      flTtitle="团伙信息"
-    ></right-content>
-  </div>
-</template>
-
-<script>
-import rightContent from "@c/ptCxForm_components.vue";
-export default {
-  name: "queryAj",
-  components: {
-    rightContent,
-  },
-  data() {
-    return {
-      tableProps: {
-        moreSelect: false,
-        publicBtn: false,
-        detailBtn: true,
-      },
-      detailUrl: "/shceapi/ajQuery/getAccompliceById",
-      detailParams: {
-        bddlxh: "xxzjbh",
-      },
-      cxFormData: {
-        page: 1,
-        rows: 10,
-        ajmc: "",
-        zjhm: "",
-        ryxm: "",
-        ladwdm: "",
-        ajlbdm: "",
-        hjd: "",
-        startDate: "2020-08-04",
-        endDate: "2021-08-09",
-        ajlx: "00",
-      },
-      cxQueryField: [
-        {
-          name: "案件名称",
-          type: "text",
-          id: "ajmc",
-          value: "",
-          placeholder: "请输入",
-          col: "3",
-        },
-        {
-          name: "身份证号",
-          type: "text",
-          id: "zjhm",
-          value: "",
-          placeholder: "请输入",
-          col: "3",
-        },
-        {
-          name: "人员姓名",
-          type: "text",
-          id: "ryxm",
-          value: "",
-          placeholder: "请输入",
-          col: "3",
-        },
-        {
-          name: "立案单位",
-          id: "ladwdm",
-          type: "codeTreeDialog", //字典弹框
-          props: [], //字典弹框需要的字段
-          codeOptions: [],
-          codeTree: "CODE_UNIT",
-          value: "",
-          col: "3",
-        },
-        {
-          name: "案件类别",
-          id: "ajlbdm",
-          type: "codeTreeDialog", //字典弹框
-          props: [], //字典弹框需要的字段
-          codeOptions: [],
-          codeTree: "CODE_AJLB",
-          value: "",
-          col: "3",
-        },
-        {
-          name: "户籍地",
-          id: "hjd",
-          type: "codeTreeDialog", //字典弹框
-          props: [], //字典弹框需要的字段
-          codeOptions: [],
-          codeTree: "CODE_XZQH",
-          value: "",
-          col: "3",
-        },
-        {
-          name: "立案日期",
-          type: "zdyDate",
-          id: "startDate",
-          id2: "endDate",
-          value: "",
-          placeholder: "请输入",
-          col: "3",
-        },
-        {
-          name: "类型",
-          id: "ajlx",
-          type: "radio",
-          rules: [{ required: true, message: "请选择类型", trigger: "blur" }],
-          radioData: [
-            {
-              label: "三人三案",
-              val: "00",
-            },
-            {
-              label: "三人两案",
-              val: "01",
-            },
-            {
-              label: "两人两案",
-              val: "11",
-            },
-            {
-              label: "两人三案",
-              val: "10",
-            },
-          ],
-          value: "",
-          placeholder: "请输入",
-          col: "15",
-        },
-      ],
-      cxDefaultFormThead: [
-        {
-          label: "案件数量",
-          prop: "ajCount",
-        },
-        {
-          label: "九类案件数量",
-          prop: "jlajCount",
-        },
-        {
-          label: "嫌疑人数量",
-          prop: "xyrCount",
-        },
-        {
-          label: "重点关注人员数",
-          prop: "zdgzyrCount",
-        },
-      ],
-      cxUrl: "/shceapi/ajQuery/getThByParam",
-    };
-  },
-  methods: {},
-  created() {},
-};
-</script>
-<style>
-.el-dialog__body {
-  padding: 10px 15px !important;
-}
-
-.rightContent .el-input__inner,
-#formCommonPage .el-input__inner {
-  height: 32px;
-  line-height: 32px;
-  font-family: inherit;
-  background: #f3f3f3;
-}
-.el-table__header-wrapper th,
-.el-table__header-wrapper tr {
-  background: #f4f6f7;
-}
-.rightContent .el-input__icon,
-#formCommonPage .el-input__icon,
-.el-input__suffix-inner {
-  line-height: 36px;
-}
-.rightContent .el-range-separator {
-  position: relative;
-  top: -4px;
-}
-.rightContent .el-textarea__inner,
-#formCommonPage .el-textarea__inner {
-  width: 100%;
-  font-family: inherit;
-}
-.rightContent .el-range-input,
-#formCommonPage .el-range-input {
-  vertical-align: top;
-}
-.rightContent .el-date-editor .el-range__close-icon {
-  margin-top: -4px;
-}
-.success-row {
-  background-color: #fbf9f4 !important;
-}
-</style>
-<style scoped lang="scss">
-@import "../../assets/styles/rightContent.scss";
-/deep/ .el-icon-date {
-  line-height: 28px;
-}
-</style>