|
@@ -0,0 +1,695 @@
|
|
|
+<template>
|
|
|
+ <div class="effectPage">
|
|
|
+ <div class="moduler">
|
|
|
+ <a-select mode="multiple"
|
|
|
+ style="width: 35%;margin-right:30px"
|
|
|
+ placeholder="请选择具体项目"
|
|
|
+ @change="projectChange">
|
|
|
+ <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
|
|
|
+ {{ (i + 9).toString(36) + i }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <a-range-picker v-model="dateRange" @change="dateChange" style="width:200px" />
|
|
|
+ <div class="opt">
|
|
|
+ <a-button type='primary'>查询</a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="moduler">
|
|
|
+ <a-tabs v-model="tabKey" @change="tabKeyChange">
|
|
|
+ <a-tab-pane :key="1" tab="项目"></a-tab-pane>
|
|
|
+ <a-tab-pane :key="2" tab="账户"> </a-tab-pane>
|
|
|
+ <a-tab-pane :key="3" tab="广告计划"> </a-tab-pane>
|
|
|
+ <a-tab-pane :key="4" tab="广告组"> </a-tab-pane>
|
|
|
+ <a-tab-pane :key="5" tab="广告创意"> </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ <div class="tableBody">
|
|
|
+ <a-table :columns="columns"
|
|
|
+ :data-source="tableData"
|
|
|
+ :scroll="{ x: 3500 }"
|
|
|
+ bordered
|
|
|
+ :laoding='loading'
|
|
|
+ :pagination='ipagination'
|
|
|
+ @change="tableChange"
|
|
|
+ >
|
|
|
+ <a slot="projectName" slot-scope="text,records" @click="goAccount(records)">{{text}}</a>
|
|
|
+ <span slot="charge" slot-scope="charge"> {{charge|decimalsHandle}}</span>
|
|
|
+ <span slot="activationCost" slot-scope="activationCost"> {{activationCost|decimalsHandle}}</span>
|
|
|
+ <span slot="eventNextDayStayCost" slot-scope="eventNextDayStayCost"> {{eventNextDayStayCost|decimalsHandle}}</span>
|
|
|
+ <span slot="impression1kCost" slot-scope="impression1kCost"> {{impression1kCost|decimalsHandle}}</span>
|
|
|
+ <span slot="photoClickCost" slot-scope="photoClickCost"> {{photoClickCost|decimalsHandle}}</span>
|
|
|
+ <span slot="actionCost" slot-scope="actionCost"> {{actionCost|decimalsHandle}}</span>
|
|
|
+
|
|
|
+
|
|
|
+ <span slot="photoClick" slot-scope="photoClick"> {{photoClick|formatCurrency}}</span>
|
|
|
+ <span slot="photoShow" slot-scope="photoShow"> {{photoShow|formatCurrency}}</span>
|
|
|
+ <span slot="aclick" slot-scope="aclick"> {{aclick|formatCurrency}}</span>
|
|
|
+ <span slot="bclick" slot-scope="bclick"> {{bclick|formatCurrency}}</span>
|
|
|
+ <span slot="activation" slot-scope="activation"> {{activation|formatCurrency}}</span>
|
|
|
+ <span slot="submit" slot-scope="submit"> {{submit|formatCurrency}}</span>
|
|
|
+ <span slot="eventRegister" slot-scope="eventRegister"> {{eventRegister|formatCurrency}}</span>
|
|
|
+ <span slot="eventNextDayStay" slot-scope="eventNextDayStay"> {{eventNextDayStay|formatCurrency}}</span>
|
|
|
+ <span slot="photoShare" slot-scope="photoShare"> {{photoShare|formatCurrency}}</span>
|
|
|
+ <span slot="photoComment" slot-scope="photoComment"> {{photoComment|formatCurrency}}</span>
|
|
|
+ <span slot="photoLike" slot-scope="photoLike"> {{photoLike|formatCurrency}}</span>
|
|
|
+ <span slot="follow" slot-scope="follow"> {{follow|formatCurrency}}</span>
|
|
|
+ <span slot="report" slot-scope="report"> {{report|formatCurrency}}</span>
|
|
|
+ <span slot="cancelFollow" slot-scope="cancelFollow"> {{cancelFollow|formatCurrency}}</span>
|
|
|
+ <span slot="block" slot-scope="block"> {{block|formatCurrency}}</span>
|
|
|
+ <span slot="nagative" slot-scope="nagative"> {{nagative|formatCurrency}}</span>
|
|
|
+ <span slot="downloadStarted" slot-scope="downloadStarted"> {{downloadStarted|formatCurrency}}</span>
|
|
|
+ <span slot="downloadCompleted" slot-scope="downloadCompleted"> {{downloadCompleted|formatCurrency}}</span>
|
|
|
+ <span slot="downloadCompleted" slot-scope="downloadCompleted"> {{downloadCompleted|formatCurrency}}</span>
|
|
|
+
|
|
|
+
|
|
|
+ <span slot="photoClickRatio" slot-scope="photoClickRatio"> {{photoClickRatio|toPercentage}}</span>
|
|
|
+ <span slot="actionRate" slot-scope="actionRate"> {{actionRate|toPercentage}}</span>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import moment from 'moment'
|
|
|
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
|
|
|
+import { JeecgListMixin } from '@/mixins/ipagination'
|
|
|
+const publicColumns=[
|
|
|
+ {
|
|
|
+ title: '消耗',
|
|
|
+ dataIndex: 'charge',
|
|
|
+ scopedSlots: { customRender: 'charge' },
|
|
|
+ align:'center',
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '封面曝光数',
|
|
|
+ dataIndex: 'photoShow',
|
|
|
+ scopedSlots: { customRender: 'photoShow' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '封面点击数',
|
|
|
+ dataIndex: 'photoClick',
|
|
|
+ scopedSlots: { customRender: 'photoClick' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '素材曝光数',
|
|
|
+ dataIndex: 'aclick',
|
|
|
+ scopedSlots: { customRender: 'aclick' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '行为数',
|
|
|
+ dataIndex: 'bclick',
|
|
|
+ scopedSlots: { customRender: 'bclick' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '激活数',
|
|
|
+ dataIndex: 'activation',
|
|
|
+ scopedSlots: { customRender: 'activation' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '注册数',
|
|
|
+ dataIndex: 'eventRegister',
|
|
|
+ scopedSlots: { customRender: 'eventRegister' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '提交按钮点击数',
|
|
|
+ dataIndex: 'submit',
|
|
|
+ scopedSlots: { customRender: 'submit' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '次日留存数',
|
|
|
+ dataIndex: 'eventNextDayStay',
|
|
|
+ scopedSlots: { customRender: 'eventNextDayStay' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '次日留存成本',
|
|
|
+ dataIndex: 'eventNextDayStayCost',
|
|
|
+ scopedSlots: { customRender: 'eventNextDayStayCost' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '激活成本',
|
|
|
+ dataIndex: 'activationCost',
|
|
|
+ scopedSlots: { customRender: 'activationCost' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '封面点击率',
|
|
|
+ dataIndex: 'photoClickRatio',
|
|
|
+ scopedSlots: { customRender: 'photoClickRatio' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '行为率 ',
|
|
|
+ dataIndex: 'actionRate',
|
|
|
+ scopedSlots: { customRender: 'actionRate' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '均千次封面曝光花费',
|
|
|
+ dataIndex: 'impression1kCost',
|
|
|
+ scopedSlots: { customRender: 'impression1kCost' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '平均封面点击单价',
|
|
|
+ dataIndex: 'photoClickCost',
|
|
|
+ scopedSlots: { customRender: 'photoClickCost' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '平均行为单价',
|
|
|
+ dataIndex: 'actionCost',
|
|
|
+ scopedSlots: { customRender: 'actionCost' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '分享数',
|
|
|
+ dataIndex: 'photoShare',
|
|
|
+ scopedSlots: { customRender: 'photoShare' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '评论数',
|
|
|
+ dataIndex: 'photoComment',
|
|
|
+ scopedSlots: { customRender: 'photoComment' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '点赞数',
|
|
|
+ dataIndex: 'photoLike',
|
|
|
+ scopedSlots: { customRender: 'photoLike' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '新增关注数',
|
|
|
+ dataIndex: 'follow',
|
|
|
+ scopedSlots: { customRender: 'follow' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '举报数',
|
|
|
+ dataIndex: 'report',
|
|
|
+ scopedSlots: { customRender: 'report' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '取消关注数',
|
|
|
+ dataIndex: 'cancelFollow',
|
|
|
+ scopedSlots: { customRender: 'cancelFollow' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '拉黑数',
|
|
|
+ dataIndex: 'block',
|
|
|
+ scopedSlots: { customRender: 'block' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '减少此类作品数',
|
|
|
+ dataIndex: 'nagative',
|
|
|
+ scopedSlots: { customRender: 'nagative' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '安卓下载开始数',
|
|
|
+ dataIndex: 'downloadStarted',
|
|
|
+ scopedSlots: { customRender: 'downloadStarted' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '安卓下载完成数',
|
|
|
+ dataIndex: 'downloadCompleted',
|
|
|
+ scopedSlots: { customRender: 'downloadCompleted' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+const projectColumns = [
|
|
|
+ {
|
|
|
+ title: '项目名称',
|
|
|
+ dataIndex: 'projectName',
|
|
|
+ width: 200,
|
|
|
+ align:'center',
|
|
|
+ scopedSlots: { customRender: 'projectName' },
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '广告主',
|
|
|
+ dataIndex: 'advertiserName',
|
|
|
+ width: 200,
|
|
|
+ align:'center',
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '运营负责人',
|
|
|
+ dataIndex: 'responsibleName',
|
|
|
+ scopedSlots: { customRender: 'responsibleName' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设计负责人',
|
|
|
+ dataIndex: 'designResponsibleName',
|
|
|
+ scopedSlots: { customRender: 'designResponsibleName' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '时间',
|
|
|
+ dataIndex: 'statDate',
|
|
|
+ width:200,
|
|
|
+ scopedSlots: { customRender: 'statDate' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+const accountColumns = [
|
|
|
+ {
|
|
|
+ title: '账户名称',
|
|
|
+ dataIndex: 'authNAme',
|
|
|
+ width: 200,
|
|
|
+ align:'center',
|
|
|
+ scopedSlots: { customRender: 'authNAme' },
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '账户id',
|
|
|
+ dataIndex: 'accountId',
|
|
|
+ align:'center',
|
|
|
+ scopedSlots: { customRender: 'accountId' },
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '项目名称',
|
|
|
+ dataIndex: 'projectName',
|
|
|
+ width: 200,
|
|
|
+ align:'center',
|
|
|
+ scopedSlots: { customRender: 'projectName' },
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '时间',
|
|
|
+ dataIndex: 'statDate',
|
|
|
+ width:200,
|
|
|
+ scopedSlots: { customRender: 'statDate' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+
|
|
|
+]
|
|
|
+
|
|
|
+const campaignColumns = [
|
|
|
+ {
|
|
|
+ title: '广告计划名称',
|
|
|
+ dataIndex: 'campaignName',
|
|
|
+ width: 200,
|
|
|
+ align:'center',
|
|
|
+ scopedSlots: { customRender: 'campaignName' },
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '广告计划id',
|
|
|
+ dataIndex: 'campaignId',
|
|
|
+ align:'center',
|
|
|
+ scopedSlots: { customRender: 'campaignId' },
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '账户名称',
|
|
|
+ dataIndex: 'authNAme',
|
|
|
+ width: 200,
|
|
|
+ align:'center',
|
|
|
+ scopedSlots: { customRender: 'authNAme' },
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '时间',
|
|
|
+ dataIndex: 'statDate',
|
|
|
+ width:200,
|
|
|
+ scopedSlots: { customRender: 'statDate' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+]
|
|
|
+
|
|
|
+const unitColumns = [
|
|
|
+ {
|
|
|
+ title: '广告组名称',
|
|
|
+ dataIndex: 'campaignId',
|
|
|
+ align:'center',
|
|
|
+ scopedSlots: { customRender: 'campaignId' },
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '广告组id',
|
|
|
+ dataIndex: 'campaignId',
|
|
|
+ align:'center',
|
|
|
+ scopedSlots: { customRender: 'campaignId' },
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '计划名称',
|
|
|
+ dataIndex: 'campaignName',
|
|
|
+ width: 200,
|
|
|
+ align:'center',
|
|
|
+ scopedSlots: { customRender: 'campaignName' },
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '时间',
|
|
|
+ dataIndex: 'statDate',
|
|
|
+ width:200,
|
|
|
+ scopedSlots: { customRender: 'statDate' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+]
|
|
|
+
|
|
|
+const ideaColumns = [
|
|
|
+ {
|
|
|
+ title: '创意',
|
|
|
+ dataIndex: 'coverUrl',
|
|
|
+ align:'center',
|
|
|
+ scopedSlots: { customRender: 'coverUrl' },
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '广告组名称',
|
|
|
+ dataIndex: 'campaignId',
|
|
|
+ align:'center',
|
|
|
+ scopedSlots: { customRender: 'campaignId' },
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '时间',
|
|
|
+ dataIndex: 'statDate',
|
|
|
+ width:200,
|
|
|
+ scopedSlots: { customRender: 'statDate' },
|
|
|
+ align:'center',
|
|
|
+ },
|
|
|
+
|
|
|
+]
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ export default {
|
|
|
+ mixins:[JeecgListMixin],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dateRange:[moment().subtract(1,'days'),moment()],
|
|
|
+ projectData:[],
|
|
|
+ tableData:[],
|
|
|
+ columns:[...projectColumns,...publicColumns],
|
|
|
+ loading:false,
|
|
|
+ tabKey:1,
|
|
|
+ currentid:undefined
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //table的改变(页码改变请求数据,也可以写排序)
|
|
|
+ tableChange(pagination, filters, sorter, { currentDataSource }){
|
|
|
+ // this.searchHandle();
|
|
|
+ },
|
|
|
+ projectChange(val){
|
|
|
+ console.log(val)
|
|
|
+ },
|
|
|
+ dateChange(date,dateString){
|
|
|
+ console.log(data,dateString)
|
|
|
+ },
|
|
|
+ // tab切换事件
|
|
|
+ tabKeyChange(key){
|
|
|
+ console.log(key)
|
|
|
+ if(key==1){
|
|
|
+ this.getTableProjectList()
|
|
|
+ }else if(key==2){
|
|
|
+ this.getTableAccountList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // x项目的table值
|
|
|
+ getTableProjectList(){
|
|
|
+ this.loading=true;
|
|
|
+ this.tabKey=1;
|
|
|
+ this.loading=true;
|
|
|
+ this.columns= [...projectColumns,...publicColumns]
|
|
|
+ postAction('/kuaishou/getKuaishouProjectInfo',{
|
|
|
+ startDate:this.dateRange[0].format('YYYY-MM-DD'),
|
|
|
+ endDate:this.dateRange[1].format('YYYY-MM-DD'),
|
|
|
+ projectList:[],
|
|
|
+ pageNum:'0',
|
|
|
+ pageSize:'10'
|
|
|
+ }).then(res=>{
|
|
|
+ console.log(res);
|
|
|
+ if(res.success){
|
|
|
+ this.loading=false;
|
|
|
+ res.result.forEach((item,index)=>{
|
|
|
+ item.key=index
|
|
|
+ })
|
|
|
+ this.tableData=res.result;
|
|
|
+ // this.ipagination.total=res.result.total
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 从项目跳转到账户,并获取账户的table值
|
|
|
+ goAccount(records){
|
|
|
+ console.log(records);
|
|
|
+ this.currentid=records.projectId
|
|
|
+ this.getTableProjectList()
|
|
|
+
|
|
|
+ },
|
|
|
+ getTableAccountList(){
|
|
|
+ this.tabKey=2;
|
|
|
+ this.loading=true;
|
|
|
+ this.columns= [...accountColumns,...publicColumns]
|
|
|
+ postAction('/kuaishou/getKuaishouAccountInfoByProjectId',{
|
|
|
+ startDate:this.dateRange[0].format('YYYY-MM-DD'),
|
|
|
+ endDate:this.dateRange[1].format('YYYY-MM-DD'),
|
|
|
+ projectId:this.currentid,
|
|
|
+ pageNum:'0',
|
|
|
+ pageSize:'10'
|
|
|
+ }).then(res=>{
|
|
|
+ console.log(res)
|
|
|
+ if(res.success){
|
|
|
+ this.loading=false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // /ctop/projectMember/participateList
|
|
|
+ // var arr = this.request.split(',')
|
|
|
+ // var dataTwo = []
|
|
|
+ // var data = res.result.filter(item => {
|
|
|
+ // return item.mediaId == arr[0]
|
|
|
+ // })
|
|
|
+ // if (arr.length > 1) {
|
|
|
+ // dataTwo = res.result.filter(item => {
|
|
|
+ // return item.mediaId == arr[1]
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ getAction('/ctop/projectMember/getOwnProjects',{
|
|
|
+ mediaIds:[2,4],
|
|
|
+ }).then(res=>{
|
|
|
+ console.log(res)
|
|
|
+ });
|
|
|
+ console.log(this.dateRange)
|
|
|
+ this.getTableProjectList();
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ toPercentage(val) {
|
|
|
+ if(val){
|
|
|
+ if(typeof val != 'string'){
|
|
|
+ return (val * 100).toFixed(2) + '%'
|
|
|
+ }else{
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ }else if(typeof val =='string'){
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ return 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //保留两位小数并且变成货币格式
|
|
|
+ decimalsHandle(val){
|
|
|
+
|
|
|
+ if(val && typeof val !='string'){
|
|
|
+ if(val>=0){
|
|
|
+ val=parseFloat(val).toFixed(2);
|
|
|
+ let numberStr = val.toString()
|
|
|
+ let str = numberStr.split('.')
|
|
|
+
|
|
|
+ let str0=str[0].split('').reverse();
|
|
|
+ for (let i = 0; i < str0.length; i++) {
|
|
|
+ if ((i + 1) % 4 === 0) {
|
|
|
+ str0.splice(i, 0, ',')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ str0.reverse()
|
|
|
+ let handleResult = ''
|
|
|
+ for (let j = 0; j < str0.length; j++) {
|
|
|
+ handleResult += str0[j]
|
|
|
+ }
|
|
|
+
|
|
|
+ return handleResult+'.'+str[1]
|
|
|
+ }else{
|
|
|
+ val=parseFloat(val).toFixed(2);
|
|
|
+ let numberStr = val.toString()
|
|
|
+ let str = numberStr.split('.')
|
|
|
+
|
|
|
+ let str0=str[0].substr(1).split('').reverse();
|
|
|
+ for (let i = 0; i < str0.length; i++) {
|
|
|
+ if ((i + 1) % 4 === 0) {
|
|
|
+ str0.splice(i, 0, ',')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ str0.reverse()
|
|
|
+ let handleResult = ''
|
|
|
+ for (let j = 0; j < str0.length; j++) {
|
|
|
+ handleResult += str0[j]
|
|
|
+ }
|
|
|
+
|
|
|
+ return '-'+handleResult+'.'+str[1]
|
|
|
+ }
|
|
|
+
|
|
|
+ }else if(typeof val =='string'){
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ return 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //变成货币格式
|
|
|
+ formatCurrency(val){
|
|
|
+ if((val||val==0)&& typeof val !='string'){
|
|
|
+ let numberStr = val.toString()
|
|
|
+ let str = numberStr.split('').reverse()
|
|
|
+ for (let i = 0; i < str.length; i++) {
|
|
|
+ if ((i + 1) % 4 === 0) {
|
|
|
+ str.splice(i, 0, ',')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ str.reverse()
|
|
|
+ let handleResult = ''
|
|
|
+ for (let j = 0; j < str.length; j++) {
|
|
|
+ handleResult += str[j]
|
|
|
+ }
|
|
|
+ return handleResult
|
|
|
+ }else if(typeof val =='string'){
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ return '-'
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="less">
|
|
|
+.resize-table-th {
|
|
|
+ position: relative;
|
|
|
+ .table-draggable-handle {
|
|
|
+ height: 100% !important;
|
|
|
+ bottom: 0;
|
|
|
+ left: auto !important;
|
|
|
+ right: -5px;
|
|
|
+ cursor: col-resize;
|
|
|
+ touch-action: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.effectPage{
|
|
|
+ .moduler {
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ position: relative;
|
|
|
+ padding: 32px 24px 48px 32px;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
|
|
|
+ .opt{
|
|
|
+ position: absolute;
|
|
|
+ top: 32px ;
|
|
|
+ right: 24px;
|
|
|
+ }
|
|
|
+ .moduler-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: 'center';
|
|
|
+ font-size: 22px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .row-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: 'center';
|
|
|
+ margin-bottom: 32px;
|
|
|
+ }
|
|
|
+ .row-item:last-of-type {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .row-item .hint-item {
|
|
|
+ width: 24px;
|
|
|
+ min-width: 24px;
|
|
|
+ align-self: flex-start;
|
|
|
+ line-height: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ .row-item .label-item {
|
|
|
+ position: relative;
|
|
|
+ align-items: flex-start;
|
|
|
+ align-self: flex-start;
|
|
|
+ line-height: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-top: 7px;
|
|
|
+ width: 80px;
|
|
|
+ min-width: 80px;
|
|
|
+ .text-item {
|
|
|
+ font-size: 14px;
|
|
|
+ width: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .row-item .required-item {
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: #f45858;
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ .row-item .input-item {
|
|
|
+ min-width: 480px;
|
|
|
+ position: relative;
|
|
|
+ // height: 35px;
|
|
|
+ .tip {
|
|
|
+ font-size: 12px;
|
|
|
+ color: tomato;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tableBody{
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|