Merge branch 'dev-shuju' of http://git.elinkit.com.cn:7070/r/epmet-oper-gov into dev-shuju

4 years ago · d37eba727a
5 changed files with 438 additions and 242 deletions
--- a/src/assets/scss/modules/visual/incident-info.scss
+++ b/src/assets/scss/modules/visual/incident-info.scss
@ -176,6 +176,8 @@
 }

 .m-line {
+    min-width: 400px;
+
    .stat {
        margin: 20px 0 10px;
        display: flex;
--- a/src/views/components/foldText.vue
+++ b/src/views/components/foldText.vue
@ -0,0 +1,135 @@
+<template>
+  <div class="m-fold_text" :class="initOk ? '' : 'z-init'">
+    <div
+      id="cnt"
+      ref="foldSlot"
+      class="fold_text-cnt"
+      :class="isFolded ? 'z-fold-' + row : ''"
+    >
+      <slot></slot>
+    </div>
+    <div v-if="!noNeedFold" class="fold_text-btn" @click="shiftFold">
+      {{ isFolded ? "展开" : "收起" }}
+    </div>
+  </div>
+</template>
+
+<script>
+import nextTick from "dai-js/tools/nextTick";
+
+export default {
+  name: "ResiSearch",
+  props: {
+    row: {
+      type: Number,
+      default: 2,
+    },
+    lineHeight: {
+      type: Number,
+      default: 24,
+    },
+  },
+  data() {
+    return {
+      initOk: false,
+
+      isFolded: false,
+
+      noNeedFold: false,
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.init();
+  },
+  methods: {
+    async init() {
+      await nextTick();
+
+      const height = await this.$refs.foldSlot.offsetHeight;
+      const { row, lineHeight } = this;
+
+      let noNeedFold = height / row < lineHeight;
+
+      this.noNeedFold = noNeedFold;
+      this.isFolded = !noNeedFold;
+      this.initOk = true;
+    },
+
+    shiftFold() {
+      let { isFolded } = this;
+      this.isFolded = !isFolded;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scope>
+// 清除容器自身浮动
+@mixin cs {
+  &::after {
+    display: block;
+    visibility: hidden;
+    clear: both;
+    overflow: hidden;
+    height: 0;
+    content: "";
+  }
+}
+
+// 不换行显示省略号
+@mixin toe {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-wrap: normal;
+}
+
+// 强制文本换行 多行
+@mixin toeM($num) {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: $num;
+  -webkit-box-orient: vertical;
+}
+
+.m-fold_text {
+  @include cs;
+
+  &.z-init {
+    background-color: rgba(#000, 0.05);
+    > view {
+      visibility: hidden;
+    }
+  }
+
+  .fold_text-cnt {
+    &.z-fold-1 {
+      @include toe;
+    }
+    &.z-fold-2 {
+      @include toeM(2);
+    }
+    &.z-fold-3 {
+      @include toeM(3);
+    }
+    &.z-fold-4 {
+      @include toeM(4);
+    }
+    &.z-fold-5 {
+      @include toeM(5);
+    }
+  }
+
+  .fold_text-btn {
+    float: right;
+    margin-right: -4px;
+    padding: 0 5px;
+    line-height: 20px;
+    color: #0c81fe;
+    cursor: pointer;
+  }
+}
+</style>
--- a/src/views/modules/visual/basicinfo/cpts/incident-info.vue
+++ b/src/views/modules/visual/basicinfo/cpts/incident-info.vue
@ -15,7 +15,12 @@
          <div class="info-title">事件内容</div>
          <div class="info-content">{{ info.eventContent }}</div>
          <div class="info-pics">
-            <img :src="src" :key="src" v-for="src in info.eventImgs" />
+            <img
+              :src="src"
+              :key="src"
+              v-for="src in info.eventImgs"
+              @click="watchImg(src)"
+            />
          </div>
          <div class="info-prop">
            <span>提交时间：</span>
@ -72,6 +77,7 @@
                :userName="yanPan.icUserName"
                :singleList="yanPan.categoryList"
                @user="toUserInfo"
+                @project="toProjectInfo"
              />
              <screen-loading v-else>加载中</screen-loading>
            </div>
@ -112,19 +118,19 @@
                </div>
                <div class="info-prop" v-if="projectCate.length > 0">
                  <span>分类：</span>
-                  <div>
+                  <fold-text :row="3">
                    <div :key="item.name" v-for="item in projectCate">
                      {{ item.name }}
                    </div>
-                  </div>
+                  </fold-text>
                </div>
                <div class="info-prop" v-if="projectTag.length > 0">
                  <span>标签：</span>
-                  <div>
+                  <fold-text :row="3">
                    <div :key="item.name" v-for="item in projectTag">
                      {{ item.name }}
                    </div>
-                  </div>
+                  </fold-text>
                </div>
              </div>

@ -206,33 +212,10 @@ import screenLoading from "@/views/modules/visual/cpts/loading";
 import { requestPost } from "@/js/dai/request";
 import cptTb from "@/views/modules/visual/cpts/tb";
 import analyse from "@/views/modules/visual/cpts/analyse";
+import foldText from "@/views/components/foldText";
 import dateFormat from "dai-js/tools/dateFormat";

-export default {
-  name: "demandInfo",
-  props: {
-    resiEventId: {
-      type: String,
-      default: "",
-    },
-    epmetUserIdList: {
-      type: Array,
-      default: [],
-    },
-    icResiUserId: {
-      type: String,
-      default: "",
-    },
-  },
-
-  components: {
-    cptCard,
-    cptTb,
-    analyse,
-    screenLoading,
-  },
-
-  data() {
+function iniData() {
  return {
    groupList: [
      { label: "研判分析" },
@ -332,12 +315,43 @@ export default {
      ],
    },
  };
+}
+
+export default {
+  name: "demandInfo",
+  props: {
+    resiEventId: {
+      type: String,
+      default: "",
+    },
+    epmetUserIdList: {
+      type: Array,
+      default: [],
+    },
+    icResiUserId: {
+      type: String,
+      default: "",
    },
+  },
+
+  components: {
+    cptCard,
+    cptTb,
+    analyse,
+    screenLoading,
+    foldText,
+  },
+
+  data: iniData,

  computed: {},

  watch: {
    resiEventId() {
+      let data = iniData();
+      Object.keys(data).forEach((k) => {
+        this[k] = data[k];
+      });
      this.getApiData();
    },
  },
@ -347,6 +361,10 @@ export default {
  },

  methods: {
+    watchImg(src) {
+      window.open(src);
+    },
+
    addStartGroupIndex() {
      const { startGroupIndex, groupList } = this;
      if (startGroupIndex < groupList.length - 9) {
@ -496,6 +514,7 @@ export default {
                statusName:
                  subItem.projectStatus == "pending" ? "待处理" : "结案",
                projectId: subItem.projectId,
+                resiEventId: subItem.resiEventId,
              };
            }),
          };
@ -512,6 +531,11 @@ export default {
        path: `/main-shuju/visual-basicinfo-people/${item.icResiUserId}`,
      });
    },
+
+    toProjectInfo(item) {
+      console.log(item);
+      this.resiEventId = item.resiEventId;
+    },
  },
 };
 </script>
--- a/src/views/modules/visual/basicinfo/cpts/topic-info.vue
+++ b/src/views/modules/visual/basicinfo/cpts/topic-info.vue
@ -15,7 +15,12 @@
          <div class="info-title">话题内容</div>
          <div class="info-content">{{ info.topicContent }}</div>
          <div class="info-pics">
-            <img :src="src" :key="src" v-for="src in info.topicImgs" />
+            <img
+              :src="src"
+              :key="src"
+              v-for="src in info.topicImgs"
+              @click="watchImg(src)"
+            />
          </div>
          <div class="info-prop">
            <span>发布时间：</span>
@ -68,6 +73,7 @@
                :userName="yanPan.icUserName"
                :singleList="yanPan.categoryList"
                @user="toUserInfo"
+                @project="toProjectInfo"
              />
              <screen-loading v-else>加载中</screen-loading>
            </div>
@ -137,7 +143,10 @@
                  </div>
                </div>

-                <line-chart :list="issueChartData" />
+                <line-chart
+                  v-if="issueChartData.length > 0"
+                  :list="issueChartData"
+                />
              </div>
            </div>
            <div v-else class="m-hint">
@ -169,19 +178,19 @@
                </div>
                <div class="info-prop" v-if="projectCate.length > 0">
                  <span>分类：</span>
-                  <div>
+                  <fold-text :row="3">
                    <div :key="item.name" v-for="item in projectCate">
                      {{ item.name }}
                    </div>
-                  </div>
+                  </fold-text>
                </div>
                <div class="info-prop" v-if="projectTag.length > 0">
                  <span>标签：</span>
-                  <div>
+                  <fold-text :row="3">
                    <div :key="item.name" v-for="item in projectTag">
                      {{ item.name }}
                    </div>
-                  </div>
+                  </fold-text>
                </div>
              </div>

@ -264,34 +273,10 @@ import { requestPost } from "@/js/dai/request";
 import cptTb from "@/views/modules/visual/cpts/tb";
 import lineChart from "@/views/modules/visual/cpts/line-chart";
 import analyse from "@/views/modules/visual/cpts/analyse";
+import foldText from "@/views/components/foldText";
 import dateFormat from "dai-js/tools/dateFormat";

-export default {
-  name: "demandInfo",
-  props: {
-    topicId: {
-      type: String,
-      default: "",
-    },
-    epmetUserIdList: {
-      type: Array,
-      default: [],
-    },
-    icResiUserId: {
-      type: String,
-      default: "",
-    },
-  },
-
-  components: {
-    cptCard,
-    cptTb,
-    analyse,
-    screenLoading,
-    lineChart,
-  },
-
-  data() {
+function iniData() {
  return {
    groupList: [
      { label: "研判分析" },
@ -416,12 +401,44 @@ export default {
      ],
    },
  };
+}
+
+export default {
+  name: "demandInfo",
+  props: {
+    topicId: {
+      type: String,
+      default: "",
+    },
+    epmetUserIdList: {
+      type: Array,
+      default: [],
+    },
+    icResiUserId: {
+      type: String,
+      default: "",
+    },
  },

+  components: {
+    cptCard,
+    cptTb,
+    analyse,
+    screenLoading,
+    lineChart,
+    foldText,
+  },
+
+  data: iniData,
+
  computed: {},

  watch: {
    topicId() {
+      let data = iniData();
+      Object.keys(data).forEach((k) => {
+        this[k] = data[k];
+      });
      this.getApiData();
    },
  },
@ -431,6 +448,10 @@ export default {
  },

  methods: {
+    watchImg(src) {
+      window.open(src);
+    },
+
    addStartGroupIndex() {
      const { startGroupIndex, groupList } = this;
      if (startGroupIndex < groupList.length - 9) {
@ -510,7 +531,7 @@ export default {
        comment: { srcList },
      } = this;
      if (srcList[index] && srcList[index].imageList) {
-        window.open(srcList[index].imageList[0].url);
+        this.watchImg(srcList[index].imageList[0].url);
      }
    },

@ -652,6 +673,7 @@ export default {
                statusName:
                  subItem.projectStatus == "pending" ? "待处理" : "结案",
                projectId: subItem.projectId,
+                topicId: subItem.topicId,
              };
            }),
          };
@ -668,6 +690,11 @@ export default {
        path: `/main-shuju/visual-basicinfo-people/${item.icResiUserId}`,
      });
    },
+
+    toProjectInfo(item) {
+      console.log(item);
+      this.topicId = item.topicId;
+    },
  },
 };
 </script>
--- a/src/views/modules/visual/cpts/line-chart.vue
+++ b/src/views/modules/visual/cpts/line-chart.vue
@ -1,6 +1,6 @@
 <template>
  <div class="m-chart">
-    <canvas id="myChart" width="400" height="260"></canvas>
+    <canvas id="myChart" :width="width" :height="height" />
  </div>
 </template>

@ -189,6 +189,14 @@ export default {
        return {};
      },
    },
+    width: {
+      type: Number,
+      default: 400,
+    },
+    height: {
+      type: Number,
+      default: 260,
+    },
  },
  data() {
    return {