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

<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" :disabled="isDisabled" @click="handleExchange">立即换算</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 class="TT-input" type="number" placeholder="请输入内容" clearable
                          v-model.number="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" :disabled="isDisabled" @click="onSubmit">立即换算</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: 'first',
      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: [
          {
            key: 'liuliang',
            label: '流量指数：',
            value: ''
          },
          {
            key: 'jiaoyi',
            label: '交易指数：',
            value: ''
          },
          {
            key: 'sousuorenqi',
            label: '搜索人气：',
            value: ''
          },
          {
            key: 'shoucangrenqi',
            label: '收藏人气：',
            value: ''
          },
          {
            key: 'jiagourenqi',
            label: '加购人气',
            value: ''
          },
          {
            key: 'zhifuzhuanhualv',
            label: '转换指数：',
            value: ''
          }
        ]
      },
      formData1: {
        data: [
          {
            key: 'liuliang',
            label: '访客数：',
            value: ''
          },
          {
            key: 'jiaoyi',
            label: '交易金额：',
            value: ''
          },
          {
            key: 'sousuorenqi',
            label: '搜索人数：',
            value: ''
          },
          {
            key: 'shoucangrenqi',
            label: '收藏人数：',
            value: ''
          },
          {
            key: 'jiagourenqi',
            label: '加购人数：',
            value: ''
          },
          {
            key: 'zhifuzhuanhualv',
            label: '转化率：',
            value: ''
          }
        ]
      },
      formData2: {
        data: [
          {
            key: 'kedanjia',
            label: '客单价：',
            value: ''
          },
          {
            key: 'sousuozhanbi',
            label: '搜索占比：',
            value: ''
          },
          {
            key: 'shoucanglv',
            label: '收藏率：',
            value: ''
          },
          {
            key: 'jiagoulv',
            label: '加购率：',
            value: ''
          }
        ]
      },
      isDisabled: false
    }
  },
  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', '')
      })
    },
    handleExchange () {
      const activeIndex = this.activeIndex * 1
      const { title, beforeValue } = this.menuData[activeIndex]
      let postData = {
        number: beforeValue, // 指数值
        type: title === '支付转化率指数' ? 7 : 1 // 指数类型(7为支付指数转化 其他都为1)
      }
      if (this.isDisabled) {
        return
      }
      this.isDisabled = true
      this.$http({
        url: this.$http.adornUrl('/tb/exchange'),
        method: 'post',
        data: this.$http.adornData(postData)
      }).then(({ data }) => {
        this.isDisabled = false
        if (data.status) {
          const { numberData } = data.data
          this.$set(this.menuData[activeIndex], 'afterValue', numberData)
          return
        }
        this.$message.error(data.msg)
      }).catch(() => {
        this.isDisabled = false
      })
    },
    onSubmit () {
      const data = this.formData0.data
      let postData = {}
      data.forEach(item => {
        postData[item.key] = item.value
      })
      if (this.isDisabled) {
        return
      }
      this.isDisabled = true
      this.$http({
        url: this.$http.adornUrl('/tb/zhishuzhuanhua'),
        method: 'post',
        data: this.$http.adornData(postData)
      }).then(({ data }) => {
        this.isDisabled = false
        if (data.status) {
          const _keys = Object.keys(data.data)
          this.formData1.data.forEach((item, index) => {
            if (_keys.includes(item.key)) {
              this.$set(this.formData1.data[index], 'value', data.data[item.key])
            }
          })
          this.formData2.data.forEach((item, index) => {
            if (_keys.includes(item.key)) {
              this.$set(this.formData2.data[index], 'value', data.data[item.key])
            }
          })
          return
        }
        this.$message.error(data.msg)
      }).catch(() => {
        this.isDisabled = false
      })
    }
  }
}
</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>