zx

src/components/index.js

@@ -10,6 +10,7 @@ import vLabelDiv from "@/components/v-labelDiv";
 import vModal from "@/components/v-modal";
 import vTable from "@/components/v-table";
 import vTabGroup from "@/components/v-tab-group";
+import vTabMode from "@/components/v-tab-mode";
 import vEcharts from "@/components/v-echars";
 import vBtn from "@/components/v-btn";
 import vLabelCtx from "@/components/v-label-ctx"
@@ -27,6 +28,7 @@ export default {
                 vModal,
                 vTable,
                 vTabGroup,
+                vTabMode,
                 vEcharts,
                 vBtn,
                 vLabelCtx,

src/components/v-tab-group/index.vue

@@ -8,7 +8,10 @@
 -->
 <template>
     <div class="v-t-g-container" ref="V-t-g">
-        <span  v-for="(item,index) in btns" :key="index" :class="activeInex === index ? 'v-g-item v-g-item-active' : 'v-g-item'" @click="handlerClick(index)">{{item}}</span>
+        <template v-for="(item,index) in btns">
+            <span v-if="activeInex === index" class="v-g-item v-g-item-active" :key="index" @click="handlerClick(index)">{{item}}</span>
+            <span v-else class="v-g-item" :key="index" @click="handlerClick(index)">{{item}}</span>
+        </template>
     </div>
 </template>
 

src/components/v-tab-mode/index.vue

@@ -0,0 +1,79 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-08 19:06:37
+ * @LastEditTime: 2021-10-28 11:11:13
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/components/v-tab-group/index.vue
+-->
+<template>
+    <div class="v-t-g-container" ref="V-t-g">
+        <template v-for="(item,index) in btns">
+            <span v-if="index == active" class="v-g-item v-g-item-active" :key="index" @click="handlerClick(index)">{{item}}</span>
+            <span v-else class="v-g-item" :key="index" @click="handlerClick(index)">{{item}}</span>
+        </template>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "v-tab-group",
+    props: {
+        value: {
+            type: Number,
+            default: 0
+        },
+        btns: {
+            type: Array,
+            default: () => []
+        },
+        active: {
+            type: Number,
+            default: 0
+        } 
+    },
+    watch: {
+        value: {
+            handler(val) {
+                this.activeInex = val
+            },
+            immediate: true
+        }
+    },
+    data() {
+        return {
+            activeInex: 0
+        }
+    },
+    methods: {
+        handlerClick(n) {
+            this.activeInex = n;
+            // this.$emit('update:value', this.activeInex)
+            this.$emit('change', this.activeInex);
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.v-t-g-container {
+    display: inline-block;
+    background: #1B4163;
+    padding: 3px;
+    border-radius: 2px;
+    font-size: 14px;
+}
+
+.v-g-item {
+   display: inline-block;
+    padding: 2px 10px;
+    color: #63AECC;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 2px;
+}
+.v-g-item-active {
+    background: linear-gradient(180deg, #00498C 0%, #002343 100%);
+    border: 1px solid #63AECC;
+}
+</style>

src/views/ThemeAnalize/index.vue

@@ -67,7 +67,7 @@
       <a-modal :title="modalObj.title" width="1200px" :footer="null" :visible="modalObj.visible" :dialog-style="{ top: '20px' }">
           <div class="modal-outter">
                 <div class="modal-top">
-                  <v-tab-group :btns="['便捷模式', '高级模式']" @change="changeMode"></v-tab-group>
+                  <v-tab-mode :active="activeMode" :btns="['便捷模式', '高级模式']" @change="changeMode"></v-tab-mode>
                   <a-popover title="提示" placement="bottomLeft">
                       <template slot="content">
                           <helpContent></helpContent>
@@ -87,7 +87,7 @@
                                       </a-range-picker>
                                   </a-form-model-item>
                                   <v-label-div title="分析词设置">
-                                      <v-tab-group style="margin-right: 42px" :btns="['必选词和的关系', '主题词或的关系']" @change="handlerHH"></v-tab-group>
+                                      <v-tab-mode :active="activeAnd" style="margin-right: 42px" :btns="['必选词和的关系', '主题词或的关系']" @change="handlerHH"></v-tab-mode>
                                   </v-label-div>
                                       <div v-if="mode == 0">
                                           <a-form-model-item label="必选词"><a-input placeholder="请输入分析关键词，多个词用，隔开，最多支持5个" @change="doCombo" v-model="addForm.DetailsData[0].AnalyzeWord"></a-input></a-form-model-item>
@@ -179,6 +179,9 @@ export default {
     data() {
         return {
             myThemeArr: [],
+            //
+            activeMode: 0,
+            activeAnd: 0,
             //新增对话框
             visible: false,
             modalObj: {
@@ -257,7 +260,7 @@ export default {
 .tab-pane {
     display: flex;
     flex-wrap:wrap;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-items: center;
 }
 .card-items {
@@ -265,7 +268,8 @@ export default {
     height: 240px;
     background: linear-gradient(180deg, #0088c9 0%, #001c43 100%);
     border-radius: 4px;
-    margin-top: 24px;
+    margin-top: 16px;
+    margin-right: 16px;
     border: 2px solid #0091ff;
     .card-item-top {
         width: 100%;
@@ -280,7 +284,7 @@ export default {
         }
         .cid-data {
             display: flex;
-            justify-content: space-between;
+            justify-content: flex-start;
             .s1 {
                 width: 33%;
                 display: block;

src/views/ThemeAnalize/tbEvent.js

@@ -53,7 +53,16 @@ export default {
         getSchemeDataByGuid(obj).then(res => {
             let data = res.data;
             this.addForm = data;
-            this.selTime = [data.StartTime, data.EndTime]
+            this.selTime = [data.StartTime, data.EndTime];
+            if(data.DetailsData[0].IsAdvancedQuery == 1) {
+                this.changeMode(1)
+            } else if(data.DetailsData[0].IsAdvancedQuery == 2) {
+                this.changeMode(0);
+                this.handlerHH(1);
+            } else {
+                this.changeMode(0);
+                this.handlerHH(0);
+            }
             this.doCombo();
             this.doCombo2();
             this.modalObj.visible = true;
@@ -142,16 +151,19 @@ export default {
         this.mode = activeTab;
         if(this.isHigh != 1 && activeTab == 0) {
             this.addForm.DetailsData[0].IsAdvancedQuery = 0;
+            this.activeAnd = 0;
             this.doCombo();
         }
         if(this.isHigh != 1 && activeTab == 1) {
             this.addForm.DetailsData[0].IsAdvancedQuery = 2;
+            this.activeAnd = 1;
             this.doCombo2();
         };
     },
     changeMode(activeTab) {
         this.addForm.DetailsData[0].IsAdvancedQuery = activeTab;
         this.isHigh = activeTab;
+        this.activeMode = activeTab
     },
     //切换主题
     handlerChangeTheme(n) {
@@ -166,6 +178,9 @@ export default {
     //重置表单
     reSet() {
         this.selTime = [];
+        this.activeAnd = 0;
+        this.activeMode = 0;
+        this.isHigh = 0;
         this.addForm = {
             Name: "",
             Classify: 0,

src/views/ThemeBoard/SourceDivide/index.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="sd-outter" v-loading="load">
-      <v-label-div title="渠道分布占比"></v-label-div>
+      <v-label-div title="分布占比">
+          <v-tab-group :btns="['渠道', '情感']" @change="handlerTab"></v-tab-group>
+      </v-label-div>
       <div class="sd-inner">
         <div class="sd-d1">
-            <v-echarts :opt="opt"></v-echarts>
+            <v-echarts v-if="active==0" :opt="opt"></v-echarts>
+            <v-echarts v-if="active==1" :opt="opt2"></v-echarts>
         </div>
-        <div class="sd-d2">
+        <div class="sd-d2" v-if="active==0">
             <vue-scroll>
                 <v-label-ctx v-for="(item,index) in labelData" 
                 :key="index" :label="item.key" 
@@ -16,12 +19,24 @@
                 </v-label-ctx>
             </vue-scroll>
         </div>
+        <div class="sd-d2" v-if="active==1">
+            <vue-scroll>
+                <v-label-ctx v-for="(item,index) in labelData2" 
+                :key="index" :label="item.key" 
+                :cont="item.value" 
+                :percentage="(item.value/total*100).toFixed(2) +'%'" 
+                :color="colors[index]" contLabel="数量" 
+                :eStyle="{ height: '8.3rem' }">
+                </v-label-ctx>
+            </vue-scroll>
+        </div>
       </div>
   </div>
 </template>
 
 <script>
 import {getSourcetype} from "@/api/ThemeAnalizeDec"
+import {getSummarizeMerge} from "@/api/ThemeAnalizeDec"
 import createOpt from "./opt"
 export default {
     name: "SourceDivide",
@@ -29,8 +44,11 @@ export default {
         return {
             load: false,
             opt: {},
+            opt2: {},
             labelData: [],
             total: 0,
+            labelData2: [],
+            total2: 0,
             colors: [
                 '#546fc5', 
                 '#91cb74', 
@@ -52,7 +70,8 @@ export default {
             ],
             form: {
                 token: ''
-            }
+            },
+            active: 0
         }
     },
     created() {
@@ -79,8 +98,27 @@ export default {
                 this.total = totalVal
                 this.opt = createOpt(labelData, this.colors);
                 this.load = false
+            });
+            getSummarizeMerge(obj).then(res => {
+                let data = res.data.Affections;
+                let labelData2 = [];
+                let totalVal2 = 0;
+                for(let key in data) {
+                    let obj = {
+                        key: key,
+                        value: data[key]
+                    };
+                    totalVal2 = totalVal2 + data[key] * 1.0;
+                    labelData2.push(obj);
+                };
+                this.labelData2 = labelData2;
+                this.total2 = totalVal2
+                this.opt2 = createOpt(labelData2, this.colors);
             })
-        }
+        },
+        handlerTab(active) {
+            this.active = active
+        },
     }
 }
 </script>

src/views/ThemeBoard/TotalVolume/index.vue

@@ -2,23 +2,49 @@
   <div class="tv-container1" v-loading="load">
       <v-label-div title="总声量趋势"></v-label-div>
       <div class="tv-inner">
-          <v-echarts :opt="opt"></v-echarts>
+          <v-echarts :opt="opt" @clickMark="clickMark"></v-echarts>
       </div>
+      <div class="vshow" v-if="modelShow" :style="modelStyle">
+            <vLabel-div title="实时热点事件">
+                <a-button @click="closeBox">关闭</a-button>
+            </vLabel-div>
+            <div class="vshow-item" v-for="(item, index) in urlArr" :key="index">
+                <a class="vshow-link" :href="item.url" v-if="item.column == activeCol" target="tar">{{item.title}}</a>
+            </div>
+        </div>
   </div>
 </template>
 
 <script>
 import {getVolumeTime} from "@/api/ThemeAnalizeDec"
+import {doStr} from "@/utils/gol/dataTool"
 import createOpt from "./opt"
 export default {
     name: "TotalVolume",
     data() {
         return {
+            //弹出框//
+            modelStyle:{
+                left: '',
+                top: ''
+            },
+            modelShow: false,
+            ecbox:{//图表宽高
+                width:618,
+                height:490
+            },
+            ecmodel:{//弹框宽高
+                width:300,
+                height:280
+            },
+            activeCol: 0,
+            //-*-//
             load: false,
             opt: {},
             form: {
                 token: ''
-            }
+            },
+            urlArr: []
         }
     },
     created() {
@@ -26,6 +52,26 @@ export default {
         this.getData()
     },
     methods: {
+        //--弹出框--//
+        clickMark(data) {
+            this.activeCol = data.index
+            this.modelShow = true;
+            let mw = window.event;
+            if((this.ecbox.width - mw.offsetX - 20) > this.ecmodel.width) {
+                this.modelStyle.left = mw.offsetX + 20 + "px"
+            } else {
+                this.modelStyle.left = mw.offsetX - this.ecmodel.width - 20 + "px"
+            }
+            if((this.ecbox.height - mw.offsetY - 20) > this.ecmodel.height) {
+                this.modelStyle.top = mw.offsetY + "px"
+            } else {
+                this.modelStyle.top = mw.offsetY - this.ecmodel.height + "px"
+            }
+        },
+        closeBox() {
+            this.modelShow = false;
+        },
+        //----//
         getData() {
             let obj = Object.assign({}, this.form);
             this.load = true;
@@ -33,13 +79,39 @@ export default {
                 let data = res.data || [];
                 let dx = [];
                 let ds = [];
+                let hotTopArr = [];
+                let urlArr = [];
                 let hotIndex = [];
+                let dataI = 0;
                 data.forEach(ele => {
                     let key = ele.Time;
                     let value = ele.value;
                     dx.push(key);
                     ds.push(value);
+                    if(ele.hasOwnProperty("hotTop")) {
+                        ele.hotTop.forEach((e) => {
+                            let urlObj = {
+                                column: dataI,
+                                title: doStr(e.title, 30),
+                                url: e.url
+                            };
+                            urlArr.push(urlObj);
+                        })
+                    }
+                    let obj = {
+                        label: key,
+                        hotTop: ele.hotTop
+                    }
+                    hotTopArr.push(obj);
+                    dataI = dataI + 1;
                 })
+                this.urlArr = urlArr;
+                //获取有热点信息的索引
+                for(let i = 0; i<hotTopArr.length; i++) {
+                    if(hotTopArr[i].hotTop != undefined) {
+                        hotIndex.push(i)
+                    }
+                }
                 this.opt = createOpt(dx, ds, hotIndex);
                 this.load = false;
             })
@@ -60,4 +132,17 @@ export default {
         height: calc(100% - 48px);
     }
 }
+
+.vshow{
+  position: absolute;
+    width: 300px;
+    background: rgb(3, 18, 36);
+    border: 4px solid #0f2a4d;
+    .vshow-item {
+        padding: 11px;
+        width: 100%;
+        font-size: 15px;
+        color: rgb(54, 189, 239);
+    }
+}
 </style>

src/views/ThemeBoard/UserTopic/index.vue

@@ -35,7 +35,7 @@ export default {
                 let arr = [];
                 data.forEach((ele) => {
                     let o = [
-                        `<span style="cursor: pointer;">${ele.title}</span>`,
+                        `<a href="${ele.url}" target="tar" style="color:white">${ele.title}</span>`,
                         ele.count,
                         ele.sourcetime,
                         ele.source,
@@ -49,7 +49,7 @@ export default {
                     headerBGC: "#0c203b",
                     oddRowBGC: "#173b6d",
                     evenRowBGC: "rgba(69, 149, 244, 0)",
-                    columnWidth: [470,90,200,80],
+                    columnWidth: [480,90,200,80],
                     rowNum: 7,
                     header: ["事件标题", "影响力", "发布时间", "来源"],
                     data: arr,
@@ -58,9 +58,7 @@ export default {
             })
         },
         handlerSs(obj) {
-            // let rowIndex = obj.rowIndex;
-            // let row = this.list[rowIndex];
-            // this.$router.push({path: '/eventDEC', query: {events_id: row.events_id}})
+            console.log(obj);
         }
     }
 }

src/views/ThemeBoard/index.vue

@@ -9,9 +9,9 @@
               <div class="s1">
                   {{themeObj.title}}
               </div>
-              <div class="s2">
+              <!-- <div class="s2">
                   <span v-html="msg"></span>
-              </div>
+              </div> -->
           </div>
           <totalVolume></totalVolume>
           <eventTransform></eventTransform>
@@ -130,7 +130,7 @@ export default {
 }
 .d-outter-d1 {
     width: 100%;
-    height: 195px;
+    // height: 195px;
     border: 2px solid #0f2a4d;
     overflow: hidden;
     .s1 {

src/views/ThemeData/getApi.js

@@ -41,9 +41,23 @@ export default {
             this.tableLoading = false;
         })
     },
-    // 获取列表
+    // 获取渠道数据
     getListData() {
-
+        let obj = Object.assign({}, this.form);
+        obj.isSourcetype = 1;
+        getList(obj).then((res) => {
+                    let data = res.data1;
+                    let x = this.quDaoAll.replace(/\(.*?\)/g, "");
+                    this.quDaoAll = x + "(" + data[0] + ")";
+                    let arr = [...this.plainOptions];
+                    data.splice(0,1);
+                    for (let i = 0; i < data.length; i++) {
+                        let label = arr[i].label || "";
+                        let str = label.replace(/\(.*?\)/g, "");
+                        arr[i].label = str + "(" + data[i] + ")";
+                    }
+                    this.plainOptions = arr;
+        })
     },
     // 获取设置的时间
     getSetTime() {},

src/views/ThemeData/index.vue

@@ -16,7 +16,7 @@
                 <div class="d-inner-d1">
                     <span class="s1">渠道：</span>
                     <a-checkbox :disabled="noClick" :indeterminate="qdIndeterminate" :checked="qdCheckAll" @change="onCheckAllChangeQd">
-                        全部
+                        {{quDaoAll}}
                     </a-checkbox>
                     <a-checkbox-group v-model="quDao" :disabled="noClick" :options="plainOptions" @change="(val) => onChange(val, 'quDao')" />
                 </div>    
@@ -146,6 +146,7 @@ export default {
             setEndTime: '',
             //渠道
             quDao: [],
+            quDaoAll: '全部',
             plainOptions: [],
             qdIndeterminate: true,
             qdCheckAll: false,

src/views/ThemeData/tableEvent.js

@@ -35,21 +35,19 @@ export default {
     initData() {
         Promise.all([
             this.getTime(),
-            this.getQuDao(),
             this.getQingGan(),
             this.getQueryType(),
+            this.getQuDao(),
         ]).then(() => {
             this.form.token = this.getToken;
             this.form.sGuid = this.$route.query.sGuid;
             this.form.iTimeType = 0;
             this.form.iGroupBy = '0';
             this.form.listType = '0';
-            this.form.isSourcetype = '0';
+            this.form.isSourcetype = 0;
             this.form.sTitleType = -1;
             let series = this.$route.query.series || [];
             let qudao = this.$route.query.qudao || [];
-            this.doFormQudao(qudao);
-            this.doFormQS(series);
 
             this.form.sTimeType = 4;
             if (this.form.sStartTime && this.form.sEndTime) {
@@ -63,7 +61,10 @@ export default {
             } else {
                 this.gValue = x; 
             }
+            this.doFormQudao(qudao);
+            this.doFormQS(series);
             this.getTableData();
+            this.getListData();
         })
     },
     handlerBack() {
@@ -99,6 +100,7 @@ export default {
         this.sk = [];
         this.tableAll = false;
         this.getTableData();
+        this.getListData();
     },
     disabledDate(current) {
         let s = moment(this.setStartTime);
@@ -129,7 +131,7 @@ export default {
             this.form.sQingGan = this.diaoXing.toString();
         }
         this.form.iPageIndex = 1;
-        Promise.all([this.getTableData()]).then(() => {
+        Promise.all([this.getTableData(),this.getListData()]).then(() => {
             this.noClick = false;
         });
     },
@@ -150,7 +152,7 @@ export default {
         this.pagination.current = 1;
         this.sk = [];
         this.tableAll = false;
-        Promise.all([this.getTableData()]).then(() => {
+        Promise.all([this.getTableData(),this.getListData()]).then(() => {
             this.noClick = false;
         });
     },
@@ -171,7 +173,7 @@ export default {
         this.pagination.current = 1;
         this.sk = [];
         this.tableAll = false;
-        Promise.all([this.getTableData()]).then(() => {
+        Promise.all([this.getTableData(),this.getListData()]).then(() => {
             this.noClick = false;
         });
     },
@@ -179,16 +181,19 @@ export default {
     handlerSxTime(activeIndex) {
         this.form.iTimeType = activeIndex;
         this.getTableData();
+        this.getListData();
     },
     //去重筛选
     handlerTime2(activeIndex) {
         this.form.iGroupBy = activeIndex;
         this.getTableData();
+        this.getListData();
     },
     //关键词搜索
     onSearch() {
         this.form.sTitle = this.searchTitle;
         this.getTableData();
+        this.getListData();
     },
     // 改变搜索模式
     handlerSearchMode(val) {
@@ -200,6 +205,7 @@ export default {
         this.form.iPageIndex = iPageIndex;
         this.pagination.current = iPageIndex;
         this.getTableData();
+        this.getListData();
     },
     //前往导出页面
     goOutput() {