|
|
@@ -0,0 +1,293 @@
|
|
|
+<template>
|
|
|
+ <div class="policy-limit">
|
|
|
+ <div class="limit_head">
|
|
|
+ <div class="limit_top">
|
|
|
+ <span class="limit_head_name">万邦达休息</span>
|
|
|
+ <span></span>
|
|
|
+ </div>
|
|
|
+ <div class="limit_bot"></div>
|
|
|
+ </div>
|
|
|
+ <div class="limit_content">
|
|
|
+ <IndustrySelector ref="industrySel" :initIndustry="baseInfo.s_subscopeclass" selectorType="line">
|
|
|
+ <div slot="header">行业分类：</div>
|
|
|
+ </IndustrySelector>
|
|
|
+ <AreaSelector ref="areaSelector" selectorType="line" :initCityMap="backArea">
|
|
|
+ <div slot="header">选择区域：</div>
|
|
|
+ </AreaSelector>
|
|
|
+ <BusinessScopeSelector ref="scopeSelector" :initList="baseInfo.buyerContent" selectorType="line">
|
|
|
+ <div slot="header">采购内容：</div>
|
|
|
+ </BusinessScopeSelector>
|
|
|
+ <BuyerclassSelector ref="buyerSelector" :initCate="baseInfo.buyerclass" selectorType="line">
|
|
|
+ <div slot="header">采购单位类型：</div>
|
|
|
+ </BuyerclassSelector>
|
|
|
+ <div class="limit_money_section">
|
|
|
+ <div class="section_label">金额区间：</div>
|
|
|
+ <div class="section_option">
|
|
|
+ <div class="section_option_type">
|
|
|
+ <div class="no_section" :class="moneySec?'sec_active':''" @click="getSection(0)">不限</div>
|
|
|
+ <div class="custom_section" :class="!moneySec?'sec_active':''" @click="getSection(1)">自定义</div>
|
|
|
+ </div>
|
|
|
+ <div class="el_section">
|
|
|
+ <el-input
|
|
|
+ class="sec_ipt"
|
|
|
+ :disabled="moneySec"
|
|
|
+ placeholder="请输入金额"
|
|
|
+ @input="getValue"
|
|
|
+ v-model="input">
|
|
|
+ <i slot="suffix" class="el-input__icon">
|
|
|
+ 万元
|
|
|
+ </i>
|
|
|
+ </el-input>
|
|
|
+ <span class="sline"> - </span>
|
|
|
+ <el-input
|
|
|
+ class="sec_ipt"
|
|
|
+ :disabled="moneySec"
|
|
|
+ placeholder="请输入金额"
|
|
|
+ @input="getValue2"
|
|
|
+ v-model="input2">
|
|
|
+ <i slot="suffix" class="el-input__icon">
|
|
|
+ 万元
|
|
|
+ </i>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="startAnsy">
|
|
|
+ <button class="startBtn" @click="StartAnsisy()">开始分析</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import AreaSelector from '@/components/selector/AreaSelector.vue'
|
|
|
+import IndustrySelector from '@/components/selector/IndustrySelector.vue'
|
|
|
+import BuyerclassSelector from '@/components/selector/BuyerclassSelector.vue'
|
|
|
+import BusinessScopeSelector from '@/components/selector/BusinessScopeSelector.vue'
|
|
|
+import { Input } from 'element-ui'
|
|
|
+export default {
|
|
|
+ props: ['baseInfo'],
|
|
|
+ name: 'policy-limit',
|
|
|
+ components: {
|
|
|
+ AreaSelector,
|
|
|
+ IndustrySelector,
|
|
|
+ BuyerclassSelector,
|
|
|
+ BusinessScopeSelector,
|
|
|
+ [Input.name]: Input
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ input: '',
|
|
|
+ input2: '',
|
|
|
+ backArea: {},
|
|
|
+ moneySec: true,
|
|
|
+ range: {
|
|
|
+ maxPrice: '',
|
|
|
+ minPrice: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ baseInfo (newVal, oldVal) {
|
|
|
+ if (newVal) {
|
|
|
+ console.log(newVal)
|
|
|
+ if (newVal.area && newVal.area !== '') {
|
|
|
+ const p = this.getAreaInfo(newVal.area)
|
|
|
+ this.backArea = p
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 判断省市
|
|
|
+ getAreaInfo (name) {
|
|
|
+ const info = {
|
|
|
+ level: 0,
|
|
|
+ province: '',
|
|
|
+ city: ''
|
|
|
+ }
|
|
|
+ const maplist = this.$refs.areaSelector.$refs.content.provinceListMap
|
|
|
+ for (const key in maplist) {
|
|
|
+ maplist[key].forEach(item => {
|
|
|
+ if (name === item.name) {
|
|
|
+ info.level = 1
|
|
|
+ info.province = item.name
|
|
|
+ }
|
|
|
+ item.children.forEach(iitem => {
|
|
|
+ if (name === iitem.city) {
|
|
|
+ info.level = 2
|
|
|
+ info.province = item.name
|
|
|
+ info.city = iitem.city
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (info.level === 1) {
|
|
|
+ return { [info.province]: [] }
|
|
|
+ } else if (info.level === 2) {
|
|
|
+ return { [info.province]: [info.city] }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getValue (val) {
|
|
|
+ this.range.minPrice = Number(val)
|
|
|
+ },
|
|
|
+ getValue2 (val) {
|
|
|
+ this.range.maxPrice = Number(val)
|
|
|
+ },
|
|
|
+ getSection (num) {
|
|
|
+ console.log(num)
|
|
|
+ if (num === 0) {
|
|
|
+ this.moneySec = true
|
|
|
+ this.range.minPrice = ''
|
|
|
+ this.range.maxPrice = ''
|
|
|
+ } else {
|
|
|
+ this.moneySec = false
|
|
|
+ this.range.minPrice = this.input
|
|
|
+ this.range.maxPrice = this.input2
|
|
|
+ }
|
|
|
+ console.log(this.range.minPrice, this.range.maxPrice)
|
|
|
+ },
|
|
|
+ // 开始分析
|
|
|
+ StartAnsisy () {
|
|
|
+ // 处理行业数据
|
|
|
+ const instudys = this.$refs.industrySel.getSelected()
|
|
|
+ let ComArr = []
|
|
|
+ for (var item in instudys) {
|
|
|
+ let inStr = ''
|
|
|
+ let inArr = ''
|
|
|
+ console.log(item)
|
|
|
+ instudys[item].forEach(function (data) {
|
|
|
+ console.log(data)
|
|
|
+ inStr = item + '_' + data
|
|
|
+ inArr += inStr + ','
|
|
|
+ })
|
|
|
+ console.log(inArr)
|
|
|
+ ComArr += inArr
|
|
|
+ }
|
|
|
+ const industryStr = ComArr.split(',').slice(0, ComArr.split(',').length - 1) + ''
|
|
|
+ // 处理采购内容数据
|
|
|
+ const scopeArr = this.$refs.scopeSelector.getState()
|
|
|
+ const newScopearr = []
|
|
|
+ if (scopeArr.length !== 0) {
|
|
|
+ scopeArr.forEach(function (item) {
|
|
|
+ const conList = {
|
|
|
+ key: [item],
|
|
|
+ appendkey: [],
|
|
|
+ notkey: []
|
|
|
+ }
|
|
|
+ newScopearr.push(conList)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ const conList = {
|
|
|
+ key: [],
|
|
|
+ appendkey: [],
|
|
|
+ notkey: []
|
|
|
+ }
|
|
|
+ newScopearr.push(conList)
|
|
|
+ }
|
|
|
+ const dataList = {
|
|
|
+ industry: industryStr,
|
|
|
+ area: this.$refs.areaSelector.getSelectedCity(),
|
|
|
+ scope: newScopearr,
|
|
|
+ buyer: this.$refs.buyerSelector.getSelected(),
|
|
|
+ range: this.range
|
|
|
+ }
|
|
|
+ this.$emit('dataList', dataList)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.policy-limit{
|
|
|
+ margin: 32px auto;
|
|
|
+ padding: 32px 40px;
|
|
|
+ width: 1200px;
|
|
|
+ background: #ffffff;
|
|
|
+ ::v-deep .selector-card{
|
|
|
+ padding: 12px 0;
|
|
|
+ }
|
|
|
+ .limit_head{
|
|
|
+ padding-bottom: 20px;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #1d1d1d;
|
|
|
+ line-height: 28px;
|
|
|
+ border-bottom: 1px solid #ececec;
|
|
|
+ }
|
|
|
+ .limit_money_section{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 60px;
|
|
|
+ .section_label{
|
|
|
+ width: 100px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .section_option{
|
|
|
+ display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .section_option_type{
|
|
|
+ display: flex;
|
|
|
+ .no_section, .custom_section{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 8px;
|
|
|
+ padding: 2px 6px;
|
|
|
+ height: 24px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .sec_active{
|
|
|
+ background: #2CB7CA;
|
|
|
+ color: #ffffff;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el_section{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .sec_ipt.el-input.el-input--suffix{
|
|
|
+ width: 200px;
|
|
|
+ height: 36px;
|
|
|
+ ::v-deep{
|
|
|
+ .el-input__inner{
|
|
|
+ width: 200px;
|
|
|
+ height: 36px;
|
|
|
+ border: 1px solid #ececec;
|
|
|
+ border-radius: 23px;
|
|
|
+ }
|
|
|
+ .el-input__icon{
|
|
|
+ line-height: 36px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sline{
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .startAnsy{
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 46px;
|
|
|
+ .startBtn{
|
|
|
+ width: 180px;
|
|
|
+ height: 46px;
|
|
|
+ background: #2cb7ca;
|
|
|
+ border-radius: 6px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
