一、图片
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、前端调用后端接口的写法
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);
})
}
})
js 文件
export function findCertificateData(data) {
return request({
url: 'api/report-Certificate-info/findCertificateData',
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)、组件页面
<!-- 分子公司车辆规模排名TOP10 -->
<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:['枪支','子弹'],
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': '枪支',
"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': '枪支',
"data": gunCount,
"type": "pictorialBar",
"barMaxWidth": "20",
"symbolPosition": "end",
"symbol": "diamond",
"symbolOffset": [
0,
"-50%"
],
"symbolSize": [
30,
12
],
"zlevel": 2
},
{
'name': '子弹',
"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': '子弹',
"data": bullCount,
"type": "pictorialBar",
"barMaxWidth": "20",
"symbolPosition": "end",
"symbol": "diamond",
"symbolOffset": [
0,
"-50%"
],
"symbolSize": [
30,
12
],
"zlevel": -1
}
],
"tooltip": {
"trigger": "axis",
"show": false,
}
})
}
}
}
</script>
标签：vue,name,show,color,data,前端,let,type,写法 From： https://www.cnblogs.com/flyShare/p/17997487