Browse Source

fix: 定制化分析报告页面优化

cuiyalong 3 years ago
parent
commit
1bf545bc82

+ 4 - 2
src/jfw/modules/app/src/web/staticres/jyapp/big-member/css/report_analysis.css

@@ -312,7 +312,7 @@
 
 .market-overview-list {
   display: flex;
-  margin-bottom: .32rem;
+  margin: 0!important;
   padding-left: .08rem!important;
   padding-right: .08rem!important;
 }
@@ -397,7 +397,7 @@
   padding-bottom: .16rem;
 }
 .project-top-item:not(:last-of-type) {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
 }
 .project-top-item .p-t-i-hd {
   display: flex;
@@ -420,6 +420,7 @@
   color: #2ABDD1;
   line-height: .36rem;
   font-size: .24rem;
+  white-space: nowrap;
 }
 .project-top-item .p-t-i-hd-r .project-actions .van-icon {
   margin-left: .12rem;
@@ -479,6 +480,7 @@
   line-height: .36rem;
 }
 .project-top-item .p-t-i-ft.disabled,
+.project-top-item .p-t-i-hd-r .project-name.disabled,
 .project-top-item .p-t-i-ft .p-t-i-ft-winner.disabled {
   color: #a2a2a2;
   cursor: not-allowed;

+ 4 - 152
src/jfw/modules/app/src/web/staticres/jyapp/big-member/js/components/marketAreaScatter.js

@@ -2,6 +2,7 @@ var marketAreaScatterTemplate = `
   <div class="market-area-scatter-chart">
     <ve-map
       :height="options.height"
+      :init-options="initRendererSvg"
       :after-config="options.config"
       :data="chartData"
       :settings="defaultSettings"
@@ -49,143 +50,9 @@ var marketAreaScatter = {
       initRendererSvg: {
         renderer: 'svg'
       },
-      defaultSettings: {
-        positionJsonLink: "/jyapp/big-member/js/china.json",
-        label: {
-          show: true,
-          fontSize: 12
-        },
-        selectedMode: false, // 去掉省份小圆点
-        itemStyle: {
-          normal: {
-            borderColor: '#F06326',
-            areaColor: '#FFFFFF'
-          }
-        },
-        mapGrid: {
-          left: 6,
-          right: 6
-        }
-      },
-      defaultOptions: {
-        tooltip: {
-          confine: true,
-          backgroundColor: '#fff',
-          axisPointer: {
-            type: 'shadow',
-            shadowStyle: {
-              color: 'rgba(5,166,243,0.1)'
-            },
-            z: 3
-          },
-          textStyle: {
-            color: '#171826',
-            fontSize: 12
-          },
-          padding: [8, 12],
-          extraCssText: 'box-shadow: 0px 4px 16px rgba(8, 31, 38, 0.08)',
-          formatter: (params, ticket, callback) => {
-            if (params.data === null || params.data === undefined || isNaN(params.data)) {
-              return // eslint-disable-line
-            } else {
-              return params.name + ':' + params.value
-            }
-          }
-        },
-        grid: {
-          left: 32,
-          right: 16,
-          containLabel: true
-        },
-        legend: {
-          selectedMode: false,
-          textStyle: {
-            color: 'transparent'
-          },
-          itemWidth: 0,
-          itemHeight: 0
-        },
-        silent: false, // 禁用鼠标点击、滑过事件
-        series: {
-          showLegendSymbol: false,
-          selectedMode: false
-        },
-        graphic: [
-          {
-            type: 'group',
-            bottom: 42,
-            children: [
-              {
-                type: 'text',
-                z: 100,
-                left: 'left',
-                top: 'middle',
-                style: {
-                  fill: '#333',
-                  text: '市场分布数量',
-                  font: '12px Microsoft YaHei'
-                }
-              }]
-          },
-          {
-            type: 'rect',
-            z: 101,
-            left: 0,
-            bottom: 16,
-            shape: {
-              width: 150,
-              height: 24
-            },
-            style: {
-              stroke: '#FB483D',
-              fill: 'transparent',
-              lineWidth: 0.5
-            }
-          },
-          this.rectGroup(0, '#F06326'),
-          this.rectGroup(25, '#F48A5D'),
-          this.rectGroup(50, '#FFB366'),
-          this.rectGroup(75, '#FFCF9F'),
-          this.rectGroup(100, '#FFE7CF'),
-          this.rectGroup(125, '#FFF4EB'),
-          {
-            type: 'group',
-            width: 150,
-            bottom: 0,
-            left: 0,
-            children: [{
-              type: 'text',
-              z: 100,
-              left: 'left',
-              top: 'middle',
-              style: {
-                fill: '#333',
-                font: '12px Microsoft YaHei'
-              }
-            },
-            {
-              type: 'text',
-              z: 100,
-              left: 'right',
-              top: 'middle',
-              style: {
-                fill: '#333',
-                text: '0',
-                font: '12px Microsoft YaHei'
-              }
-            }]
-          }
-        ],
-        visualMap: {
-          show: false,
-          inRange: {
-            color: ['#FFF4EB', '#FFE7CF', '#FFCF9F', '#FFB366', '#F48A5D', '#F06326']
-          },
-          outOfRange: {
-            color: ['#F06326']
-          }
-        }
-      }
+      // 引用/jyapp/big-member/js/echarts_option.js中配置文件
+      defaultSettings: mapSettings.chartSettings,
+      defaultOptions: mapSettings.chartExtend
     }
   },
   computed: {},
@@ -203,21 +70,6 @@ var marketAreaScatter = {
         }]
       })
     },
-    rectGroup (left, color) {
-      return {
-        type: 'rect',
-        z: 90,
-        left: left,
-        bottom: 16,
-        shape: {
-          width: 25,
-          height: 24
-        },
-        style: {
-          fill: color
-        }
-      }
-    },
     configArea (options) {
       const arr = this.chartData.rows || []
       const maxNum = Math.max.apply(Math, arr.map((o) => { return o['项目数量'] }))

+ 2 - 2
src/jfw/modules/app/src/web/staticres/jyapp/big-member/js/components/marketTop3Table.js

@@ -13,9 +13,9 @@ var marketTop3TableTemplate = `
               orange: index === 1,
               'soft-orange': index === 2
           }"></div>
-        <div class="p-t-i-hd-r" @click="">
+        <div class="p-t-i-hd-r">
           <div class="p-t-i-hd-r-top">
-            <div class="project-name" v-text="item.name"></div>
+            <div class="project-name" v-text="item.name" :class="{ disabled: !item.id }" @click="toPortrait(item.id, item.type)"></div>
             <div class="project-actions" v-show="item.children.length" :class="{ 'icon-reverse': item.childrenShow }" @click="changeChildrenShow(item)">
               <div v-text="item.actionText"></div>
               <van-icon name="arrow-down"></van-icon>

+ 49 - 3
src/jfw/modules/app/src/web/staticres/jyapp/big-member/js/report_analysis.js

@@ -259,6 +259,15 @@ var vm = new Vue({
     winnerSectionShow () {
       const winnerState = this.sections.winner
       return winnerState.dataAlready && winnerState.projectCountTop3 && winnerState.projectAmountTop3
+    },
+    overviewRateTotal: function () {
+      var total = 0
+      this.sections.market.overview.forEach(function (item) {
+        if (item.ringRatio !== undefined && item.ringRatio !== null) {
+          total += item.ringRatio
+        }
+      })
+      return total
     }
   },
   created () {
@@ -366,6 +375,7 @@ var vm = new Vue({
       var prefix = '已选:'
       var text = ''
       if (type === 'keys') {
+        if (this.notSetKey) return '请设置'
         text = this.resolveSelectKeysText(filters.keys)
       } else if (type === 'area') {
         text = this.resolveSelectAreaText(filters.area)
@@ -495,6 +505,10 @@ var vm = new Vue({
         setTimeout(function () {
           _this.$refs.buyerclassSelector.setState()
         }, 0)
+      }  else if (key === 'industry') {
+        setTimeout(function () {
+          _this.$refs.industrySelector.setState()
+        }, 0)
       }
       dialog[key] = true
     },
@@ -724,6 +738,15 @@ var vm = new Vue({
       if (data.keysItems && data.keysItems !== '[]') {
         this.reportFilters.keys = JSON.parse(data.keysItems)
         this.filters.keys = this.reportFilters.keys
+        var keyArr = []
+        this.filters.keys.forEach(function (classify) {
+          if(Array.isArray(classify.a_key)) {
+            classify.a_key.forEach(function (item) {
+              keyArr.push(item.key.join(' '))
+            })
+          }
+        })
+        this.filters.selectKeysArr = keyArr
       }
       if (data.rangeTime) {
         this.reportFilters.selectTime = data.rangeTime
@@ -737,13 +760,21 @@ var vm = new Vue({
       } else {
         this.filters.rangeTime.exact = 'exact'
       }
+      this.$refs.dateSelector.setState(this.filters.rangeTime)
       if (data.area && data.area !== '{}') {
         this.reportFilters.area = JSON.parse(data.area)
         this.filters.area = this.reportFilters.area
       }
       if (data.industry && data.industry !== '{}') {
         this.reportFilters.industry = JSON.parse(data.industry)
-        this.filters.industry = this.reportFilters.industry
+        this.$set(this.filters, 'industryDetail', this.reportFilters.industry)
+        var industry = []
+        for (var key in this.reportFilters.industry) {
+          this.reportFilters.industry[key].forEach(function (item) {
+            industry.push(key + '_' + item)
+          })
+        }
+        this.filters.industry = industry
       }
       if (data.buyerclass) {
         this.reportFilters.buyerclass = data.buyerclass.split(',')
@@ -858,7 +889,7 @@ var vm = new Vue({
             var value = item[field[column]]
             if (value) {
               if (field[column] === 'ratio') {
-                row[column] = formatPrice(value * 100) - 0
+                row[column] = utils.formatMoney(value * 100, undefined, true) - 0
               } else {
                 row[column] = value
               }
@@ -903,7 +934,7 @@ var vm = new Vue({
                 const mUint = this.moneyUnit(value).unit
                 row[column] = this.moneyUnit(value, 'transfer', mUint).count
               } else if (field[column] === 'ratio') {
-                row[column] = formatPrice(value * 100)
+                row[column] = utils.formatMoney(value * 100, undefined, true)
               } else {
                 row[column] = value
               }
@@ -1398,6 +1429,8 @@ var vm = new Vue({
       if (Array.isArray(countTop3)) {
         countTop3.forEach((item, index) => {
           item.name = item.name
+          item.type = 'buyer'
+          item.id = item.name
           item.subInfo1 = `项目数量:${item.number}个`
           // item.subInfo2 = item.accounted ? `全部占比:${utils.formatMoney(item.accounted * 100, undefined, true)}%` : ''
           item.actionText = `中标单位 TOP3`
@@ -1423,6 +1456,8 @@ var vm = new Vue({
       if (Array.isArray(amountTop3)) {
         amountTop3.forEach((item, index) => {
           item.name = item.name
+          item.type = 'buyer'
+          item.id = item.name
           item.subInfo1 = `采购金额:${utils.formatMoney(item.amount / 10000, undefined, true)}万元`
           // item.subInfo2 = item.accounted ? `全部占比:${utils.formatMoney(item.accounted * 100, undefined, true)}%` : ''
           item.actionText = `中标单位 TOP3`
@@ -1502,6 +1537,8 @@ var vm = new Vue({
       if (Array.isArray(countTop3)) {
         countTop3.forEach((item, index) => {
           item.name = item.name
+          item.type = 'winner'
+          item.id = item.id
           item.subInfo1 = `中标数量:${item.number}个`
           // item.subInfo2 = item.accounted ? `全部占比:${utils.formatMoney(item.accounted * 100, undefined, true)}%` : ''
           item.actionText = `采购单位 TOP3`
@@ -1527,6 +1564,8 @@ var vm = new Vue({
       if (Array.isArray(amountTop3)) {
         amountTop3.forEach((item, index) => {
           item.name = item.name
+          item.type = 'winner'
+          item.id = item.id
           item.subInfo1 = `中标金额:${utils.formatMoney(item.amount / 10000, undefined, true)}万元`
           // item.subInfo2 = item.accounted ? `全部占比:${utils.formatMoney(item.accounted * 100, undefined, true)}%` : ''
           item.actionText = `采购单位 TOP3`
@@ -1612,6 +1651,13 @@ var vm = new Vue({
         }
       })
     },
+    toSubManageButtonClick: function () {
+      if (this.isSubCount) {
+        this.showToast('请联系管理员完善订阅的关键词')
+      } else {
+        this.toSubManage()
+      }
+    },
     toSubManage: function () {
       location.href = '/jyapp/vipsubscribe/toSubVipSetPage?vSwitch=m'
     },

+ 6 - 3
src/jfw/modules/app/src/web/templates/big-member/page_report_analysis.html

@@ -52,6 +52,7 @@
                                 <div class="cell-title">时间</div>
                                 <date-component
                                     ref="dateSelector"
+                                    popup-container="body"
                                     :diy="true"
                                     :times="timeOptions"></date-component>
                             </div>
@@ -107,6 +108,7 @@
                                     <span class="m-overview-type" v-if="item.ringRatio">环比</span>
                                     <span
                                         class="m-overview-ratio"
+                                        v-show="overviewRateTotal"
                                         :class="{
                                             red: item.ringRatio > 0,
                                             green: item.ringRatio < 0
@@ -116,7 +118,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="section-footer section-tip-text">
+                            <div class="section-footer section-tip-text pd-16">
                                 环比:统计学术语,是表示连续2个统计周期(比如连<br />续两月)内的量的变化比。
                             </div>
                         </section>
@@ -148,7 +150,7 @@
                                             <div class="project-name">${ item.projectname }</div>
                                             <div class="project-info">
                                                 <div class="project-tags">
-                                                    <div class="j-tag tag-orange">项目金额:${ item.sortprice }万元</div>
+                                                    <div class="j-tag tag-orange" v-if="item.sortprice">项目金额:${ item.sortprice }万元</div>
                                                     <div class="j-tag tag-plain" v-if="item.area">${ item.area }</div>
                                                     <div class="j-tag tag-plain" v-if="item.city">${ item.city }</div>
                                                 </div>
@@ -316,7 +318,7 @@
                 <div class="popup-header">
                     <div class="header-top">
                         <div class="header-title">选择分析内容</div>
-                        <div class="header-action" @click="toSubManage">订阅管理</div>
+                        <div class="header-action" @click="toSubManageButtonClick">订阅管理</div>
                     </div>
                     <div class="header-bottom">注:如需新增分析内容,请完善您的订阅关键词</div>
                 </div>
@@ -415,6 +417,7 @@
 <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/js/industry-mobile.js?v={{Msg "seo" "version"}}'></script>
 <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/js/cate-mobile.js?v={{Msg "seo" "version"}}'></script>
 <!-- components -->
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/big-member/js/echarts_option.js'></script>
 <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/big-member/js/components/projectScatter.js'></script>
 <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/big-member/js/components/marketTimeScatter.js'></script>
 <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/big-member/js/components/marketAreaScatter.js'></script>

+ 28 - 20
src/web/staticres/common-module/collection/js/area-city-mobile.js

@@ -11,7 +11,7 @@ var areaCityMobileComponentTemplate = `
                 </template>
                 <van-cell
                     clickable
-                    title="全选"
+                    :title="item.name === '全国' ? '全国' : '全选'"
                     :class="{checkActive: item.type}"
                     @click="checkAll(item)"
                 >
@@ -58,7 +58,6 @@ var areaCityMobileComponent = {
   },
   data:function () {
     return {
-      active: 1,
       tablist: [],
       // 原始数组
       provinceListMapExp: {
@@ -144,21 +143,17 @@ var areaCityMobileComponent = {
 
       var provinceList = []
       for (var key in provinceListMap) {
-        if (key === '#') {
-          continue
-        } else {
-          provinceList = provinceList.concat(provinceListMap[key])
-        }
+        provinceList = provinceList.concat(provinceListMap[key])
       }
 
       this.tablist = provinceList.map(function (item) {
         var obj = {
           name: item.name,
-          type: false,
+          type: item.name === '全国',
           children: item.children
         }
         // 如果市直辖市自治区等没有子项的,给他push一个子项
-        if (item.children.length === 0) {
+        if (item.children.length === 0 && item.name !== '全国') {
           obj.children.push({
             name: item.name,
             type: false
@@ -170,11 +165,14 @@ var areaCityMobileComponent = {
     getCitiesFromJSONMap (provinceName) {
       return chinaMapJSON.find(item => item.name.indexOf(provinceName) !== -1)
     },
+    setCountryState (f) {
+      this.tablist[0].type = f
+    },
     setState: function(data) {
       // 设置全国(此处为全部未选中)
       if (!data || Object.keys(data).length === 0) {
         this.allStateChange(false)
-        this.confirmDisabled = true
+        this.setCountryState(true)
       } else {
         for (var key in data) {
           if (data[key].length === 0) {
@@ -202,7 +200,7 @@ var areaCityMobileComponent = {
           }
           
         }
-        this.confirmDisabled = false
+        this.setCountryState(false)
       }
     },
     // 获取当前选中状态
@@ -240,22 +238,32 @@ var areaCityMobileComponent = {
     // 全选或者全不选
     allStateChange: function (type) {
       this.tablist.forEach(function (item) {
-        item.type = type
-        item.children.forEach(function (iitem) {
-          iitem.type = type
-        })
+        if (item.name === '全国') {
+
+        } else {
+          item.type = type
+          item.children.forEach(function (iitem) {
+            iitem.type = type
+          })
+        }
       })
     },
     // 模块全选
     checkAll: function (item) {
-      // 子项跟随全选状态
-      item.type = !item.type
-      item.children.forEach(function (city) {
-        city.type = item.type
-      })
+      if (item.name === '全国') {
+        this.setState()
+      } else {
+        this.setCountryState(false)
+        // 子项跟随全选状态
+        item.type = !item.type
+        item.children.forEach(function (city) {
+          city.type = item.type
+        })
+      }
     },
     // 模块单选
     toggleCheck: function (item, parent) {
+      this.setCountryState(false)
       item.type = !item.type
 
       var state = []

+ 6 - 2
src/web/staticres/common-module/collection/js/date-mobile.js

@@ -19,7 +19,7 @@ var dateComponentTemplate = `
       </div>
   </div>
   <div v-if="type === 'more-picker'">
-    <van-popup v-model="datePicker.startshow" :safe-area-inset-bottom="true" get-container="#date-picker-other-box" round position="bottom" :style="{ height: '46%' }">
+    <van-popup v-model="datePicker.startshow" :safe-area-inset-bottom="true" :get-container="popupContainer" round position="bottom" :style="{ height: '46%' }">
       <div class="j-container">
         <div class="j-header">
           <div class="headertitle">
@@ -53,7 +53,7 @@ var dateComponentTemplate = `
         </div>
       </div>
     </van-popup>
-    <van-popup v-model="datePicker.endshow" :safe-area-inset-bottom="true" get-container="#date-picker-other-box" round position="bottom" :style="{ height: '46%' }">
+    <van-popup v-model="datePicker.endshow" :safe-area-inset-bottom="true" :get-container="popupContainer" round position="bottom" :style="{ height: '46%' }">
       <div class="j-container">
         <div class="j-header">
           <div class="headertitle">
@@ -115,6 +115,10 @@ var dateComponentTemplate = `
 var dateComponent = {
   name: 'date-mobile',
   props: {
+    popupContainer: {
+      type: String,
+      default: '#date-picker-other-box'
+    },
     'selectdate': {
       type: Object,
       default: function () {

+ 18 - 0
src/web/staticres/common-module/collection/js/industry-mobile.js

@@ -167,6 +167,24 @@ var industryComponent = {
         })
         this.canClick = bool
       }
+      // this.checkSelectedAll()
+    },
+    // 检查是否全选
+    checkSelectedAll: function () {
+      this.tablist.forEach(function(item){
+        var children = item[Object.keys(item)[0]]
+        var childrenState = []
+        children.forEach(function(child) {
+          childrenState.push(child)
+        })
+
+        if (childrenState.indexOf(false) === -1) {
+          // 已全选
+          item.type = true
+        } else {
+          item.type = false
+        }
+      })
     },
     // 总全选
     checkBoxAll:function() {

+ 1 - 1
src/web/staticres/common-module/collection/js/keyword-mobile.js

@@ -417,7 +417,7 @@ var keywordComponent = {
           if(data.type){
             keywordArr.push(data.text || data.name)
             classify.a_key.push({
-              key: data.name.split(' '),
+              key: data.text.split(' '),
               notkey: data.notkey.split(' '),
               matchway: data.matchway,
               updatetime: data.updatetime