tools项目-在线指数还原工具

htmldev/TBTools/src/assets/scss/_base.scss

@@ -138,7 +138,7 @@ img {
   right: 0;
   left: 0;
   z-index: 1030;
-  height: 80px;
+  height: 60px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
   background-color: $navbar--background-color;
 

htmldev/TBTools/src/router/index.js

@@ -41,6 +41,18 @@ const mainRoutes = {
       component: _import('modules/tools/tools-analyze'),
       name: 'toolsAnalyze',
       meta: { title: '竞品透析' }
+    },
+    {
+      path: '/tools-credit',
+      component: _import('modules/tools/tools-credit'),
+      name: 'toolsCredit',
+      meta: { title: '淘宝极速验号，淘宝买家信誉在线查询，只需输入买家旺旺号，即可全方位稽查恶意退单、敲诈、打假师、差评师等。' }
+    },
+    {
+      path: '/tools-online',
+      component: _import('modules/tools/tools-online'),
+      name: 'toolsOnline',
+      meta: { title: '指数转化' }
     }
   ],
   beforeEnter (to, from, next) {

htmldev/TBTools/src/views/modules/tools/index.vue

@@ -13,7 +13,7 @@
       <el-card shadow="always">
         <h3>旺旺透视</h3>
         <p>查询淘宝账号是不是淘宝黑号，信誉等级、评价、实名、淘龄等信息。</p>
-        <router-link :to="{name: 'toolsAnalyze'}">
+        <router-link :to="{name: 'toolsCredit'}">
           <el-button type="primary">立即体验</el-button>
         </router-link>
       </el-card>
@@ -22,7 +22,7 @@
       <el-card shadow="always">
         <h3>指数转换</h3>
         <p>生意参谋交易指数转换为交易金额，支付转化率指数转换为 支付转化率等</p>
-        <router-link :to="{name: 'toolsAnalyze'}">
+        <router-link :to="{name: 'toolsOnline'}">
           <el-button type="primary">立即体验</el-button>
         </router-link>
       </el-card>

htmldev/TBTools/src/views/modules/tools/tools-credit.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>tools-credit</div>
+</template>
+
+<script>
+export default {
+  name: 'toolsCredit'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

htmldev/TBTools/src/views/modules/tools/tools-online.vue

@@ -0,0 +1,341 @@
+<template>
+  <div>
+    <h2>在线指数还原工具</h2>
+    <el-tabs class="mt-20" v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane label="单项计算" name="first">
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+          <el-menu-item :index="index.toString()" v-for="(item, index) in menuData" :key="index">{{ item.title }}
+          </el-menu-item>
+        </el-menu>
+        <el-row class="mt-40">
+          <el-col :span="10">
+            <div class="TT-header">
+              <p>{{ menuData[activeIndex * 1].title }}</p>
+              <el-button type="primary" plain @click="handleClearBeforeValue">清除数据</el-button>
+            </div>
+            <el-input
+              class="mt-20"
+              type="textarea"
+              :rows="10"
+              placeholder="请输入内容"
+              v-model="menuData[activeIndex * 1].beforeValue">
+            </el-input>
+          </el-col>
+          <el-col class="mt-160" :span="2" :offset="1">
+            <el-button type="primary">立即换算</el-button>
+          </el-col>
+          <el-col :span="10" :offset="1">
+            <div class="TT-header">
+              <p>{{ menuData[activeIndex * 1].afterLabel }}</p>
+              <el-button type="primary" plain @click="handleClearAfterValue">清除数据</el-button>
+            </div>
+            <el-input
+              class="mt-20"
+              type="textarea"
+              :rows="10"
+              placeholder=""
+              disabled
+              v-model="menuData[activeIndex * 1].afterValue">
+            </el-input>
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+      <el-tab-pane label="组合计算" name="second">
+        <el-row class="mt-40">
+          <el-col :span="7">
+            <div class="TT-header">
+              <p>指数数值</p>
+              <el-button type="primary" plain @click="handleClearGroupData(0)">清除数据</el-button>
+            </div>
+            <el-form class="mt-20" :label-position="'left'" ref="form" :model="formData0" label-width="90px">
+              <el-form-item :label="item.label" v-for="(item, index) in formData0.data" :key="index">
+                <el-input placeholder="请输入内容" v-model="formData0.data[index].value"></el-input>
+              </el-form-item>
+            </el-form>
+          </el-col>
+          <el-col class="mt-160" :span="2" :offset="1">
+            <el-button type="primary">立即换算</el-button>
+          </el-col>
+          <el-col :span="13" :offset="1">
+            <el-row>
+              <el-col :span="11">
+                <div class="TT-header">
+                  <p>实际数据</p>
+                  <el-button type="primary" plain @click="handleClearGroupData(1)">清除数据</el-button>
+                </div>
+                <el-form class="mt-20" :label-position="'left'" ref="form" :model="formData1" label-width="90px">
+                  <el-form-item :label="item.label" v-for="(item, index) in formData1.data" :key="index">
+                    <el-input placeholder="" disabled v-model="formData1.data[index].value"></el-input>
+                  </el-form-item>
+                </el-form>
+              </el-col>
+              <el-col :span="11" :offset="2">
+                <div class="TT-header">
+                  <p>高阶数据</p>
+                  <el-button type="primary" plain @click="handleClearGroupData(2)">清除数据</el-button>
+                </div>
+                <el-form class="mt-20" :label-position="'left'" ref="form" :model="formData2" label-width="90px">
+                  <el-form-item :label="item.label" v-for="(item, index) in formData2.data" :key="index">
+                    <el-input placeholder="" disabled v-model="formData2.data[index].value"></el-input>
+                  </el-form-item>
+                </el-form>
+              </el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'toolsOnline',
+  data () {
+    return {
+      activeName: 'second',
+      menuData: [
+        {
+          title: '关键词页面指数【流量指数】',
+          afterLabel: '支付件数',
+          beforeValue: '',
+          afterValue: ''
+        },
+        {
+          title: '流量指数',
+          afterLabel: '访客数',
+          beforeValue: '',
+          afterValue: ''
+        },
+        {
+          title: '交易指数',
+          afterLabel: '支付金额',
+          beforeValue: '',
+          afterValue: ''
+        },
+        {
+          title: '搜索人气',
+          afterLabel: '搜索人数',
+          beforeValue: '',
+          afterValue: ''
+        },
+        {
+          title: '加购人气',
+          afterLabel: '加购人数',
+          beforeValue: '',
+          afterValue: ''
+        },
+        {
+          title: '收藏人气',
+          afterLabel: '收藏人数',
+          beforeValue: '',
+          afterValue: ''
+        },
+        {
+          title: '客群指数',
+          afterLabel: '支付买家数',
+          beforeValue: '',
+          afterValue: ''
+        },
+        {
+          title: '支付转化率指数',
+          afterLabel: '支付转化率',
+          beforeValue: '',
+          afterValue: ''
+        },
+        {
+          title: '流失人气',
+          afterLabel: '流失人数',
+          beforeValue: '',
+          afterValue: ''
+        },
+        {
+          title: '搜索热度',
+          afterLabel: '搜索次数',
+          beforeValue: '',
+          afterValue: ''
+        },
+        {
+          title: '点击人气',
+          afterLabel: '点击人数',
+          beforeValue: '',
+          afterValue: ''
+        },
+        {
+          title: '点击热度',
+          afterLabel: '点击次数',
+          beforeValue: '',
+          afterValue: ''
+        },
+        {
+          title: '咨询次数指数',
+          afterLabel: '咨询客服次数',
+          beforeValue: '',
+          afterValue: ''
+        },
+        {
+          title: '客服支付指数',
+          afterLabel: '客服支付金额',
+          beforeValue: '',
+          afterValue: ''
+        },
+        {
+          title: '客服客单价指数',
+          afterLabel: '客服客单价',
+          beforeValue: '',
+          afterValue: ''
+        },
+        {
+          title: '人工平均响应时长指数',
+          afterLabel: '人工平均响应时长',
+          beforeValue: '',
+          afterValue: ''
+        },
+        {
+          title: '客服询单-转化率指数',
+          afterLabel: '客服支付买家数/询单人数',
+          beforeValue: '',
+          afterValue: ''
+        }
+      ],
+      activeIndex: '0',
+      formData0: {
+        data: [
+          {
+            label: '流量指数：',
+            value: ''
+          },
+          {
+            label: '交易指数：',
+            value: ''
+          },
+          {
+            label: '搜索人气：',
+            value: ''
+          },
+          {
+            label: '收藏人气：',
+            value: ''
+          },
+          {
+            label: '加购人气',
+            value: ''
+          },
+          {
+            label: '转换指数：',
+            value: ''
+          }
+        ]
+      },
+      formData1: {
+        data: [
+          {
+            label: '访客数：',
+            value: ''
+          },
+          {
+            label: '交易金额：',
+            value: ''
+          },
+          {
+            label: '搜索人数：',
+            value: ''
+          },
+          {
+            label: '收藏人数：',
+            value: ''
+          },
+          {
+            label: '加购人数：',
+            value: ''
+          },
+          {
+            label: '转化率：',
+            value: ''
+          }
+        ]
+      },
+      formData2: {
+        data: [
+          {
+            label: 'uv价值：',
+            value: ''
+          },
+          {
+            label: '客单价：',
+            value: ''
+          },
+          {
+            label: '搜索占比：',
+            value: ''
+          },
+          {
+            label: '收藏率：',
+            value: ''
+          },
+          {
+            label: '加购率：',
+            value: ''
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleClick (tab, event) {
+      console.log(tab, event)
+    },
+    handleSelect (key, keyPath) {
+      this.activeIndex = key
+    },
+    handleClearBeforeValue () {
+      const index = this.activeIndex * 1
+      this.$set(this.menuData[index], 'beforeValue', '')
+    },
+    handleClearAfterValue () {
+      const index = this.activeIndex * 1
+      this.$set(this.menuData[index], 'afterValue', '')
+    },
+    handleClearGroupData (index) {
+      const formData = this[`formData${index}`]
+      if (!formData) {
+        return
+      }
+      formData.data.forEach((item, idx) => {
+        this.$set(this[`formData${index}`]['data'][idx], 'value', '')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mt-20 {
+  margin-top: 20px;
+}
+
+.mt-40 {
+  margin-top: 40px;
+}
+
+.mt-160 {
+  margin-top: 160px;
+}
+
+.TT-header {
+  display: flex;
+  justify-content: space-between;
+
+  p {
+    line-height: 36px;
+    font-size: 18px;
+  }
+}
+
+.TT-origin {
+  li {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>