vue 前端写法总结
一、图片
1、 <div class="loginDiv" :style="'background-image:url('+Background+');' ">
2、 <img :src="Logo" class="img-logo">
<script> <!-- 引入样式--> import '@/assets/styles/login.scss' /* eslint-disable */ import Background from '@/assets/images/login/login_bg.png' import Logo from '@/assets/images/logo.png' export default { name: "Login", data() { return { Background: Background } } } <style scoped> .img-logo{ width:400px; margin-top: 65px; margin-left: 135px; } </style>
3、多个div 横向排列：display:flex;justify-content:flex-start;
<div style="display:flex;justify-content:flex-start;">
<div class="top-show" :style="'background-image:url('+opeDevelopment+');'">
<div class="menu-font">运营发展</div>
</div>
<div class="top-show" :style="'background-image:url('+dataWarehouse+');'" @click="showData">
<div class="menu-font">业务监管</div>
</div>
<div class="vehiclTime top-show" :style="'background-image:url('+right_top_time+');'">
<el-date-picker
style="width:100%"
v-model="vehiclTime"
class="elDatePicker"
type="month"
placeholder="请选择年月"
format="yyyy-MM"
value-format="yyyyMM"
popper-class="set-date"
:picker-options="expireTimeOption"
:clearable="false" >
</el-date-picker>
</div>
</div>
4、this.$nextTick(()=>{}) 在下次DOM更新循环结束之后执行延迟回调。简单理解是：当数据更新了，在dom中渲染后，自动执行该函数。
5、强制刷新 this.$forceUpdate()
6、前端调用后端接口的写法
（1）const param= new FormData(); param.append("certifiType", row.certifiType); param.append("orgId", row.orgId); findCertificateData(param).then(res=>{ if(res.code == 200){ res.data.reportCertificateInfos.forEach(r=>{ let img = this.$publicjs.qualificationPicture + r.filePath this.pictureOptions.push(img); }) } }) （2）const params = {
repYear:year,
repMonth:month,
orgList:orgList
}
findGroupInfo(params).then(res=>{//集团相关信息
if(res.code == 200){
this.bullCount = res.data.bullCount
this.gunCount = res.data.gunCount
this.cabCount = res.data.cabinetCount
resolve('true')
}
})
js 文件 export function findCertificateData(data) { return request({ url: 'api/report-Certificate-info/findCertificateData', method: 'post', data }) }
export function findGroupInfo(data) {
return request({
url: 'api/areas-provinces/findGroupInfo',
method: 'post',
data
})
}
7、同步调用写法（第一个方法调用完了之后再调用第二个方法，有顺序）
mounted(){ this.$nextTick(()=>{ Promise.all([this.getFourCount(),this.GunReal(), this.getStyles(),this.findGroupInfo()]).then(res=>{ this.show = true }) // 添加监听 window.addEventListener('resize', () => { if(this.gunChart !=null){ this.gunChart.resize(); } if(this.bullChart !=null){ this.bullChart.resize(); } }) }) },
// 销毁 beforeDestroy(){ clearInterval(this.gr) clearInterval(this.ra) },
method:{
GunReal(){
this.getGunRealData()
this.getFourCount()
//5分钟重新获取枪支实时存取记录
this.gr = setInterval(() =>{
this.getGunRealData()
this.getFourCount()
},300000)
},
}
8、页面中的echarts图单独写成组件
<div class="right-div" :style="'background-image:url('+right_top1+');'">
<div class="fontStyle" ><el-link @click="toRouter($publicjs.sysUrl.reportGun)" :underline="false" >数量情况</el-link></div>
<Scale :routerData="routerData"/>
</div>
<script>
import Scale from './screen_gun_statics_componts/gun_scale.vue'
export default {
components: {
Scale,
},
data(){
return {
show:true,
right_top1:require('@/assets/images/screenshow/screen_gun_statics/right_top.png'),
}
},
props:{
routerData:{}
},
</script>
(2)、组件页面
<template> <div :class="className" :style="{height: height, width: width}"/> </template> <script> /* eslint-disable */ import echarts from 'echarts' import { getOrgGunBullCount } from "@/api/report/report_gun_info.js" require('echarts/theme/macarons') // echarts theme export default { props: { datas:{}, className: { type: String, default: 'chart' }, width: { type: String, default: '100%' }, height: { type: String, default: '90%' }, routerData:{} }, data() { return { chart: null, showData: [] } }, beforeDestroy() { if (!this.chart) { return } this.chart.dispose() this.chart = null }, mounted() { this.getOrgGunBullCount() window.addEventListener('resize', () => { if(this.chart !=null){ this.chart.resize(); } }) }, watch:{ 'routerData':'getOrgGunBullCount' }, methods: { getOrgGunBullCount() { let year = this.routerData.slice(0,4) let mouth = this.routerData.slice(4,6) let orgList = [] this.$store.getters.orgList.forEach(r => { if(r.isStatiData == true){ orgList.push(r) } }); const params = { repYear:year, repMonth:mouth, orgList:orgList } getOrgGunBullCount(params).then(res => { if(res.code == 200){ let d = res.data d = d.sort(this.compare('totalCount')) this.dealData(d) } }) }, // 数据处理并排序 dealData(data) { this.showData = [] let orgList = this.$store.getters.orgList for(let i = 0; i < data.length; i++){ let fd = data[i] let sd = { orgId: fd.orgId, name: '', totalCount: fd.totalCount, totalBullCount: fd.totalBullCount } this.showData.push(sd) } // 如果此次查询时，有分子公司未上报数据，需要将分子公司拼接上 for(let j = 0; j < orgList.length; j++) { let org = orgList[j] if(org.isStatiData) { for(let i = 0; i < this.showData.length; i++) { let d = this.showData[i] if(org.orgId == d.orgId) { break }else if(i == this.showData.length - 1) { let sd = { orgId: org.orgId, name: '', totalCount: 0, totalBullCount: 0 } this.showData.push(sd) break } } } } // 公司名赋值 for(let i = 0; i < this.showData.length; i++) { let d = this.showData[i] for(let j = 0; j < orgList.length; j++) { let o = orgList[j] if(d.orgId == o.orgId) { d.name = o.orgShortName break } } } // 生成柱状图 let name = [] let totalCount = [] let totalBullCount = [] for(let i = 0; i < this.showData.length; i++) { let d = this.showData[i] name.push(d.name) totalCount.push(d.totalCount) totalBullCount.push(d.totalBullCount) if(i == this.showData.length - 1) { // 生成柱状图 this.initChart(name, totalCount, totalBullCount) } } }, // 排序方法，从大到小 compare(attr) { return function(a, b){ var val1 = a[attr] var val2 = b[attr] return val2 - val1 } }, initChart(orgShortName,gunCount,bullCount) { this.chart = echarts.init(this.$el, 'macarons') this.chart.setOption({ "textStyle": { "color": "#FFFFFF", "fontSize": 14 }, "toolbox": { "show": false, "feature": { "saveAsImage": { "backgroundColor": "#031245" }, "restore": {} }, "iconStyle": { "borderColor": "#c0c3cd" } }, "legend": { itemWidth:8, itemHeight:8, data:['A','B'], bottom:'bottom', "top": 10, "icon": "circle", "left": "center", "padding": 0, "textStyle": { "color": "#c0c3cd", "fontSize": 14, "padding": [2,0,0,0] } }, "color": [ "#63caff", "#49beff", "#03387a", "#03387a", "#03387a", "#6c93ee", "#a9abff", "#f7a23f", "#27bae7", "#ff6d9d", "#cb79ff", "#f95b5a", "#ccaf27", "#38b99c", "#93d0ff", "#bd74e0", "#fd77da", "#dea700" ], "grid": { "containLabel": true, "left": 20, "right": 20, "bottom": 10, "top": 40 }, "xAxis": { "nameTextStyle": { "color": "#c0c3cd", "padding": [0,0,-10,0 ], "fontSize": 14 }, "axisLabel": { "color": "#FFFFFF", "fontSize": 14, "interval": 0 }, "axisTick": { "lineStyle": { "color": "#384267", "width": 1 }, "show": true }, "splitLine": { "show": false }, "axisLine": { "lineStyle": { "color": "#384267", "width": 1, "type": "dashed" }, "show": true }, "data": orgShortName, "type": "category" }, "yAxis": { "nameTextStyle": { "color": "#c0c3cd", "padding": [ 0, 0, -10, 0 ], "fontSize": 14 }, "axisLabel": { "color": "#FFFFFF", "fontSize": 14 }, "axisTick": { "lineStyle": { "color": "#384267", "width": 1 }, "show": true }, "splitLine": { "show": true, "lineStyle": { "color": "#384267", "type": "dashed" } }, "axisLine": { "lineStyle": { "color": "#384267", "width": 1, "type": "dashed" }, "show": true }, "name": "" }, "series": [ { 'name': 'A', "data": gunCount, "type": "bar", "barMaxWidth": "auto", "barWidth": 30, "itemStyle": { "color": { "x": 0, "y": 0, "x2": 0, "y2": 1, "type": "linear", "global": false, "colorStops": [ { "offset": 0, "color": "#0b9eff" }, { "offset": 1, "color": "#63caff" } ] } }, "label": { "show": true, "position": "top", "distance": 5, "color": "#fff" } }, { "data": [ 1, 1, 1, 1, 1, 1, 1, 1 ], "type": "pictorialBar", "barMaxWidth": "20", "symbol": "diamond", "symbolOffset": [ 0, "50%" ], "symbolSize": [ 30, 15 ] }, { 'name': 'A', "data": gunCount, "type": "pictorialBar", "barMaxWidth": "20", "symbolPosition": "end", "symbol": "diamond", "symbolOffset": [ 0, "-50%" ], "symbolSize": [ 30, 12 ], "zlevel": 2 }, { 'name': 'B', "data": bullCount, "type": "bar", "barMaxWidth": "auto", "barWidth": 30, "barGap": "-100%", "label": { "show": true, "position": "top", "distance": 15, "color": "#fff" }, "zlevel": -1 }, { "data": [ 1, 1, 1, 1, 1, 1, 1, 1 ], "type": "pictorialBar", "barMaxWidth": "20", "symbol": "diamond", "symbolOffset": [ 0, "50%" ], "symbolSize": [ 30, 15 ], "zlevel": -2 }, { 'name': 'B', "data": bullCount, "type": "pictorialBar", "barMaxWidth": "20", "symbolPosition": "end", "symbol": "diamond", "symbolOffset": [ 0, "-50%" ], "symbolSize": [ 30, 12 ], "zlevel": -1 } ], "tooltip": { "trigger": "axis", "show": false, } }) } } } </script>
