开发静态页面

.idea/workspace.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="326b77ef-a0bc-4d8a-bd1c-34c4541ee400" name="Changes" comment="">
+      <change afterPath="$PROJECT_DIR$/project/src/components/dataBoard/playletFansActTrend.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/project/src/components/dataBoard/thePublicTrend.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/project/src/router/allRouter.js" beforeDir="false" afterPath="$PROJECT_DIR$/project/src/router/allRouter.js" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="Vue Single File Component" />
+      </list>
+    </option>
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="GitSEFilterConfiguration">
+    <file-type-list>
+      <filtered-out-file-type name="LOCAL_BRANCH" />
+      <filtered-out-file-type name="REMOTE_BRANCH" />
+      <filtered-out-file-type name="TAG" />
+      <filtered-out-file-type name="COMMIT_BY_MESSAGE" />
+    </file-type-list>
+  </component>
+  <component name="ProjectId" id="28Q2iXOGC8uIIgXdokLl2xoSuGY" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showExcludedFiles" value="false" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">
+    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
+    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/project/src/components/dataBoard" />
+    <property name="nodejs_package_manager_path" value="npm" />
+    <property name="ts.external.directory.path" value="C:\Program Files (x86)\webstorm\WebStorm 2021.2.1\plugins\JavaScriptLanguage\jsLanguageServicesImpl\external" />
+    <property name="vue.rearranger.settings.migration" value="true" />
+  </component>
+  <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\projectCode\playlet\project\src\components\dataBoard" />
+      <recent name="C:\projectCode\playlet\project\src\components\detials" />
+    </key>
+  </component>
+  <component name="RunManager">
+    <configuration name="dev" type="js.build_tools.npm" nameIsGenerated="true">
+      <package-json value="$PROJECT_DIR$/project/package.json" />
+      <command value="run" />
+      <scripts>
+        <script value="dev" />
+      </scripts>
+      <node-interpreter value="project" />
+      <envs />
+      <method v="2" />
+    </configuration>
+  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="326b77ef-a0bc-4d8a-bd1c-34c4541ee400" name="Changes" comment="" />
+      <created>1651134619686</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1651134619686</updated>
+      <workItem from="1651134622442" duration="12757000" />
+      <workItem from="1651197530707" duration="20257000" />
+      <workItem from="1651715435371" duration="498000" />
+      <workItem from="1651720937846" duration="3607000" />
+      <workItem from="1651801746039" duration="13012000" />
+      <workItem from="1651888568336" duration="927000" />
+      <workItem from="1651894000029" duration="4978000" />
+      <workItem from="1652061471731" duration="10722000" />
+      <workItem from="1652166348383" duration="10980000" />
+      <workItem from="1652234936568" duration="14227000" />
+      <workItem from="1652406821567" duration="7210000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+  <component name="Vcs.Log.Tabs.Properties">
+    <option name="TAB_STATES">
+      <map>
+        <entry key="MAIN">
+          <value>
+            <State />
+          </value>
+        </entry>
+      </map>
+    </option>
+    <option name="oldMeFiltersMigrated" value="true" />
+  </component>
+</project>

project/src/components/dataBoard/playletFansActTrend.vue

+<template>
+  <div v-loading="loading">
+    <div class="screenBox flex" style="padding-left: 10px">
+      <div class="flex">
+        <self-channel title="公众号名称" type='thePublic' @channelDefine="(val)=>{account_id = val;init(1)}"></self-channel>
+        <date-picker title="起止时间" :quickFlag='false' :afferent_time="default_time" :clearFlag='false' @changeTime="changeTime"></date-picker>
+      </div>
+      <el-button type="primary" size="mini" @click="init(1,'export')">导出Excel</el-button>
+    </div>
+    <ux-grid ref="plxTable"
+             :border="false"
+             @row-click="()=>{return}"
+             :header-cell-style="()=>{return { backgroundColor: '#FFFFFF !important', border: 'none!important' }}"
+             :height="height"
+             show-footer-overflow="tooltip"
+             show-overflow="tooltip"
+             class="tMar10"
+             size="mini">
+      <ux-table-column
+        v-for="item in desCol"
+        :key="item.prop"
+        :resizable="true"
+        :field="item.prop"
+        :title="item.label"
+        :min-width="item.min_width?item.min_width:120"
+        :fixed="item.fixed?item.fixed:''"
+        align="center">
+        <template #header>
+          <div
+            :class="['flex-align-jus-center',item.sort?'pointer':'',sort_field==item.prop?'sortFieldStyle':'']"
+            @click="item.sort?sortFieldEvent(item.prop):''">
+            {{item.label}}
+            <i class="el-icon-caret-bottom" v-if="item.sort"></i>
+            <el-tooltip v-if="item.notes" :content="item.notes" placement="top">
+              <div><i class="el-icon-question"></i></div>
+            </el-tooltip>
+          </div>
+        </template>
+        <template v-slot="{ row }">
+          <span :class="sort_field==item.prop?'sortFieldStyle':''">{{row[item.prop]||row[item.prop]==0?$formatNum(row[item.prop]):'-' }}</span>
+        </template>
+      </ux-table-column>
+    </ux-grid>
+    <div class="pagination" v-show="total>0">
+      <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import datePicker from '@/components/assembly/screen/datePicker.vue'
+import selfChannel from '@/components/assembly/screen/channel.vue'
+export default {
+  components: { datePicker, selfChannel },
+  data () {
+    return {
+      loading: false,
+      page: 1,
+      pages: 0,
+      total: 0,
+      page_size: 20,
+      sort_field: 'charge_total',
+      default_time: [this.$getDay(-7, false), this.$getDay(0, false)],
+      time: [],
+      account_id: '',
+      height: '',
+      desCol: [
+        { prop: "account_name", label: "时间", fixed: 'left' },
+        { prop: "account_name", label: "公众号", fixed: 'left' },
+        { prop: "promoter_name", label: "当天消耗" },
+        { prop: "start_paid", label: "当日新用户累计充值" },
+        { prop: "end_paid", label: "回本率(%)" },
+        { prop: 'paid_total', label: "企微关注数",  },
+        { prop: 'charge_total', label: "企微关注成本",  },
+        { prop: 'margin_rate', label: "首日用户成本",  notes: '首日用户成本=当天消耗/当天充值人数' },
+        { prop: 'cost_recovery_rate', label: "累计用户成本", notes: '累计用户成本=当天消耗/累计充值人数' },
+      ]
+    }
+  },
+  created () {
+    this.time = this.default_time
+    this.height = document.documentElement.clientHeight - 220 > 400 ? document.documentElement.clientHeight - 220 : 400
+    this.init(1)
+  },
+  methods: {
+    changeTime (time) {//筛选时间变化
+      if (!time || time && time.length == 0) {
+        this.time = []
+      } else {
+        this.time = time
+      }
+      this.init(1)
+    },
+    init (page, type) {
+      if (type != 'export') {
+        this.page = page ? page : this.page;
+      } else {
+        if (this.total == 0) {
+          this.$message({
+            message: '暂无数据可导出',
+            type: "warning"
+          })
+          return
+        }
+      }
+      this.loading = true
+      this.$axios.get(this.URL.BASEURL + this.URL.statistics_wechatAccountData, {
+        params: {
+          sort_field: this.sort_field,
+          start_date: this.time[0],
+          end_date: this.time[1],
+          account_id: this.account_id,
+          page: type == 'export' ? 1 : this.page,
+          page_size: type == 'export' ? this.$store.state.exportNumber : this.page_size,
+        }
+      }).then((res) => {
+        var res = res.data
+        this.loading = false
+        if (res && res.errno == 0) {
+          if (type == 'export') {
+            this.exportEvent(res.rst.data.list)
+          } else {
+            this.datas = res.rst.data.list // 知道为啥datas不在 data()方法里面定义吗？嘻嘻
+            this.$refs.plxTable.reloadData(this.datas)
+            this.total = res.rst.pageInfo.total;
+            this.pages = res.rst.pageInfo.pages;
+          }
+        } else if (res.errno != 4002) {
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        }
+      }).catch((err) => {
+        this.loading = false
+      });
+    },
+    handleCurrentChange (val) {
+      this.init(val)
+    },
+    sortFieldEvent (type) {
+      this.sort_field = type;
+      this.init(1)
+    },
+    exportEvent (data) {
+      let list = data;
+      let tHeader = this.desCol.map((v) => {
+        return v.label;
+      })
+      let filterVal = this.desCol.map((v) => {
+        return v.prop;
+      })
+      let excelDatas = [
+        {
+          tHeader: tHeader, // sheet表一头部
+          filterVal: filterVal, // 表一的数据字段
+          tableDatas: list, // 表一的整体json数据
+          sheetName: ''// 表一的sheet名字
+        }
+      ]
+      this.$exportOrder({ excelDatas, name: `公众号数据（导出时间：${this.$getDay(0)}）` })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.screenBox {
+  background: #fff;
+  padding: 5px 20px;
+}
+</style>

project/src/components/dataBoard/thePublicTrend.vue

+<template>
+  <div v-loading="loading">
+    <div class="screenBox flex">
+      <div class="flex">
+        <date-picker title="自定义" :quickFlag='true' :afferent_time="default_time" :clearFlag='false' @changeTime="changeTime"></date-picker>
+        <self-channel title="公众号" type='thePublic' @channelDefine="(val)=>{account_id = val;init(1)}"></self-channel>
+      </div>
+      <el-button type="primary" size="mini" @click="init(1,'export')">导出Excel</el-button>
+    </div>
+    <div class="dataInfoBox">
+      <div class="dataInfoItem" v-for="(item,index) in dataInfoArrs" :key="index">
+        <div class="dataItemTitle">
+          <img src="@/assets/img/icon/累计消耗@2x.png" style="height:14px" class="titleIcon" alt="">
+          <span>{{item.label}}</span>
+        </div>
+        <div class="dataItem-data">{{dataInfo&&(dataInfo[item.prop]||dataInfo[item.prop]==0)?$formatNum(dataInfo[item.prop]):'-'}}</div>
+      </div>
+    </div>
+    <ux-grid ref="plxTable" :border="false" @row-click="()=>{return}" :header-cell-style="()=>{return { backgroundColor: '#FFFFFF !important', border: 'none!important' }}" :height="height" show-footer-overflow="tooltip" show-overflow="tooltip" size="mini">
+      <ux-table-column v-for="item in desCol" :key="item.prop" :resizable="true" :field="item.prop" :title="item.label" :min-width="item.min_width?item.min_width:120" :fixed="item.fixed?item.fixed:''" align="center">
+        <template #header>
+          <div :class="['flex-align-jus-center',item.sort?'pointer':'',sort_field==item.prop?'sortFieldStyle':'']" @click="item.sort?sortFieldEvent(item.prop):''">{{item.label}}<i class="el-icon-caret-bottom" v-if="item.sort"></i>
+            <el-tooltip v-if="item.notes" :content="item.notes" placement="top">
+              <div><i class="el-icon-question"></i></div>
+            </el-tooltip>
+          </div>
+        </template>
+        <template v-slot="{ row }">
+          <span :class="sort_field==item.prop?'sortFieldStyle':''">{{row[item.prop]||row[item.prop]==0?$formatNum(row[item.prop]):'-' }}</span>
+        </template>
+      </ux-table-column>
+    </ux-grid>
+    <div class="pagination" v-show="total>0">
+      <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import datePicker from '@/components/assembly/screen/datePicker.vue'
+import selfChannel from '@/components/assembly/screen/channel.vue'
+export default {
+  components: { datePicker, selfChannel },
+  data () {
+    return {
+      loading: false,
+      page: 1,
+      pages: 0,
+      total: 0,
+      page_size: 20,
+      sort_field: 'charge_total',
+      dataInfoArrs:[
+        {
+          prop:'',
+          label:'首日ROI',
+        },
+        {
+          prop:'',
+          label:'当天总消耗',
+        },
+        {
+          prop:'',
+          label:'企微关注数',
+        },
+        {
+          prop:'',
+          label:'企微关注成本',
+        },
+        {
+          prop:'',
+          label:'当日总回收',
+        },
+        {
+          prop:'',
+          label:'累计充值金额',
+        },
+        {
+          prop:'',
+          label:'新增用户',
+        },
+        {
+          prop:'',
+          label:'回本率',
+        },
+        {
+          prop:'',
+          label:'充值人数',
+        },
+        {
+          prop:'',
+          label:'总充值人数',
+        },
+        {
+          prop:'',
+          label:'充值次数',
+        },
+        {
+          prop:'',
+          label:'总充值次数',
+        },
+        {
+          prop:'',
+          label:'充值用户成本',
+        },
+      ],
+      dataInfo: {},
+      default_time: [this.$getDay(-7, false), this.$getDay(0, false)],
+      time: [],
+      account_id: '',
+      height: '',
+      desCol: [
+        { prop: "account_name", label: "时间", fixed: 'left' },
+        { prop: "account_name", label: "公众号", fixed: 'left' },
+        { prop: "promoter_name", label: "首日ROI" },
+        { prop: "start_paid", label: "当天消耗" },
+        { prop: "end_paid", label: "企微关注数" },
+        { prop: 'paid_total', label: "企微关注成本", },
+        { prop: 'charge_total', label: "当日回收",  },
+        { prop: 'margin_rate', label: "累计充值金额", },
+        { prop: 'cost_recovery_rate', label: "新增用户",  },
+        { prop: 'follow_total', label: "回本率(%)", },
+        { prop: 'average_follow_paid', label: "充值人数",},
+        { prop: 'charge_user_total', label: "总充值人数",  },
+        { prop: 'charge_transform', label: "充值次数",  },
+        { prop: 'charge_transform_cost', label: "总充值次数",  },
+        { prop: 'today', label: "充值用户成本", notes:'充值用户成本=当天消耗/充值人数' },
+      ]
+    }
+  },
+  created () {
+    this.time = this.default_time
+    this.height = document.documentElement.clientHeight - 350 > 400 ? document.documentElement.clientHeight - 350 : 400
+    this.init(1)
+  },
+  methods: {
+    changeTime (time) {//筛选时间变化
+      if (!time || time && time.length == 0) {
+        this.time = []
+      } else {
+        this.time = time
+      }
+      this.init(1)
+    },
+    init (page, type) {
+      if (type != 'export') {
+        this.page = page ? page : this.page;
+      } else {
+        if (this.total == 0) {
+          this.$message({
+            message: '暂无数据可导出',
+            type: "warning"
+          })
+          return
+        }
+      }
+      this.loading = true
+      this.$axios.get(this.URL.BASEURL + this.URL.statistics_wechatAccountData, {
+        params: {
+          sort_field: this.sort_field,
+          start_date: this.time[0],
+          end_date: this.time[1],
+          account_id: this.account_id,
+          page: type == 'export' ? 1 : this.page,
+          page_size: type == 'export' ? this.$store.state.exportNumber : this.page_size,
+        }
+      }).then((res) => {
+        var res = res.data
+        this.loading = false
+        if (res && res.errno == 0) {
+          if (type == 'export') {
+            this.exportEvent(res.rst.data.list)
+          } else {
+            this.datas = res.rst.data.list // 知道为啥datas不在 data()方法里面定义吗？嘻嘻
+            this.$refs.plxTable.reloadData(this.datas)
+            this.dataInfo = res.rst.data.total;
+            this.total = res.rst.pageInfo.total;
+            this.pages = res.rst.pageInfo.pages;
+          }
+        } else if (res.errno != 4002) {
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        }
+      }).catch((err) => {
+        this.loading = false
+      });
+    },
+    handleCurrentChange (val) {
+      this.init(val)
+    },
+    sortFieldEvent (type) {
+      this.sort_field = type;
+      this.init(1)
+    },
+    exportEvent (data) {
+      let list = data;
+      let tHeader = this.desCol.map((v) => {
+        return v.label;
+      })
+      let filterVal = this.desCol.map((v) => {
+        return v.prop;
+      })
+      let excelDatas = [
+        {
+          tHeader: tHeader, // sheet表一头部
+          filterVal: filterVal, // 表一的数据字段
+          tableDatas: list, // 表一的整体json数据
+          sheetName: ''// 表一的sheet名字
+        }
+      ]
+      this.$exportOrder({ excelDatas, name: `公众号数据（导出时间：${this.$getDay(0)}）` })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.screenBox {
+  background: #fff;
+  padding: 5px 20px;
+}
+.dataInfoBox {
+  display: flex;
+  margin-top: 10px;
+  flex-wrap: wrap;
+  .dataInfoItem {
+    background: #ffffff;
+    border-radius: 8px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    padding: 0 19px;
+    height: 70px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .dataItemTitle {
+      display: flex;
+      align-items: center;
+      color: #6f6f6f;
+      font-size: 13px;
+      line-height: 17px;
+      font-weight: bold;
+      .titleIcon {
+        height: 16px;
+        margin-right: 4px;
+      }
+    }
+    .dataItem-data {
+      color: #000000;
+      font-size: 19px;
+      line-height: 28px;
+      font-weight: bold;
+      margin-top: 2px;
+    }
+  }
+}
+</style>

project/src/router/allRouter.js

 const dramaManage = () => import(/* webpackChunkName: 'dramaManage' */ '@/components/dataBoard/dramaManage.vue')
 const charge = () => import(/* webpackChunkName: 'charge' */ '@/components/orderManage/charge.vue')
 const wxAccountList = () => import(/* webpackChunkName: 'wxAccountList' */ '@/components/dataBoard/wxAccount/list.vue')
+const thePublicTrend = () => import(/* webpackChunkName: 'thePublicTrend' */ '@/components/dataBoard/thePublicTrend.vue')
+const playletFansActTrend = () => import(/* webpackChunkName: 'playletFansActTrend' */ '@/components/dataBoard/playletFansActTrend.vue')
 
 // name与菜单配置的页面路由一致
 // meta下isData:true为数据看板,否则为助手
         }
       },
       {
+        path: 'thePublicTrend',
+        name: 'thePublicTrend',
+        component: thePublicTrend,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '公众号数据趋势',
+          isData: true
+        }
+      },
+      {
+        path: 'playletFansActTrend',
+        name: 'playletFansActTrend',
+        component: playletFansActTrend,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '短剧粉丝激活趋势',
+          isData: true
+        }
+      },
+      {
         path: 'playletData',
         name: 'playletData',
         component: playletData,