yos_web/src/views/salesData/components/boxLine.vue

<template>
  <div class="box-line-new">
    <div class="item">
      <div class="title inline-16">
        {{ $t(title) }}
      </div>
      <el-tooltip effect="dark" placement="top-start">
        <div slot="content">
          {{
            $t(
              "①累计目标金额：到当前时间为止的累计的目标金额，不计算未经历时间的目标金额；"
            )
          }}
          <br />{{
            $t(
              "②同比增长率：同比增长率是指本期和上一年同期相比较的增长率,计算公式为:同比增长率=(本期数-同期数)÷同期数×100%。"
            )
          }}
          <br />{{
            $t(
              "③环比增长率：环比增长率是指本期和上期相比较的增长率,计算公式为:环比增长率 =(本期数-上期数)÷上期数 ×100%。"
            )
          }}
          <br />{{ $t("④目标达成率=实际金额÷目标金额×100%") }}
        </div>
        <!--        <i class="el-icon-question" style="color: #afb0be;float: right"></i>-->
        <img
          width="14px"
          height="14px"
          src="../../../assets/icons/prompt_icon.svg"
          style="float: right"
        />
      </el-tooltip>
      <div class="content-new">
        <div style="width: 18%">
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              height: 150px;
            "
          >
            <el-progress
              color="#6395fa"
              type="circle"
              :percentage="percentage"
              :stroke-width="15"
              :width="150"
              :format="format"
            ></el-progress>
          </div>
        </div>
        <div style="width: 20%; height: 150px; margin-left: 16px" @click="onClick">
          <div style="display: inline-block; height: 120px; margin-top: 16px">
            <p class="box-title">{{ $t("实际金额") }}</p>
            <p style="font-size: 26px; color: #4f7bfd">
              <span style="font-size: 14px">¥</span>
              <!--              {{list.amount > 10000?tool.formatAmount(tool.unitConversion(list.amount,10000),2) +this.$t('万'):tool.formatAmount(list.amount,2)}}</p>-->
              <span v-if="list.amount > 10000"
                >{{
                  tool.formatAmount(tool.unitConversion(list.amount, 10000), 2)
                }}<span style="font-size: 14px">{{ $t("万") }}</span></span
              >
              <span v-else>{{
                tool.formatAmount(tool.unitConversion(list.amount, 10000), 2)
              }}</span>
            </p>

            <p class="box-title" style="color: #929292" v-if="list.tbxsje > 0">
              <span
                v-if="
                  param.content.dateType == '本年' ||
                  param.content.dateType == '去年'
                "
                >{{ $t("年同比") }}</span
              >
              <span v-else-if="param.content.dateType == '本季'">{{
                $t("季同比")
              }}</span>
              <span v-else-if="param.content.dateType == '本月'">{{
                $t("月同比")
              }}</span>
              <i class="el-icon-caret-top" style="color: #2ad72a"></i
              ><span class="box-size-color"
                >{{ Math.round(list.tbxsje * 100 * 100) / 100 }}%</span
              >
            </p>
            <p class="box-title" style="color: #929292" v-if="list.tbxsje == 0">
              <span
                v-if="
                  param.content.dateType == '本年' ||
                  param.content.dateType == '去年'
                "
                >{{ $t("年同比") }}</span
              >
              <span v-else-if="param.content.dateType == '本季'">{{
                $t("季同比")
              }}</span>
              <span v-else-if="param.content.dateType == '本月'">{{
                $t("月同比")
              }}</span>
              <span class="box-size-color" style="margin-left: 10px"
                >{{ Math.round(list.tbxsje * 100 * 100) / 100 }}%</span
              >
            </p>
            <p class="box-title" style="color: #929292" v-if="list.tbxsje < 0">
              <span
                v-if="
                  param.content.dateType == '本年' ||
                  param.content.dateType == '去年'
                "
                >{{ $t("年同比") }}</span
              >
              <span v-else-if="param.content.dateType == '本季'">{{
                $t("季同比")
              }}</span>
              <span v-else-if="param.content.dateType == '本月'">{{
                $t("月同比")
              }}</span>
              <i class="el-icon-caret-bottom" style="color: red"></i
              ><span class="box-size-color"
                >{{ Math.round(list.tbxsje * 100 * 100) / 100 }}%</span
              >
            </p>
            <p class="box-title" style="color: #929292" v-if="list.hbxsje > 0">
              <span
                v-if="
                  param.content.dateType == '本年' ||
                  param.content.dateType == '去年'
                "
                >{{ $t("年环比") }}</span
              >
              <span v-else-if="param.content.dateType == '本季'">{{
                $t("季环比")
              }}</span>
              <span v-else-if="param.content.dateType == '本月'">{{
                $t("月环比")
              }}</span>
              <i class="el-icon-caret-top" style="color: #2ad72a"></i
              ><span class="box-size-color"
                >{{ Math.round(list.hbxsje * 100 * 100) / 100 }}%</span
              >
            </p>
            <p class="box-title" style="color: #929292" v-if="list.hbxsje == 0">
              <span
                v-if="
                  param.content.dateType == '本年' ||
                  param.content.dateType == '去年'
                "
                >{{ $t("年环比") }}</span
              >
              <span v-else-if="param.content.dateType == '本季'">{{
                $t("季环比")
              }}</span>
              <span v-else-if="param.content.dateType == '本月'">{{
                $t("月环比")
              }}</span>
              <span class="box-size-color" style="margin-left: 10px"
                >{{ Math.round(list.hbxsje * 100 * 100) / 100 }}%</span
              >
            </p>
            <p class="box-title" style="color: #929292" v-if="list.hbxsje < 0">
              <span
                v-if="
                  param.content.dateType == '本年' ||
                  param.content.dateType == '去年'
                "
                >{{ $t("年环比") }}</span
              >
              <span v-else-if="param.content.dateType == '本季'">{{
                $t("季环比")
              }}</span>
              <span v-else-if="param.content.dateType == '本月'">{{
                $t("月环比")
              }}</span>
              <i class="el-icon-caret-bottom" style="color: red"></i
              ><span class="box-size-color"
                >{{ Math.round(list.hbxsje * 100 * 100) / 100 }}%</span
              >
            </p>
          </div>
        </div>
        <div style="width: 30%; height: 150px">
          <div style="display: inline-block; height: 120px; margin-top: 16px">
            <p class="box-title">{{ $t("目标金额") }}</p>
            <p style="font-size: 26px; color: #0c0c0c">
              <span style="font-size: 14px">¥</span>
              <!--              {{list.target_l > 10000?tool.formatAmount( tool.unitConversion(list.target_l,10000),2) +this.$t('万'):tool.formatAmount(list.target_l,2)}}</p>-->
              <span v-if="list.target_l > 10000"
                >{{
                  tool.formatAmount(
                    tool.unitConversion(list.target_l, 10000),
                    2
                  )
                }}<span style="font-size: 14px">{{ $t("万") }}</span></span
              >
              <span v-else>{{
                tool.formatAmount(tool.unitConversion(list.target_l, 10000), 2)
              }}</span>
            </p>

            <p class="box-title" style="color: #929292">
              {{ $t("目标达成率")
              }}<span class="box-size-color" style="margin-left: 40px"
                >{{ Math.round(list.wcamount * 100 * 100) / 100 }}%</span
              >
            </p>
            <p
              class="box-title"
              style="color: #929292"
              v-if="list.unamount >= 0"
            >
              {{ $t("实际与目标差额")
              }}<span class="box-size-color" style="margin-left: 10px"
                >¥{{
                  list.unamount > 10000
                    ? tool.formatAmount(
                        tool.unitConversion(list.unamount, 10000),
                        2
                      ) + $t("万")
                    : tool.formatAmount(list.unamount, 2)
                }}</span
              >
            </p>
            <p class="box-title" style="color: #929292" v-else>
              {{ $t("实际与目标差额")
              }}<span class="box-size-color" style="margin-left: 10px"
                >¥{{
                  list.unamount < 10000
                    ? tool.formatAmount(
                        tool.unitConversion(list.unamount, 10000),
                        2
                      ) + $t("万")
                    : tool.formatAmount(list.unamount, 2)
                }}</span
              >
            </p>
          </div>
        </div>
        <div style="width: 30%; height: 150px">
          <div style="display: inline-block; height: 120px; margin-top: 16px">
            <p class="box-title">{{ $t("累计目标金额") }}</p>
            <p style="font-size: 26px; color: #0c0c0c">
              <span style="font-size: 16px">¥</span>
              <!--              {{list.target_l > 10000?tool.formatAmount( tool.unitConversion(list.nowTarget_l,10000),2) +this.$t('万'):tool.formatAmount(list.nowTarget_l,2)}}</p>-->
              <span v-if="list.nowTarget_l > 10000"
                >{{
                  tool.formatAmount(
                    tool.unitConversion(list.nowTarget_l, 10000),
                    2
                  )
                }}<span style="font-size: 14px">{{ $t("万") }}</span></span
              >
              <span v-else>{{
                tool.formatAmount(
                  tool.unitConversion(list.nowTarget_l, 10000),
                  2
                )
              }}</span>
            </p>

            <p class="box-title" style="color: #929292">
              {{ $t("累计目标达成率")
              }}<span class="box-size-color" style="margin-left: 40px"
                >{{ Math.round(list.wcnowTarget_l * 100 * 100) / 100 }}%</span
              >
            </p>
            <p
              class="box-title"
              style="color: #929292"
              v-if="list.unnowTarget_l >= 0"
            >
              {{ $t("实际与累计目标差额")
              }}<span class="box-size-color" style="margin-left: 10px"
                >¥{{
                  list.unnowTarget_l > 10000
                    ? tool.formatAmount(
                        tool.unitConversion(list.unnowTarget_l, 10000),
                        2
                      ) + $t("万")
                    : tool.formatAmount(list.unnowTarget_l, 2)
                }}</span
              >
            </p>
            <p class="box-title" style="color: #929292" v-else>
              {{ $t("实际与累计目标差额")
              }}<span class="box-size-color" style="margin-left: 10px"
                >¥{{
                  list.unnowTarget_l < 10000
                    ? tool.formatAmount(
                        tool.unitConversion(list.unnowTarget_l, 10000),
                        2
                      ) + $t("万")
                    : tool.formatAmount(list.unnowTarget_l, 2)
                }}</span
              >
            </p>
          </div>
        </div>
      </div>
    </div>
    <el-drawer
        :title="$t(this.typeDate) + '_' + $t(this.title) + $t('明细')"
        :visible.sync="visibleShow"
        size="90%"
        direction="rtl"
        append-to-body
        @close="onClose"
    >
      <div class="drawer__panel_new">
        <div>
          <div class="mt-10 inline-16">
            <span class="search__label" >{{$t('部门')}}:</span>
            <el-cascader disabled :placeholder="$t('请选择')" class="inline-16" ref="selectdep" size="small" v-model="depment" :options="deplist" :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}"  @change="selectDep" ></el-cascader>
          </div>
          <div class="mt-10 inline-16">
            <span class="search__label" >{{$t('业务员')}}:</span>
            <el-select disabled class="inline-16" v-model="person" filterable :placeholder="$t('请选择')" size="small"  @change="selectPerson" >
              <el-option
                  v-for="item in personnelList"
                  :key="item.index"
                  :label="$t(item.name)"
                  :value="item.userid">
              </el-option>
            </el-select>
          </div>
          <div class="mt-10 inline-16">
            <span class="search__label" >{{$t('订单类型')}}:</span>
            <el-select class="inline-16" v-model="orderType" filterable :placeholder="$t('请选择')" size="small" clearable   @change="selectOrderType" >
              <el-option
                  v-for="item in orderTypes"
                  :key="item.index"
                  :label="$t(item.value)"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="mt-10 inline-16">
            <span class="search__label" >{{$t('领域')}}:</span>
            <el-select class="inline-16" v-model="tradefield" filterable :placeholder="$t('请选择')" size="small" clearable  @focus="queryTradefield"  @change="selectTradefield" >
              <el-option
                  v-for="item in tradefieldList"
                  :key="item.index"
                  :label="$t(item.value)"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="mt-10 inline-16">
            <el-input style="width:200px;!important;" :placeholder="$t(`搜索`)" :suffix-icon="paramDetail.content.where.condition?paramDetail.content.where.condition.length > 0?'':'':'el-icon-search'" v-model="paramDetail.content.where.condition" @keyup.native.enter="listDataInfo(paramDetail.content.pageNUmber = 1)" @clear="listDataInfo(paramDetail.content.pageNUmber = 1)" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
            </el-input>
          </div>
          <div class="mt-10 inline-16">
            <exportFile :param="paramDetail" :columns="tablecols" :fileName="$t(this.typeDate) + '_' + $t(this.title) + $t('明细')"></exportFile>
          </div>
        </div>
        <tableTemplate style="margin-top: 10px" ref="table" :layout="tablecols" :data="listInfo" :opwidth="200" :custom="true" :height="height" fixedName="operation">
          <template v-slot:customcol="scope">
            <div v-if="scope.column.columnname === 'nominalpressure'">
              {{tool.nominalPressureSet(scope.column.data.nominalpressure)}}
            </div>
            <div v-else-if="scope.column.columnname === 'marketprice'">
              {{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2,'¥'):'¥0.00'}}
            </div>
            <div v-else-if="scope.column.columnname === 'price'">
              {{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2,'¥'):'¥0.00'}}
            </div>
            <div v-else-if="scope.column.columnname === 'amount'">
              {{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2,'¥'):'¥0.00'}}
            </div>
            <div v-else-if="scope.column.columnname === 'invoiceamount'">
              {{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2,'¥'):'¥0.00'}}
            </div>
            <div v-else-if="scope.column.columnname === 'writeoffamount'">
              {{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2,'¥'):'¥0.00'}}
            </div>
            <div v-else-if="scope.column.columnname === 'returnamount'">
              {{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2,'¥'):'¥0.00'}}
            </div>
            <div v-else-if="scope.column.columnname === 'logisticsamount'">
              {{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2,'¥'):'¥0.00'}}
            </div>
            <div v-else-if="scope.column.columnname === 'uninvoiceamount'">
              {{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2,'¥'):'¥0.00'}}
            </div>
            <div v-else-if="scope.column.columnname === 'unwriteoffamount'">
              {{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2,'¥'):'¥0.00'}}
            </div>
            <div v-else>{{scope.column.data[scope.column.columnname]?$t(scope.column.data[scope.column.columnname]):'--'}}</div>
          </template>
        </tableTemplate>
        <div  class="container normal-panel" style="text-align:right;float: right">
          <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :pager-count="5"
              :page-sizes="[100,150, 200]"
              :page-size="100"
              layout="total,sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import tableTemplate from './table';
import exportFile from '@/components/export_file/index5'
export default {
  name: "boxLine",
  props: ["title", "typeDate", "index"],
  components:{tableTemplate,exportFile},
  data() {
    return {
      list: [],
      percentage: 0,
      param: {
        id: 20231009125304,
        content: {
          type: 1, // 0人员 1部门
          dataid: 103,
          dateType: "本年", // 本年 本季 本月
          datatype: 2, // 1-订单 2-出货 3-开票 4-回款
          where: {
            isleave: "",
          },
        },
      },
      visibleShow:false,
      depmentid:'',
      deplist:[],
      personnelList:[],
      depment:'',
      person:'',
      depParam:{
        "id": 20230620102004,
        "content": {
        }
      },
      orderTypes:[
        {
          value:'标准订单'
        },
        {
          value:'特殊订单'
        },
        {
          value:'项目订单'
        },
        {
          value:'促销订单'
        },
        {
          value:'工具订单'
        }
      ],
      orderType:'',
      tradefield:'',
      tradefieldList:[],
      paramDetail:{
        "id": 2025032613405702,
        "content": {
          "type": "1",
          "dataid": 58,
          "dateType": "去年", //去年，本年，本季，本月
          "pageNumber":1,
          "pageSize":100,
          "where": {
            "condition": "",
            "type": "",
            "tradefield": ""
          }
        }
      },
      tablecols:[],
      listInfo:[],
      height:'calc(100vh - 195px)',
      currentPage:0,
      total:0
    };
  },
  methods: {
    format(percentage) {
      return this.$t("目标达成率") + "\n\n" + percentage + "%";
    },
    async listData() {
      this.title === "订单"
        ? (this.param.content.datatype = 1)
        : this.title === "出货"
        ? (this.param.content.datatype = 2)
        : this.title === "开票"
        ? (this.param.content.datatype = 3)
        : (this.param.content.datatype = 4);
      const res = await this.$api.requested(this.param);
      this.list = res.data;
      this.percentage = Math.round(this.list.wcamount * 100 * 100) / 100;
    },
    onClick(){
      console.log('点击',this.title)
      this.orderType = ''
      this.tradefield = ''
      this.paramDetail.content.where.condition = ''
      this.paramDetail.content.pageNUmber = 1
      this.paramDetail.content.where.type = ''
      this.paramDetail.content.where.tradefield = ''
      this.visibleShow = true
      if (this.title == '订单'){
        this.tablecols = this.tool.tabelCol(this.$route.name).orderDetailsTable.tablecols
      }else if (this.title == '出货'){
        this.tablecols = this.tool.tabelCol(this.$route.name).shippingDetailsTable.tablecols
      }else if (this.title == '开票'){
        this.tablecols = this.tool.tabelCol(this.$route.name).billingDetailsTable.tablecols
      }else if (this.title == '回款'){
        this.tablecols = this.tool.tabelCol(this.$route.name).paymentScheduleTable.tablecols
      }
      this.queryDep()
      this.paramDetail.content.pageNUmber = 1
      this.listDataInfo()
    },
    onClose(){
      this.visibleShow = false
    },
    /*获取部门*/
    async queryDep(){
      const res = await this.$api.requested(this.depParam)
      this.deplist = this.createMenu(res.data.dep)
      this.personnelList = res.data.hr
      const usertype = JSON.parse(sessionStorage.getItem('active_account')).usertype
      const userName = JSON.parse(sessionStorage.getItem('active_account')).name
      const userid = JSON.parse(sessionStorage.getItem('active_account')).userid
      if (this.param.content.type == 1){
        this.depment = this.param.content.dataid
        this.person = ''
      }else {
        console.log(usertype,userName,'eeeeee',userid,this.param.content.dataid)
        this.person = userid === this.param.content.dataid?userName:this.param.content.dataid
        console.log(this.person,'person')
        this.depment = ''
      }
    },
    createMenu (array) {
      var that = this
      let arr = []
      function convertToElementTree(node) {
        // 新节点
        if (node.subdep.length === 0){
          var elNode = {
            label: node["depname"],
            parentid:node['parentid'],
            parentname:node['parentname'],
            departmentid:node["departmentid"],
            value:node["departmentid"],
            remarks:node["remarks"],
            isused:node["isused"],
            changedate:node['changedate'],
            changeby:node['changeby'],
            createdate:node['createdate'],
            createby:node['createby'],
            depno:node['depno'],
            disabled:that.pageOnlyRead,
          }
        }else {
          var elNode = {
            label: node["depname"],
            parentid:node['parentid'],
            parentname:node['parentname'],
            departmentid:node["departmentid"],
            value:node["departmentid"],
            remarks:node["remarks"],
            isused:node["isused"],
            changedate:node['changedate'],
            changeby:node['changeby'],
            createdate:node['createdate'],
            createby:node['createby'],
            depno:node['depno'],
            disabled:that.pageOnlyRead,
            children: []
          }
        }
        if (node.subdep && node.subdep.length > 0) {
          // 如果存在子节点
          for (var index = 0; index < node.subdep.length; index++) {
            // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
            elNode.children.push(convertToElementTree(node.subdep[index]));
          }
        }
        return elNode;
      }
      array.forEach((element) => {
        arr.push(convertToElementTree(element))
      });
      return arr
    },
    /*选择部门*/
    selectDep(val){
      this.person = ''
      this.depmentid = val[val.length -1]
      this.param.content.pageNumber = 1
      this.listData(1,val[val.length -1],this.nowEndDate)
    },
    /*选择业务员*/
    selectPerson(val){
      this.depment = ''
      this.depmentid = val
      this.param.content.pageNumber = 1
      this.listData(0,val,this.nowEndDate)
    },
    /*选择订单类型*/
    selectOrderType(){
      this.paramDetail.content.pageNUmber = 1
      this.paramDetail.content.type = this.orderType
      this.listDataInfo()
    },
    async queryTradefield(){
      if (this.tradefieldList.length < 1){
        const res = await this.$store.dispatch('optiontypeselect','tradefield')
        this.tradefieldList = res.data
      }
    },
    /*选择领域*/
    selectTradefield(){
      this.paramDetail.content.pageNUmber = 1
      this.listDataInfo()
    },
    async listDataInfo(){
      if (this.title == '订单'){
        this.paramDetail.id = 2025032613405702
      }else if (this.title == '出货'){
        this.paramDetail.id = 2025032615330102
      }else if (this.title == '开票'){
        this.paramDetail.id = 2025032616343302
      }else if (this.title == '回款'){
        this.paramDetail.id = 2025032616352402
      }
      this.paramDetail.content.type = this.param.content.type
      this.paramDetail.content.dataid = this.param.content.dataid
      this.paramDetail.content.dateType = this.param.content.dateType
      this.paramDetail.content.where.type = this.orderType
      this.paramDetail.content.where.tradefield = this.tradefield
      const res = await this.$api.requested(this.paramDetail)
      this.listInfo = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
      console.log(res.data,'数据1111')
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.paramDetail.content.pageSize = val
      this.listDataInfo()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.paramDetail.content.pageNumber = val
      this.listDataInfo()
    },
  },
};
</script>

<style scoped>
.box-line-new {
  display: flex;
  flex-wrap: wrap;
  /* min-width: 900px;*/
}
.item {
  /* width: 900px;*/
  width: 100%;
  height: 210px;
  padding: 10px;
  border-radius: 2px;
  border: 1px solid #e9e9e9;
  background-color: #ffffff;
  box-sizing: border-box;
  box-shadow: -1px -1px 5px 0px rgba(0, 0, 0, 0.2);
}
.item .title {
  display: flex;
  flex-wrap: nowrap;
  font-size: 16px;
}
.item .content-new {
  display: flex;
  width: 100%;
  height: 300px;
  margin-top: 10px;
}
.item .content-new .left {
  width: 160px;
}
.item .content-new .right {
  width: 188px;
}
.item .content-new .top {
  width: 100%;
  height: 150px;
  padding-top: 20px;
  margin-bottom: -20px;
}
.item .content-new .bottom {
  width: 100%;
  height: 150px;
}
.box-title {
  font-size: 14px;
}
.box-size-color {
  color: #5a5a5a;
  font-size: 14px;
}
/deep/ .el-progress__text {
  white-space: pre;
  font-size: 14px !important;
}
</style>