更新研判首页和echarts组件

src/router/index.js

@@ -210,6 +210,15 @@ export const publicRoutes = [
         name: "ResearchJudgment",
         meta: { title: "线索研判盯办系统", icon: "article" },
         children: [
+          {
+            path: "/ResearchHome",
+            name: "ResearchHome",
+            component: () => import("@/views/backOfficeSystem/ResearchJudgment/ResearchHome/index"),
+            meta: {
+              title: "研判首页",
+              icon: "article"
+            }
+          },
           {
             path: "/DatAcquisition",
             name: "DatAcquisition",

src/views/backOfficeSystem/MeetingRoom/components/detailForm.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>22</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/backOfficeSystem/MeetingRoom/index.vue

@@ -1,81 +1,74 @@
 <template>
-  <div>
+  <div class="titleBox">
-    <div class="titleBox">
+    <PageTitle title="网上会议室" />
-      <PageTitle title="网上会议室" />
-    </div>
-    <!-- 搜索 -->
-    <div ref="searchBox">
-      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
-    </div>
-    <!-- 表格 -->
-    <div class="tabBox">
-      <div class="flexcb">
-        <div class="btns">
-          <el-button type="primary">新增</el-button>
-          <el-button type="danger">删除</el-button>
-        </div>
-        <Search :searchArr="searchArrMeet" @submit="onSearch" :key="pageData.keyCount + 1" class="search" />
-      </div>
-
-      <div class="list noScollLine">
-        <div class="list-item" v-for="(item, index) in pageData.tableData" :key="`tableData${index}`" @onmouseover="">
-          <div class="top">
-            <div class="title ellipsis">{{ item.title }}</div>
-            <div class="info h36 ellipsis2">会商内容：{{ item.hynr }}</div>
-            <div class="info h36 ellipsis2">关联线索：{{ item.lxxs }}</div>
-            <div class="info h36 ellipsis2">涉及人员：{{ item.sjry }}</div>
-          </div>
-
-          <div class="mid">
-            <div class="left">
-              <div class="title ellipsis">参会人员：{{ item.chry }}</div>
-              <div class="desc">
-                <div class="info ellipsis" v-for="(el, i) in item.cqcs" :key="`item${index}`">{{ i + 1 }}.{{ el }}</div>
-                <!-- <div class="info ellipsis">2.应抓捕赵某，王某XXXXXXXXX王某XXXXXXXXXXXXXXXX等人</div> -->
-              </div>
-            </div>
-            <div class="right">
-              <el-button type="primary" size="small">加入会议</el-button>
-              <el-button type="primary" size="small">反馈情况</el-button>
-              <el-button type="primary" size="small">处置下发</el-button>
-            </div>
-          </div>
-
-          <div class="bottom">
-            <el-link type="primary">
-              <el-icon><ChatDotSquare /></el-icon>
-              评论</el-link
-            >
-            <el-link type="primary"
-              ><el-icon><VideoPlay /></el-icon>会议回放</el-link
-            >
-            <el-link type="danger"
-              ><el-icon><Delete /></el-icon>删除</el-link
-            >
-          </div>
-        </div>
-      </div>
-
-      <Pages
-        @changeNo="changeNo"
-        @changeSize="changeSize"
-        :tableHeight="pageData.tableHeight"
-        :pageConfiger="{
-          ...pageData.pageConfiger,
-          total: pageData.total
-        }"
-      ></Pages>
-    </div>
-    <!-- 详情 -->
-    <DetailForm ref="detailDiloag" />
   </div>
+  <!-- 搜索 -->
+  <div ref="searchBox">
+    <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
+  </div>
+  <!-- 表格 -->
+  <div class="tabBox">
+    <div class="flexcb">
+      <div class="btns">
+        <el-button type="primary">新增</el-button>
+        <el-button type="danger">删除</el-button>
+      </div>
+      <Search :searchArr="searchArrMeet" @submit="onSearch" :key="pageData.keyCount + 1" class="search" />
+    </div>
+
+    <div class="list noScollLine">
+      <div class="list-item" v-for="(item, index) in pageData.tableData" :key="`tableData${index}`" @onmouseover="">
+        <div class="top">
+          <div class="title ellipsis">{{ item.title }}</div>
+          <div class="info h20 ellipsis">会商内容：{{ item.hynr }}</div>
+          <div class="info h20 ellipsis">关联线索：{{ item.lxxs }}</div>
+          <div class="info h20 ellipsis">涉及人员：{{ item.sjry }}</div>
+          <div class="info h20 ellipsis">会商处置意见：xxxxxxx线索</div>
+        </div>
+
+        <div class="mid">
+          <div class="left">
+            <div class="title ellipsis">参会人员：{{ item.chry }}</div>
+            <div class="desc">
+              <div class="info ellipsis" v-for="(el, i) in item.cqcs" :key="i">{{ i + 1 }}.{{ el }}</div>
+              <!-- <div class="info ellipsis">2.应抓捕赵某，王某XXXXXXXXX王某XXXXXXXXXXXXXXXX等人</div> -->
+            </div>
+          </div>
+          <div class="right">
+            <el-button type="primary" size="small">加入会议</el-button>
+            <el-button type="primary" size="small">反馈情况</el-button>
+            <el-button type="primary" size="small">处置下发</el-button>
+          </div>
+        </div>
+
+        <div class="bottom">
+          <el-link type="primary"><el-icon><ChatDotSquare /></el-icon>评论</el-link>
+          <el-link type="primary"><el-icon><VideoPlay /></el-icon>会议回放</el-link>
+          <el-link type="primary"><el-icon><Edit /></el-icon>详情</el-link>
+          <el-link type="danger"><el-icon><Delete /></el-icon>删除</el-link>
+        </div>
+      </div>
+    </div>
+
+    <Pages
+      @changeNo="changeNo"
+      @changeSize="changeSize"
+      :tableHeight="pageData.tableHeight"
+      :pageConfiger="{
+        ...pageData.pageConfiger,
+        total: pageData.total
+      }"
+    ></Pages>
+  </div>
+  <!-- 详情 -->
+  <DetailForm ref="detailDiloag" />
 </template>
 
 <script setup>
   import PageTitle from "@/components/aboutTable/PageTitle.vue";
   import Pages from "@/components/aboutTable/Pages.vue";
   import Search from "@/components/aboutTable/Search.vue";
-  // import DetailForm from "./components/detailForm.vue";
+  import DetailForm from "./components/detailForm.vue";
   import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
   import { reactive, ref, onMounted, getCurrentInstance } from "vue";
   const { proxy } = getCurrentInstance();
@@ -220,12 +213,6 @@
     tabHeightFn();
   });
 
-  //选择类型
-  const handleType = val => {
-    pageData.keyCount++;
-    pageData.pageConfiger.pageCurrent = 1;
-    getList();
-  };
   // 搜索
   const onSearch = val => {
     queryFrom.value = { ...val };
@@ -256,7 +243,7 @@
 
   // 详情
   const addEdit = (type, row) => {
-    detailDiloag.value.init(type, row);
+    // detailDiloag.value.init(type, row);
   };
 
   // 表格高度计算
@@ -295,7 +282,7 @@
     .list-item {
       display: inline-block;
       border: 1px solid #ccc;
-      height: 280px;
+      height: 254px;
       width: 380px;
       box-sizing: border-box;
       border-radius: 5px;
@@ -315,8 +302,6 @@
         color: black;
         font-size: 14px;
         font-weight: 700;
-        // height: 24px;
-        // line-height: 24px;
         margin-bottom: 5px;
       }
       .info {

src/views/backOfficeSystem/ResearchJudgment/ResearchHome/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="yp—home flex">
+    <div class="leftbox">
+      <div class="title">
+        <span v-for="idx in 3" :key="idx" :class="'sircleL'+idx" class="sircle mr5"></span>
+        <span class="ml10 mr10">专题统计</span>
+        <span v-for="idx in 3" :key="idx" :class="'sircleR'+idx" class="sircle ml5"></span>
+      </div>
+      <div class="commCnt">
+        <div class="hh50">
+          <div class="comm-title">处置统计</div>
+          <div class="echartsBox">
+            <MoreBarEcharts echartsId="cztjEcharts" :data="obj.data_cztj"></MoreBarEcharts>
+          </div>
+        </div>
+        <div class="hh50">
+          <div class="comm-title">会商统计</div>
+          <div class="echartsBox">
+            <LineEcharts echartsId="hstjEcharts" :data="obj.data_hstj"></LineEcharts>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="rightbox">
+      <div class="title">
+        <span v-for="idx in 3" :key="idx" :class="'sircleL'+idx" class="sircle mr5"></span>
+        <span class="ml10 mr10">研判统计</span>
+        <span v-for="idx in 3" :key="idx" :class="'sircleR'+idx" class="sircle ml5"></span>
+      </div>
+      <div class="commCnt"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import MoreBarEcharts from "@/views/home/echarts/moreBarEcharts.vue";
+import LineEcharts from "@/views/home/echarts/moreLineEcharts.vue";
+import { reactive } from 'vue';
+const obj = reactive({
+   data_cztj:{
+    xData:['上访','诈骗','敲诈勒索','盗窃','涉黄','涉毒','强奸猥亵','灾害事故','自杀'],
+    color:[['#0DBAC5','#28EEBF'],['#F06C0D','#EEB416']],
+    labelColor:'#000',
+    list:[
+      {label:'总数',val:[30,20,10,60,50,60,35,45,20]},
+      {label:'未办结',val:[40,30,20,50,30,44,50,45,62]},
+    ]
+  },
+  data_hstj:{
+    xData:['上访','诈骗','敲诈勒索','盗窃','涉黄','涉毒','强奸猥亵','灾害事故','自杀'],
+    color:['#0386FB','#00FFFF'],
+    labelColor:'#000',
+    list:[
+      {label:'总数',val:[30,20,10,60,50,60,35,45,20]},
+      {label:'已会商',val:[40,30,20,50,30,44,50,45,62]},
+    ]
+  }
+
+})
+
+</script>
+
+<style lang="scss" scoped>
+
+
+.yp—home{
+  width: 100%;
+  height: 100%;
+  padding-top: 15px;
+  box-sizing: border-box;
+  color: #000;
+  .leftbox{
+    width:500px;
+    height: 100%;
+    margin-right: 10px;
+    background: #fff;
+  }
+  .rightbox{
+    flex: 1 0 0;
+    background: #fff;
+  }
+}
+
+@mixin common($width: 16px,$opacity:1){
+  height: $width;
+  width: $width;
+  border-radius: 50%;
+  background: #0386FB;
+  opacity: $opacity;
+}
+
+// 共同
+.title{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 60px;
+  font-size: 24px;
+  .sircle{
+    display: inline-block;
+  }
+  .sircleL1{
+    @include common(8px,0.5);
+  }
+  .sircleL2{
+    @include common(12px,0.75);
+  }
+  .sircleL3{
+    @include common(16px);
+  }
+  .sircleR1{
+    @include common(16px);
+  }
+  .sircleR2{
+    @include common(12px,0.75);
+  }
+  .sircleR3{
+    @include common(8px,0.5);
+  }
+}
+
+.commCnt{
+  height: calc(100% - 60px);
+  overflow: hidden;
+  overflow-y: auto;
+  padding: 10px 20px;
+  box-sizing: border-box;
+  .comm-title{
+    position: relative;
+    font-size: 20px;
+    &::before{
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 78px;
+      height: 4px;
+      background: linear-gradient( 90deg, #3596F9 0%, rgba(53,150,249,0) 100%);
+      border-radius: 4px 4px 4px 4px;
+    }
+  }
+  .echartsBox{
+    height: calc(100% - 30px);
+    margin-top: 4px;
+  }
+  
+}
+
+</style>

src/views/home/echarts/moreBarEcharts.vue

@@ -3,6 +3,7 @@
 </template>
 <script setup>
 import * as echarts from "echarts";
+import { el } from "element-plus/es/locale.mjs";
 import { on } from "element-plus/lib/utils";
 import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue";
 
@@ -16,6 +17,9 @@ const props = defineProps({
     default:{
       xData:[],
       color:[],
+      stack:false, //fasle 并排展示 ，true 堆叠展示
+      barWidth:'12px',
+      labelColor:'#fff', //横坐标颜色 - 纵坐标颜色 - 标题颜色
       list:[]
     }
   }
@@ -29,23 +33,30 @@ watch(()=>props.data,val=>{
 function init (val) {
   let color = val.color;
   let list = val.list
-  let total = 0
   let series = list.map((item ,idx)=>{
     let obj = {
       type: "bar",
-      stack:'total',
       name:item.label,
       data:item.val,
-      barGap:'80%',
+      barWidth: val.barWidth ? val.barWidth: "12px",
-      barWidth: "30px",
-      itemStyle:{normal: { color: color[idx]  }}
     }
-    if(item.label == '总数'){
+
-      obj.stack = ''
+    // 是否渐变
-      obj.z = -1
+    if( Array.isArray(color[idx]) && color[idx].length > 0){
-      obj.barGap = '-100%'
+      obj.label = { normal:{show:true,position:'top',color:color[idx][0] ? color[idx][0] : '#EB00FF'} }
-      obj.label = { normal:{show:true,position:'top',color:'#EB00FF'} }
+      obj.itemStyle = {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0,0,0,1,[{ offset: 0, color: color[idx][0] },{ offset: 1,  color: color[idx][1] }],false)
+        }
+      }
+    }else{
+      obj.itemStyle = {normal: {color: color[idx] ? color[idx] : '#EB00FF'}}
+      obj.label = { normal:{show:true,position:'top',color:color[idx] ? color[idx] : '#EB00FF'} }
     }
+
+    // 是否堆叠
+    if(val.stack) obj.stack = 'total';
+   
     return obj;
   })
   chartFn(series)
@@ -55,15 +66,15 @@ function chartFn(series) {
   var myChart = echarts.init(document.getElementById(props.echartsId));
   var option = {
     grid: {
-      top: "30%",
+      top: "12%",
       right: "2%",
       left: "2%",
-      bottom: "3%",
+      bottom: "5%",
       containLabel:true
     },
     legend:{
       data:props.data.list.map(v=>{return v.label}),
-      textStyle: { color: "#fff"},
+      textStyle: { color: props.data.labelColor || "#fff" },
       icon:'diamond', //arrow,diamond,roundRect,rect,none,circle
       itemWidth:16,
       itemHeight:8,
@@ -84,7 +95,7 @@ function chartFn(series) {
       data:props.data.xData,
       axisTick: { show: false },
       axisLine: { show: false },
-      axisLabel: { color: "#fff",magin:20 },
+      axisLabel: { color: props.data.labelColor || "#fff",magin:20 },
     },
     yAxis: {
       type: "value",
@@ -97,7 +108,7 @@ function chartFn(series) {
       },
       axisTick: { show: false },
       axisLine: { show: false },
-      axisLabel: { color: "#fff" },
+      axisLabel: { color: props.data.labelColor || "#fff"},
     },
     series:series
   };

src/views/home/echarts/moreLineEcharts.vue

@@ -16,6 +16,10 @@ const props = defineProps({
       color:[], //['#EB00FF','#F57100']
       list:[], //[{label:'总数',val:[80,70,60,50]}, {label:'已处置',val:[70,40,30,80]}, ]
       xData:[] ,//['09-01','09-02','09-03','09-04']
+      labelColor:'#000', //横坐标颜色 - 纵坐标颜色 - 标题颜色
+      rotate:0, //横坐标旋转角度
+      interval:0, //横坐标间隔
+      isVertical:false,//是否竖排垂直展示
     }
   }
 });
@@ -66,7 +70,7 @@ function chartFn(series) {
     },
     legend:{
       data:props.data.list.map(v=>{return v.label}),
-      textStyle: { color: "#fff"},
+      textStyle: { color: props.data.labelColor || "#fff" },
       icon:'diamond', //arrow,diamond,roundRect,rect,none,circle
       itemWidth:16,
       itemHeight:8,
@@ -87,13 +91,12 @@ function chartFn(series) {
       data:props.data.xData,
       axisTick: { show: false },
       axisLine: { show: false },
-      axisLabel: { color: "#fff" },
       axisLabel: {
         show: true,
-        color: "#fff",
+        color: props.data.labelColor || "#fff",
-        interval: 0, // 强制显示所有标签
+        interval: props.data.interval || 0, // 强制显示所有标签
-        // rotate: 15, // 标签旋转角度
+        rotate: props.data.rotate || 0, // 标签旋转角度
-        // formatter: function(value) { return value.split("").join("\n");}
+        formatter: function(value) { return props.data.isVertical ? value.split("").join("\n") : value}
       }
     },
     yAxis: {
@@ -107,7 +110,7 @@ function chartFn(series) {
       },
       axisTick: { show: false },
       axisLine: { show: false },
-      axisLabel: { color: "#fff" },
+      axisLabel: { color: props.data.labelColor || "#fff", },
     },
     series:series
   };

src/views/home/layout/head.vue

@@ -53,7 +53,7 @@
       </el-popover>
   
       <ul class="leftBtn-yjbtn flex">
-        <li class="leftBtn-item" @click.stop="handleBtns(it)" :class="btnsActive == it ? 'yjbtnActive' : ''" v-for="it in btns.leftBtn" :key="it">
+        <li class="leftBtn-item pointer" @click.stop="handleBtns(it)" :class="btnsActive == it ? 'yjbtnActive' : ''" v-for="it in btns.leftBtn" :key="it">
           <span class="btms">{{ it }}</span>
         </li>
       </ul>
@@ -126,7 +126,7 @@ const router = useRouter();
 const route = useRoute();
 const btns = reactive({
   rightBtn: ["四色预警", "重点人群"],
-  leftBtn: ["预警布控",'网上会议室'],
+  leftBtn: ["预警布控",'研判首页'],
   moreBtn:['退出登录',]
 });
 const btnsActive = ref("");
@@ -159,8 +159,8 @@ const handleBtns = (val) => {
     case "四色预警":
       router.push("/IdentityManage");
       break;
-    case "网上会议室":
+    case "研判首页":
-      router.push("/MeetingRoom");
+      router.push("/ResearchHome");
       break;
     case "后台":
       router.push("/editPassword");