|
|
@@ -0,0 +1,311 @@
|
|
|
+if (typeof Date.prototype.pattern !== 'function') {
|
|
|
+ Date.prototype.pattern = function (fmt) {
|
|
|
+ var o = {
|
|
|
+ 'y+': this.getFullYear(),
|
|
|
+ 'M+': this.getMonth() + 1, //月份
|
|
|
+ 'd+': this.getDate(), //日
|
|
|
+ 'h+': this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时
|
|
|
+ 'H+': this.getHours(), //小时
|
|
|
+ 'm+': this.getMinutes(), //分
|
|
|
+ 's+': this.getSeconds(), //秒
|
|
|
+ 'q+': Math.floor((this.getMonth() + 3) / 3), //季度
|
|
|
+ 'S': this.getMilliseconds(), //毫秒
|
|
|
+ 'E+': this.getDay(), // 周
|
|
|
+ };
|
|
|
+ var week = {
|
|
|
+ '0': '日',
|
|
|
+ '1': '一',
|
|
|
+ '2': '二',
|
|
|
+ '3': '三',
|
|
|
+ '4': '四',
|
|
|
+ '5': '五',
|
|
|
+ '6': '六'
|
|
|
+ };
|
|
|
+ if (/(y+)/.test(fmt)) {
|
|
|
+ fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
|
|
|
+ }
|
|
|
+ if (/(E+)/.test(fmt)) {
|
|
|
+ fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '星期' : '周') : '') + week[
|
|
|
+ this.getDay() + '']);
|
|
|
+ }
|
|
|
+ for (var k in o) {
|
|
|
+ if (new RegExp('(' + k + ')').test(fmt)) {
|
|
|
+ fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k])
|
|
|
+ .length)));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return fmt;
|
|
|
+ }
|
|
|
+}
|
|
|
+var reportListTemplate = `
|
|
|
+<style>
|
|
|
+ .info-card-group {
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #F4F5F7;
|
|
|
+ font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
|
|
|
+
|
|
|
+ }
|
|
|
+ .info-card-group .info-card-item + .info-card-item {
|
|
|
+ margin-top: 17px;
|
|
|
+ }
|
|
|
+ .info-card-group .info-card-item {
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 2px 8px 1px rgba(54, 147, 179, 0.05);
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 16px 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #5E5E64;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .info-card-item .text-title {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #161826;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .info-flex-r-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .info-card-item .info-content-group {
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ .info-card-item .info-content-group .info-content-label {
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .info-card-item .info-content-group .info-flex-r-box {
|
|
|
+ margin-top: 4px;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+ .info-card-item button {
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 12px;
|
|
|
+ width: 271px;
|
|
|
+ height: 36px;
|
|
|
+ background: #2CB7CA;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .info-card-item .toggle-row-box i {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-left: 2px;
|
|
|
+ }
|
|
|
+ .info-card-item .toggle-row-box {
|
|
|
+ color: #2ABDD1;
|
|
|
+ }
|
|
|
+ [v-cloak] {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+ <div id="reportList" class="info-card-group" v-cloak>
|
|
|
+ <van-list
|
|
|
+ v-model="listState.loading"
|
|
|
+ :finished="listState.finished"
|
|
|
+ finished-text="没有更多了"
|
|
|
+ @load="getList"
|
|
|
+ >
|
|
|
+ <div class="info-card-item" v-for="(item, i) in reportList" :key="item.id">
|
|
|
+ <div class="info-flex-r-box">
|
|
|
+ <div class="text-title">报告 @@(item.createTime * 1000)|FormatTime('yyyy-MM-dd HH:mm:ss')@@</div>
|
|
|
+ <div class="info-flex-r-box toggle-row-box" @click="item.open = !item.open">
|
|
|
+ <span>@@item.open ? '收起' : '展开'@@条件</span>
|
|
|
+ <transition name="van-fade">
|
|
|
+ <i class="van-icon" :class="{'van-icon-arrow-down': !item.open, 'van-icon-arrow-up': item.open}"></i>
|
|
|
+ </transition>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-content-group">
|
|
|
+ <div class="info-flex-r-box">
|
|
|
+ <span class="info-content-label">分析内容：</span>
|
|
|
+ <div class="info-content-box" :class="{'van-ellipsis': !item.open}">
|
|
|
+ @@item.keysItems|FormatKeys@@
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-flex-r-box">
|
|
|
+ <span class="info-content-label">时间：</span>
|
|
|
+ <div class="info-content-box" :class="{'van-ellipsis': !item.open}">
|
|
|
+ @@(item.startTime * 1000)|FormatTime('yyyy-MM-dd')@@-@@(item.endTime * 1000)|FormatTime('yyyy-MM-dd')@@
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-flex-r-box">
|
|
|
+ <span class="info-content-label">地区：</span>
|
|
|
+ <div class="info-content-box" :class="{'van-ellipsis': !item.open}">
|
|
|
+ @@item.area|FormatComma@@
|
|
|
+ @@item.city|FormatComma@@
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-flex-r-box">
|
|
|
+ <span class="info-content-label">行业：</span>
|
|
|
+ <div class="info-content-box" :class="{'van-ellipsis': !item.open}">
|
|
|
+ @@item.industry|FormatComma@@
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-flex-r-box">
|
|
|
+ <span class="info-content-label">采购单位类型：</span>
|
|
|
+ <div class="info-content-box" :class="{'van-ellipsis': !item.open}">
|
|
|
+ @@item.buyerclass|FormatComma@@
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <button @click="goReport(item.id)">查看报告</button>
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+`
|
|
|
+var reportListMobileComponent = new Vue({
|
|
|
+ el: '#test',
|
|
|
+ delimiters: ['@@', '@@'],
|
|
|
+ data: function () {
|
|
|
+ return {
|
|
|
+ queryId: 'xxx',
|
|
|
+ listState: {
|
|
|
+ loading: true,
|
|
|
+ finished: false,
|
|
|
+ pageNum: 0,
|
|
|
+ pageSize: 5
|
|
|
+ },
|
|
|
+ reportList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ FormatTime: function (value, fmt) {
|
|
|
+ return new Date(value).pattern(fmt)
|
|
|
+ },
|
|
|
+ FormatComma: function (value) {
|
|
|
+ return value.replace(/,/g, '，')
|
|
|
+ },
|
|
|
+ FormatKeys: function (keys) {
|
|
|
+ var tempStr = ''
|
|
|
+ try {
|
|
|
+ var tempResult= []
|
|
|
+ var tempList = JSON.parse(keys)
|
|
|
+ tempList.forEach(function (v) {
|
|
|
+ v.a_key.forEach(function (k) {
|
|
|
+ tempResult.push({
|
|
|
+ key: [].concat(k.key, k.appendkey),
|
|
|
+ type: k.matchway === 1 ? '精准' : '模糊'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ tempStr = tempResult.map(function (v) {
|
|
|
+ return '[' + v.key.join(' ') + ']' + '-' + v.type
|
|
|
+ }).join('、')
|
|
|
+ } catch (e) {
|
|
|
+
|
|
|
+ }
|
|
|
+ return tempStr
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted: function () {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goReport: function (id) {
|
|
|
+ console.log(id)
|
|
|
+ this.$emit('goReport', id)
|
|
|
+ },
|
|
|
+ getList: function () {
|
|
|
+ var tempRes = {
|
|
|
+ "error_code": 0,
|
|
|
+ "error_msg": "",
|
|
|
+ "data": {
|
|
|
+ "list": [
|
|
|
+ {
|
|
|
+ "area": "北京",
|
|
|
+ "buyerclass": "传媒,检察院,民政,农业",
|
|
|
+ "city": "郑州,开封,商丘",
|
|
|
+ "industry": "行政办公_办公用品,能源化工_化工产品,机械设备_矿山机械",
|
|
|
+ "keysItems": "[{\"a_key\":[{\"appendkey\":[\"引擎\"],\"key\":[\"软件\"],\"matchway\":1,\"notkey\":[\"网站\"],\"updatetime\":1640657393},{\"appendkey\":[\"人工\"],\"key\":[\"智能\"],\"matchway\":0,\"notkey\":[\"报告\"],\"updatetime\":1640657384}],\"s_item\":\"科技\",\"updatetime\":1640657329},{\"a_key\":[{\"appendkey\":[\"绿化\"],\"key\":[\"道路\"],\"matchway\":0,\"notkey\":[\"路面\"],\"updatetime\":1640657384}],\"s_item\":\"建筑\",\"updatetime\":1640657329}]",
|
|
|
+ "rangeTime": "-3year"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "area": "北京",
|
|
|
+ "buyerclass": "传媒,检察院,民政,农业",
|
|
|
+ "city": "郑州,开封,商丘",
|
|
|
+ "industry": "行政办公_办公用品,能源化工_化工产品,机械设备_矿山机械",
|
|
|
+ "keysItems": "[{\"a_key\":[{\"appendkey\":[\"引擎\"],\"key\":[\"软件\"],\"matchway\":1,\"notkey\":[\"网站\"],\"updatetime\":1640657393},{\"appendkey\":[\"人工\"],\"key\":[\"智能\"],\"matchway\":0,\"notkey\":[\"报告\"],\"updatetime\":1640657384}],\"s_item\":\"科技\",\"updatetime\":1640657329},{\"a_key\":[{\"appendkey\":[\"绿化\"],\"key\":[\"道路\"],\"matchway\":0,\"notkey\":[\"路面\"],\"updatetime\":1640657384}],\"s_item\":\"建筑\",\"updatetime\":1640657329}]",
|
|
|
+ "rangeTime": "-3year"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "area": "北京",
|
|
|
+ "buyerclass": "传媒,检察院,民政,农业",
|
|
|
+ "city": "郑州,开封,商丘",
|
|
|
+ "industry": "行政办公_办公用品,能源化工_化工产品,机械设备_矿山机械",
|
|
|
+ "keysItems": "[{\"a_key\":[{\"appendkey\":[\"引擎\"],\"key\":[\"软件\"],\"matchway\":1,\"notkey\":[\"网站\"],\"updatetime\":1640657393},{\"appendkey\":[\"人工\"],\"key\":[\"智能\"],\"matchway\":0,\"notkey\":[\"报告\"],\"updatetime\":1640657384}],\"s_item\":\"科技\",\"updatetime\":1640657329},{\"a_key\":[{\"appendkey\":[\"绿化\"],\"key\":[\"道路\"],\"matchway\":0,\"notkey\":[\"路面\"],\"updatetime\":1640657384}],\"s_item\":\"建筑\",\"updatetime\":1640657329}]",
|
|
|
+ "rangeTime": "-3year"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "area": "北京",
|
|
|
+ "buyerclass": "传媒,检察院,民政,农业",
|
|
|
+ "city": "郑州,开封,商丘",
|
|
|
+ "industry": "行政办公_办公用品,能源化工_化工产品,机械设备_矿山机械",
|
|
|
+ "keysItems": "[{\"a_key\":[{\"appendkey\":[\"引擎\"],\"key\":[\"软件\"],\"matchway\":1,\"notkey\":[\"网站\"],\"updatetime\":1640657393},{\"appendkey\":[\"人工\"],\"key\":[\"智能\"],\"matchway\":0,\"notkey\":[\"报告\"],\"updatetime\":1640657384}],\"s_item\":\"科技\",\"updatetime\":1640657329},{\"a_key\":[{\"appendkey\":[\"绿化\"],\"key\":[\"道路\"],\"matchway\":0,\"notkey\":[\"路面\"],\"updatetime\":1640657384}],\"s_item\":\"建筑\",\"updatetime\":1640657329}]",
|
|
|
+ "rangeTime": "-3year"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "area": "北京",
|
|
|
+ "buyerclass": "传媒,检察院,民政,农业",
|
|
|
+ "city": "郑州,开封,商丘",
|
|
|
+ "industry": "行政办公_办公用品,能源化工_化工产品,机械设备_矿山机械",
|
|
|
+ "keysItems": "[{\"a_key\":[{\"appendkey\":[\"引擎\"],\"key\":[\"软件\"],\"matchway\":1,\"notkey\":[\"网站\"],\"updatetime\":1640657393},{\"appendkey\":[\"人工\"],\"key\":[\"智能\"],\"matchway\":0,\"notkey\":[\"报告\"],\"updatetime\":1640657384}],\"s_item\":\"科技\",\"updatetime\":1640657329},{\"a_key\":[{\"appendkey\":[\"绿化\"],\"key\":[\"道路\"],\"matchway\":0,\"notkey\":[\"路面\"],\"updatetime\":1640657384}],\"s_item\":\"建筑\",\"updatetime\":1640657329}]",
|
|
|
+ "rangeTime": "-3year"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ "total": 5
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $.ajax({
|
|
|
+ // url: '/bigmember/marketAnalysis/analysisHistory',
|
|
|
+ url: '/test',
|
|
|
+ type: 'GET',
|
|
|
+ data: {
|
|
|
+ id: this.queryId,
|
|
|
+ pageNum: this.listState.pageNum,
|
|
|
+ pageSize: this.listState.pageSize
|
|
|
+ },
|
|
|
+ success: function (res) {
|
|
|
+ res = tempRes
|
|
|
+ if (res && res.data && res.error_msg === '') {
|
|
|
+ var tempList = res.data.list.map(function (v) {
|
|
|
+ v.open = false
|
|
|
+ // TODO 下列接口数据待处理
|
|
|
+ v.id = new Date().getTime() + Math.random()
|
|
|
+ v.createTime = new Date().getTime() / 1000
|
|
|
+ v.startTime = new Date().getTime() / 1000
|
|
|
+ v.endTime = new Date().getTime() / 1000
|
|
|
+ return v
|
|
|
+ })
|
|
|
+ this.listState.pageNum++
|
|
|
+ // 本地测试
|
|
|
+ if (this.listState.pageNum > 2) {
|
|
|
+ tempList.pop()
|
|
|
+ }
|
|
|
+ this.reportList = this.reportList.concat(tempList)
|
|
|
+ if (tempList.length < this.listState.pageSize) {
|
|
|
+ this.listState.finished = true
|
|
|
+ }
|
|
|
+ this.listState.loading = false
|
|
|
+ } else {
|
|
|
+ this.listState.finished = true
|
|
|
+ this.listState.loading = false
|
|
|
+ }
|
|
|
+ }.bind(this),
|
|
|
+ error: function (err) {
|
|
|
+ this.listState.finished = true
|
|
|
+ this.listState.loading = false
|
|
|
+ }.bind(this)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
zhangyuhan