You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
267 lines
9.0 KiB
267 lines
9.0 KiB
<template>
|
|
<div class="InsightsChartList">
|
|
<h1>洞察分析統計圖</h1>
|
|
<a-row>
|
|
<a-col :span="6">
|
|
<a-row>
|
|
<a-col :span="24">
|
|
<div class="formRowGrp flexLeft">
|
|
<div class="formTxt">
|
|
<a-input placeholder="查詢"></a-input>
|
|
</div>
|
|
<a-button @click="openChartTit"><span class="material-icons">add</span></a-button>
|
|
</div>
|
|
<div class="chartTitGrp" v-if="isChartTitClick == true"><!--chartTitGrp- v-bind:class="{'chartTitGrp':isChartTitClick}"-->
|
|
<ul class="ul">
|
|
<li><a @click="showModelChartTit('report')"><span class="material-icons">trending_up</span>報告</a></li>
|
|
<li><a @click="showModelChartTit('dashboard')"><span class="material-icons">dashboard</span>儀表板</a></li>
|
|
<li><a @click="showModelChartTit('gost')"><span class="material-icons">domain_verification</span>目標</a></li>
|
|
</ul>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-menu mode="inline" :open-keys="openKeys" style="width: 256px" @openChange="onOpenChange"
|
|
@click="titleClick">
|
|
<a-sub-menu key="sub1">
|
|
<span slot="title"><a-icon type="mail" /><span>儀表板</span></span>
|
|
<a-menu-item key="1">
|
|
儀表板
|
|
</a-menu-item>
|
|
</a-sub-menu>
|
|
<a-sub-menu key="sub2">
|
|
<span slot="title"><a-icon type="appstore" /><span>目標</span></span>
|
|
<a-menu-item key="5">
|
|
交易已新增 Sunny
|
|
</a-menu-item>
|
|
</a-sub-menu>
|
|
</a-sub-menu>
|
|
<a-sub-menu key="sub4">
|
|
<span slot="title"><a-icon type="setting" /><span>報告</span></span>
|
|
<a-menu-item key="9">
|
|
已完成及已計劃的活動
|
|
</a-menu-item>
|
|
<a-menu-item key="10">
|
|
送出及收到的電子郵件
|
|
</a-menu-item>
|
|
<a-menu-item key="11">
|
|
已開始的交易
|
|
</a-menu-item>
|
|
<a-menu-item key="12">
|
|
交易進展
|
|
</a-menu-item>
|
|
<a-menu-item key="13">
|
|
交易期間
|
|
</a-menu-item>
|
|
<a-menu-item key="14">
|
|
交易轉換
|
|
</a-menu-item>
|
|
<a-menu-item key="15">
|
|
隨著時間成功的交易
|
|
</a-menu-item>
|
|
<a-menu-item key="16">
|
|
成功交易的平均值
|
|
</a-menu-item>
|
|
<a-menu-item key="17">
|
|
按原因分類的失敗交易
|
|
</a-menu-item>
|
|
<a-menu-item key="18">
|
|
成功交易的平均值
|
|
</a-menu-item>
|
|
<a-menu-item key="19">
|
|
按原因分類的失敗交易
|
|
</a-menu-item>
|
|
<a-menu-item key="20">
|
|
產品已售出
|
|
</a-menu-item>
|
|
<a-menu-item key="21">
|
|
收入預測
|
|
</a-menu-item>
|
|
<a-menu-item key="22">
|
|
交易進展
|
|
</a-menu-item>
|
|
<a-menu-item key="23">
|
|
交易進展
|
|
</a-menu-item>
|
|
</a-sub-menu>
|
|
</a-menu>
|
|
</a-col>
|
|
<a-col :span="18">
|
|
<ChartList v-if="showChartList == true" msg="我的儀表板圖表" />
|
|
<ActivityChart v-else-if="showActivityChart == true" msg="已完成及已計劃的活動圖表" />
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-modal
|
|
:title="modelChartTit"
|
|
:visible="visibleChartList"
|
|
:confirm-loading="confirmLoading"
|
|
@ok="handleOk"
|
|
@cancel="handleCancel"
|
|
width="70%"
|
|
>
|
|
<div v-if="modelChartType == 'dashboard'">
|
|
<a-row>
|
|
<a-col :span="24">
|
|
<input type="text" placeholder="儀表板名稱"></input>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
<div v-else-if="modelChartType == 'gost'">
|
|
<a-row>
|
|
<a-col :span="24">
|
|
<label>選擇實體</label>
|
|
<a-tabs default-active-key="1" :tab-position="tabPosition">
|
|
<a-tab-pane key="1" tab="交易">
|
|
<div>
|
|
<label>選擇目標類型</label>
|
|
<h3>已新增</h3>
|
|
<p>依據新交易的數量或值</p>
|
|
<h3>有所進展</h3>
|
|
<p>依據進入特定階段的交易數量或值</p>
|
|
<h3>成功</h3>
|
|
<p>依據成功交易的數量或值</p>
|
|
</div>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="2" tab="活動">
|
|
<div>
|
|
<label>選擇目標類型</label>
|
|
<h3>已新增</h3>
|
|
<p>依據新活動的數量</p>
|
|
<h3>已完成</h3>
|
|
<p>依據標示為已完成的活動數量</p>
|
|
</div>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="3" tab="預測">
|
|
<div>
|
|
<label>選擇目標類型</label>
|
|
<h3>收入預測</h3>
|
|
<p>依據開放及成功交易的加權值</p>
|
|
</div>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
<div v-else>
|
|
<a-row>
|
|
<a-col :span="24">
|
|
<label>選擇實體</label>
|
|
<a-tabs default-active-key="1" :tab-position="tabPosition">
|
|
<a-tab-pane key="1" tab="活動">
|
|
<div>
|
|
<label>選擇報告類型</label>
|
|
<h3>活動表現</h3>
|
|
<p>已新增、完成或計劃了多少活動呢？</p>
|
|
<h3>電子郵件表現</h3>
|
|
<p>已傳送、接收或打開多少電子郵件了呢？</p>
|
|
</div>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="2" tab="交易">
|
|
<div>
|
|
<label>選擇報告類型</label>
|
|
<h3>表現</h3>
|
|
<p>你開始了多少筆交易，且成功或失敗了多少呢？</p>
|
|
<h3>轉換</h3>
|
|
<p>你的成功率或失敗率是多少？</p>
|
|
<h3>期間</h3>
|
|
<p>你的銷售週期為何？</p>
|
|
<h3>進展</h3>
|
|
<p>交易在銷售流程中是否有進展？</p>
|
|
</div>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="3" tab="預測與訂閱">
|
|
<div>
|
|
<label>選擇報告類型</label>
|
|
<h3>收入預測</h3>
|
|
<p>你的預期收入是多少？</p>
|
|
<h3>訂閱收入</h3>
|
|
<p>你的訂閱收入是多少？</p>
|
|
</div>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</a-modal>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import ChartList from '@/components/Insights/ChartList.vue';
|
|
import ActivityChart from '@/components/Insights/ActivityChart.vue';
|
|
export default {
|
|
name: "InsightsChartList",
|
|
components: {
|
|
ChartList,
|
|
ActivityChart,
|
|
},
|
|
data() {
|
|
return {
|
|
//a-ment start
|
|
rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
|
|
openKeys: ['sub1'],
|
|
//a-ment end
|
|
confirmLoading:false,
|
|
showChartList:false,//顯示儀表板
|
|
showActivityChart:true,//儀表板 - 已完成及已計劃的活動
|
|
showChartTit:false,//增加查詢面板
|
|
isChartTitClick: false,//銷售流程階段
|
|
visibleChartList:false,//model Chart
|
|
tabPosition: 'left',//model里的tabs
|
|
modelChartType:'',
|
|
modelChartTit:'新增報告',
|
|
}
|
|
},
|
|
methods: {
|
|
callback(val) {//model里的tabs
|
|
console.log(val);
|
|
},
|
|
onOpenChange(openKeys) {
|
|
//console.log("openKeys",openKeys)
|
|
const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
|
|
if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
|
|
this.openKeys = openKeys;
|
|
} else {
|
|
this.openKeys = latestOpenKey ? [latestOpenKey] : [];
|
|
}
|
|
},
|
|
titleClick(val){
|
|
if(val.key == "1"){
|
|
this.showChartList = true;
|
|
}else if(val.key == "9"){
|
|
this.showChartList = false;
|
|
this.showActivityChart = true;
|
|
}
|
|
console.log("val",val)
|
|
},
|
|
openChartTit(){
|
|
this.isChartTitClick = !this.isChartTitClick;
|
|
},
|
|
showModelChartTit(modelTit){
|
|
this.modelChartType = modelTit;
|
|
if(modelTit == 'dashboard'){
|
|
this.modelChartTit = '新增儀表板';
|
|
}else if(modelTit == 'gost'){
|
|
this.modelChartTit = '新增目標 1/2';
|
|
}else{
|
|
this.modelChartTit = '新增報告';
|
|
}
|
|
this.visibleChartList = !this.visibleChartList;
|
|
this.isChartTitClick = false;
|
|
},
|
|
handleOk(e) {
|
|
this.ModalText = "The modal will be closed after two seconds";
|
|
this.confirmLoading = true;
|
|
setTimeout(() => {
|
|
this.visibleChartList = false;
|
|
this.confirmLoading = false;
|
|
}, 2000);
|
|
},
|
|
handleCancel(e) {
|
|
console.log("Clicked cancel button");
|
|
this.visibleChartList = false;
|
|
this.isChartTitClick = false;
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|