From f471ec0764ae587c98f78206fe7448850bb7bb4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=92=B1=E5=86=A0=E5=AD=A6?= <1109935898@qq.com>
Date: Fri, 16 Aug 2024 17:57:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B4=9E=E5=AF=9F=E6=8A=A5=E5=91=8A=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |   6 +
 src/views/DataAnalyse/index.vue               |   6 +
 src/views/DataAnalyse/insight/Index.vue       |  50 ++++
 .../insight/components/InsightEmpty.vue       |  64 +++++
 .../insight/components/InsightOverview.vue    |  75 ++++++
 .../insight/components/InsightShare.vue       | 243 ++++++++++++++++++
 .../insight/components/Section.vue            |  17 ++
 .../insight/components/SectionTitle.vue       |  19 ++
 .../insight/img/icon_generate_report.png      | Bin 0 -> 396 bytes
 .../DataAnalyse/insight/img/icon_refresh.png  | Bin 0 -> 706 bytes
 .../DataAnalyse/insight/img/icon_share.png    | Bin 0 -> 455 bytes
 11 files changed, 480 insertions(+)
 create mode 100644 src/views/DataAnalyse/insight/Index.vue
 create mode 100644 src/views/DataAnalyse/insight/components/InsightEmpty.vue
 create mode 100644 src/views/DataAnalyse/insight/components/InsightOverview.vue
 create mode 100644 src/views/DataAnalyse/insight/components/InsightShare.vue
 create mode 100644 src/views/DataAnalyse/insight/components/Section.vue
 create mode 100644 src/views/DataAnalyse/insight/components/SectionTitle.vue
 create mode 100644 src/views/DataAnalyse/insight/img/icon_generate_report.png
 create mode 100644 src/views/DataAnalyse/insight/img/icon_refresh.png
 create mode 100644 src/views/DataAnalyse/insight/img/icon_share.png

diff --git a/src/router/index.js b/src/router/index.js
index 1d9b489f..87319ea4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -200,6 +200,12 @@ const constantRoutes = [
             meta: { keepAlive: true, showPublish: false, showPreview: false, showShare: true, showDownload: true },
             component: () => import(/* webpackChunkName: "analyse" */ '@/views/DataAnalyse/particulars/test')
           },
+          {
+            path: 'insight',
+            name: 'AnalysisInsight',
+            meta: { keepAlive: true, showDownload: true },
+            component: () => import(/* webpackChunkName: "analyse" */ '@/views/DataAnalyse/insight/Index.vue')
+          },
           {
             path: 'diagram',
             name: 'Diagram',
diff --git a/src/views/DataAnalyse/index.vue b/src/views/DataAnalyse/index.vue
index e56e520e..8217529a 100644
--- a/src/views/DataAnalyse/index.vue
+++ b/src/views/DataAnalyse/index.vue
@@ -40,6 +40,12 @@ export default defineComponent({
       (val) => {
         if (+val === 2) {
           menus.value = [
+            { // todo 仅标准版和快测版问卷显示该菜单
+              name: '洞察报告',
+              icon: '&#xe696;',
+              children: [],
+              path: '/survey/analyse/insight'
+            },
             {
               name: '基础分析',
               icon: '&#xe696;',
diff --git a/src/views/DataAnalyse/insight/Index.vue b/src/views/DataAnalyse/insight/Index.vue
new file mode 100644
index 00000000..f4c6f00b
--- /dev/null
+++ b/src/views/DataAnalyse/insight/Index.vue
@@ -0,0 +1,50 @@
+<script setup>
+import { Modal } from 'ant-design-vue'
+
+
+import InsightEmpty from './components/InsightEmpty.vue'
+import InsightShare from './components/InsightShare.vue'
+import InsightOverview from './components/InsightOverview.vue'
+
+
+
+function onGenerateReport(isInit) {
+  if(!isInit) {
+    Modal.confirm({
+      title: () => '确定更新？',
+      content: () => '更新后报告无法恢复！包括您自定义的决策标准和核心结论等',
+      class: 'custom-modal custom-modal-title-confirm-notice',
+      width: '400px',
+      okText: '确 定',
+      cancelText: '取 消',
+      onOk() {
+        onConfirmGenerateReport(isInit)
+      }
+    })
+  } else {
+    onConfirmGenerateReport(isInit)
+  }
+}
+
+function onConfirmGenerateReport(isInit) {
+  // todo
+}
+</script>
+
+<template>
+  <div class="insight-page">
+    <InsightEmpty v-if="false" @generate="onGenerateReport" />
+
+    <InsightShare @regenerate="onGenerateReport" />
+
+    <InsightOverview />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.insight-page {
+  width: 100%;
+  height: 100%;
+  padding: 24px;
+}
+</style>
diff --git a/src/views/DataAnalyse/insight/components/InsightEmpty.vue b/src/views/DataAnalyse/insight/components/InsightEmpty.vue
new file mode 100644
index 00000000..3f471721
--- /dev/null
+++ b/src/views/DataAnalyse/insight/components/InsightEmpty.vue
@@ -0,0 +1,64 @@
+<script setup>
+import { defineEmits } from 'vue'
+
+const emits = defineEmits(['generate'])
+
+function generateReport() {
+  emits('generate', true)
+}
+</script>
+
+<template>
+  <div class="insight-empty">
+    <img src="@/assets/img/publish/no-data.png" alt="" class="img">
+
+    <div class="message">请点击下方按钮生成洞察报告，需满足每个概念有效样本量均≥60</div>
+
+    <a-button type="primary" class="custom-button generate-button" @click="generateReport()">
+      <img src="../img/icon_generate_report.png" alt="" class="icon">
+      <span>生成报告</span>
+    </a-button>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.insight-empty {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.img {
+  display: block;
+  width: 160px;
+  height: 160px;
+  margin: 0 auto 8px;
+}
+
+.message {
+  height: 40px;
+  font-family: "Alibaba PuHuiTi 2.0", sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+  text-align: center;
+  color: #70B937;
+}
+
+.generate-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+
+  .icon {
+    display: block;
+    width: 14px;
+    height: 14px;
+    margin-right: 5px;
+  }
+}
+</style>
diff --git a/src/views/DataAnalyse/insight/components/InsightOverview.vue b/src/views/DataAnalyse/insight/components/InsightOverview.vue
new file mode 100644
index 00000000..264f6971
--- /dev/null
+++ b/src/views/DataAnalyse/insight/components/InsightOverview.vue
@@ -0,0 +1,75 @@
+<script setup>
+import { EyeInvisibleOutlined } from '@ant-design/icons-vue'
+
+
+import SectionTitle from './SectionTitle.vue'
+import Section from './Section.vue'
+</script>
+
+<template>
+  <div class="insight-overview">
+    <SectionTitle>
+      <span class="text">报告概览</span>
+      <EyeInvisibleOutlined class="icon" />
+    </SectionTitle>
+
+    <Section class="section">
+      <a-row>
+        <a-col :span="8" class="rect">
+          <span class="label">创建时间</span>
+          <span class="value">2024年7月5日 14:20:00</span>
+        </a-col>
+        <a-col :span="8" class="rect">
+          <span class="label">分析状态</span>
+          <span class="value">已完成</span>
+        </a-col>
+        <a-col :span="8" class="rect">
+          <span class="label">问卷版本</span>
+          <span class="value">版本1（2024-05-01 12:00:00）</span>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="8" class="rect">
+          <span class="label">完成时间</span>
+          <span class="value">2024年7月5日 14:20:00</span>
+        </a-col>
+        <a-col :span="8" class="rect">
+          <span class="label">样本量</span>
+          <span class="value">30</span>
+        </a-col>
+        <a-col :span="8" class="rect">
+          <span class="label">报告版本</span>
+          <span class="value">版本1（2024-05-01 12:00:00）</span>
+        </a-col>
+      </a-row>
+    </Section>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.insight-overview {
+  margin-bottom: 24px;
+
+  .icon {
+    margin-left: 6px;
+    font-size: 14px;
+    color: #B9B9B9;
+  }
+
+  .section {
+    padding-bottom: 1px;
+  }
+
+  .rect {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 15px;
+
+    .label {
+      flex: none;
+      width: 68px;
+    }
+  }
+}
+</style>
diff --git a/src/views/DataAnalyse/insight/components/InsightShare.vue b/src/views/DataAnalyse/insight/components/InsightShare.vue
new file mode 100644
index 00000000..f8850868
--- /dev/null
+++ b/src/views/DataAnalyse/insight/components/InsightShare.vue
@@ -0,0 +1,243 @@
+<script setup>
+import { defineEmits, ref } from 'vue'
+import { InfoCircleOutlined } from '@ant-design/icons-vue'
+
+const emits = defineEmits(['regenerate'])
+
+const loading = ref(false)
+const editable = ref(false)
+const password = ref('') // 密码
+const expiredForDays = ref('0') // 有效期天数
+
+function onEdit(type) {
+  if(loading.value) {
+    return
+  }
+  editable.value = type
+}
+
+function onPasswordChanged() {
+  password.value = password.value.replaceAll(/[^a-zA-Z0-9]/g, '').substring(0, 4)
+}
+
+function getPopupContainer(el) {
+  return el?.parentNode || document.body
+}
+
+function onCopy() {
+  // todo
+}
+
+function onUpdateReport() {
+  emits('regenerate')
+}
+</script>
+
+<template>
+  <div class="insight-share">
+    <a-popover :arrowPointAtCenter="false"
+               :getPopupContainer="getPopupContainer"
+               trigger="click"
+               placement="bottomLeft"
+               overlayClassName="share-popover">
+
+      <template #content>
+        <div class="share-popover-content" @click.stop>
+          <div class="title">分享报告</div>
+          <div class="row">
+            <span class="label">访问密码</span>
+            <a-input v-model:value="password"
+                     class="custom-input password-input"
+                     :disabled="!editable || loading"
+                     placeholder="访问密码"
+                     @change="onPasswordChanged" />
+            <a-button type="text"
+                      :disabled="loading"
+                      class="custom-button edit-password-button"
+                      @click="onEdit(true)">
+              修改
+            </a-button>
+          </div>
+          <div class="row">
+            <span class="label"></span>
+            <span class="password-prompt">支持4位大小写字母或数字</span>
+          </div>
+          <div class="row">
+            <span class="label">链接有效期</span>
+            <a-radio-group v-model:value="expiredForDays" :disabled="loading">
+              <a-radio value="0">永久</a-radio>
+              <a-radio value="30">30天</a-radio>
+              <a-radio value="7">7天</a-radio>
+              <a-radio value="1">1天</a-radio>
+            </a-radio-group>
+          </div>
+          <div class="row flex-end">
+            <a-button :loading="loading"
+                      type="primary"
+                      class="custom-button copy-button"
+                      @click="onCopy">
+              复制链接和密码
+            </a-button>
+          </div>
+        </div>
+      </template>
+
+      <a-button class="custom-button button mr-20">
+        <img src="../img/icon_share.png" alt="" class="icon">
+        <span>分享报告</span>
+      </a-button>
+    </a-popover>
+
+    <a-button class="custom-button button mr-10" @click="onUpdateReport">
+      <img src="../img/icon_refresh.png" alt="" class="icon">
+      <span>更新报告</span>
+    </a-button>
+
+    <div class="message">
+      <InfoCircleOutlined class="icon" />
+
+      <span>洞察报告不会自动实时更新,如问卷设计有调整或参与分析的样本有变化,需手动更新报告</span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.insight-share {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.mr-10 {
+  margin-right: 10px;
+}
+
+.mr-20 {
+  margin-right: 20px;
+}
+
+.button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 104px;
+  height: 32px;
+  border: 1px solid #CCCCCC;
+  border-radius: 4px;
+  background: #FFFFFF;
+
+  .icon {
+    display: block;
+    width: 16px;
+    height: 16px;
+    margin-right: 4px;
+    border: none;
+  }
+}
+
+.message {
+  .icon {
+    margin-right: 4px;
+    font-size: 14px;
+  }
+
+  font-family: Source Han Sans, sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  color: #FC4545;
+}
+
+:deep(.share-popover) {
+  padding: 10px 0 0 0;
+
+  .ant-popover-arrow {
+    display: none;
+  }
+
+  .ant-popover-inner {
+    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
+  }
+
+  .ant-popover-inner-content {
+    padding: 0;
+  }
+}
+
+.share-popover-content {
+  width: 389px;
+  padding: 16px;
+  border-radius: 10px;
+  background: #FFFFFF;
+  font-family: "Alibaba PuHuiTi 3.0", sans-serif;
+
+  .title {
+    height: 24px;
+    margin-bottom: 16px;
+    font-size: 16px;
+    font-weight: normal;
+    color: #262626;
+  }
+
+  .row {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    .label {
+      flex: none;
+      width: 82px;
+      font-size: 14px;
+      font-weight: normal;
+      color: #434343;
+    }
+
+    .edit-password-button {
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      margin-left: 6px;
+      padding: 0;
+      font-size: 12px;
+      font-weight: normal;
+      color: #81B74C;
+    }
+
+    .password-input {
+      width: 128px;
+      height: 32px;
+      border: 1px solid #DFE0E3;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: normal;
+      color: #979797;
+
+      &.ant-input-disabled {
+        background: #F5F5F5;
+      }
+    }
+
+    .password-prompt {
+      margin-top: 4px;
+      margin-bottom: 16px;
+      font-size: 12px;
+      font-weight: normal;
+      line-height: 22px;
+      color: #979797;
+    }
+  }
+
+  .row.flex-end {
+    justify-content: flex-end;
+  }
+
+  .copy-button {
+    height: 32px;
+    margin-top: 18px;
+    padding-left: 16px;
+    padding-right: 16px;
+    border-radius: 4px;
+    background: #70B936;
+  }
+}
+</style>
diff --git a/src/views/DataAnalyse/insight/components/Section.vue b/src/views/DataAnalyse/insight/components/Section.vue
new file mode 100644
index 00000000..96921b08
--- /dev/null
+++ b/src/views/DataAnalyse/insight/components/Section.vue
@@ -0,0 +1,17 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="insight-section">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.insight-section {
+  padding: 16px;
+  border: 1px solid #DFE0E3;
+  border-radius: 8px;
+}
+</style>
diff --git a/src/views/DataAnalyse/insight/components/SectionTitle.vue b/src/views/DataAnalyse/insight/components/SectionTitle.vue
new file mode 100644
index 00000000..91d40ccd
--- /dev/null
+++ b/src/views/DataAnalyse/insight/components/SectionTitle.vue
@@ -0,0 +1,19 @@
+<script setup>
+import SubTitle from '@/views/DataAnalyse/components/SubTitle.vue'
+</script>
+
+<template>
+  <SubTitle class="section-title">
+    <template #default>
+      <slot></slot>
+    </template>
+  </SubTitle>
+</template>
+
+<style scoped lang="scss">
+.section-title {
+  margin: 0 0 16px 0;
+  font-family: Source Han Sans, sans-serif;
+  font-weight: normal;
+}
+</style>
diff --git a/src/views/DataAnalyse/insight/img/icon_generate_report.png b/src/views/DataAnalyse/insight/img/icon_generate_report.png
new file mode 100644
index 0000000000000000000000000000000000000000..25b2c07ddce2855a3bb84eeb9b987fe0fa85aa9b
GIT binary patch
literal 396
zcmV;70dxL|P)<h;3K|Lk000e1NJLTq000~S000~a1^@s6at+^<00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZqHc3Q5R7i>Kma$I5Fcd}4t1>demW`znS&<kR`x|@>
zLnpqaKfp!@Bvu$vmr5Oy5vfb1%TNb`lhzJ#y1?1&SoiwL_t^o5q)gIWQmJ&5PBX*D
zeHe>*?PCqY5;%9m9k6cgsvkK}S5}$Xg<oNlVxSq4il$&a->mR^(#(8;Uz)ZwCn<#c
zaB{<TTs<V^z-6S~yP3s>t?Pi@{H90zHzCbng}?)F6}4-43oZChX>wvxIs<Ma^_FJ#
zcx*xN481!x#E(0(OEV^=cfd`g;d5xgA4sY8Fa2U{BS{NMS?5ci(8T8+NvjhYuDT{A
zDYgxcndM!=cA%mPcpd0j(9yrvv$2O#O^9gLge*<c6nFv7MmGBZu7R&#x+h8710fp1
q)@e_nakV+)jQtO6O4eq!s|TO2FklC`J_Qv30000<MNUMnLSTZ1(5ATn

literal 0
HcmV?d00001

diff --git a/src/views/DataAnalyse/insight/img/icon_refresh.png b/src/views/DataAnalyse/insight/img/icon_refresh.png
new file mode 100644
index 0000000000000000000000000000000000000000..8083dfe4da7ee28003d3483b07e72dd2a71c7d11
GIT binary patch
literal 706
zcmV;z0zLhSP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZrY)M2xR9J=W*H1`PQ4|L7pUq-mKtV7Frjpu}P#H*q
zi@-oI2%<j(LPe{hc0r4369omfYY_=;S_CbE2-=7c*`f?wBtc{nSP_9yAS4MEVvGBx
zx$_#QnQ<0DeK5?q=biV?_wG6Oob&kC(Nv@TX7r&8?Px<5U+^B|7{O$t3H0DJwpVFC
ziEDVgQUV!V#(^pwr!j(an6H;W7w)8VAMp?`@Hx?~#ugzw>r?jAI4XpxX5=w}DGVnL
z{)E27b}IS}3;9wP^5_-9Q7y6<Op&-%&aj$?&fy)FY9O#EgsDX_an}jqdtK?qJTBDW
z=ugPtuHr5{6?SJ?+)fO88%Sa!UPUDK#1~gZ@)2|=@+CAkh`=;PqxJrB1oAi&>DS<F
zg9yNbNbVBlUV*?Ma;cjRDelNhF&4==AuPWL#9N<6Ib!u-PH8o4EeK8MPn>MU;Y2@+
ztBL$vXf*Yp69b97Tk&PaFoREVDee|d0W4r!olaw9a1R~JTt69~g4syUT0!ZIu!!@?
ze;W5O8WVVfuhDvE0|*dW^H54RgDaHQ0eBY4^|s)0xS@1NxhN#&Z`h@@f%G(xM2Aoj
z2P+w6l(y1G8gmQ_7?7&4>2A1$x7e4gTd*l1@}mI+UgCQt0`LKA6_3sa?7$OztI|=M
zP~e({R$eo*!YCH!!vs#K+@xA@N^y#s5|!O@s5BGigoNo&=@*3Ydr}xM3N@os7(UYd
z{-Ch+H4`9&=$J5)R~#hDU;)>0vyxG@-v#YBj=fb7nHSpckWg?cqSh~?oKPz|h1j+V
oZ#pjw9^*ozS@t{NKmI!W1T_A9R9$DkEC2ui07*qoM6N<$f=P8TLI3~&

literal 0
HcmV?d00001

diff --git a/src/views/DataAnalyse/insight/img/icon_share.png b/src/views/DataAnalyse/insight/img/icon_share.png
new file mode 100644
index 0000000000000000000000000000000000000000..83853eed9b8b0c9f9e48444f1f3702c57e806095
GIT binary patch
literal 455
zcmV;&0XY7NP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZqaY;l$R9J=Wmpx0wKoEu>y~E<V1FZz}7wl{l1P@fO
zIl<b}U!cX+huB?nr3hA*f{o1;f`7oyTH$OIL<B1X7MmQC%_MF<EzAoG$t08KO(x9l
z!hhGC5?cX!Kqn#R8Mv`xUEly%a9~FA+t$TH;6#brY5~{c{0!K1fXDLZMbLAE1Nh1V
zvuHUykgzRr{s>GGl3$3I;27u=FIyY)Rg=mYF(7Z60OO=2Meo3c6>9;bG&n>{P^Loo
zwurseWk7>p0#|hz7%K47q?^k&FaY*l;bj{bVE%Y#c$o%r!OJq>3jflMUAkVHRvqDB
zTJIY0jcDUV4ZLFBrt=FNOtU(&gGCKYfjwXec*ygBq6R_})4a)5wPH<O;5-<Me_@~x
zYy@N0tm-r%XT{mdsZIl`8Uu|1*@)z1(W`*9qp{@1!~<^0zQoQdAJ_$+uwWm-Sf{$u
x_?QXnJ`8AEGY_*zNL^0n&?j(5@aBy|{Q!ftJm4No!<PU6002ovPDHLkV1l5b!sGw|

literal 0
HcmV?d00001