global.css
在src下建个css文件建个global.css文件
html,body,#app{
height: 100%;
margin: 0;
padding: 0;
background-color: #ebebeb;
}
import './assets/css/global.css'
登录页图片背景
background-image: url(../assets/1.jpeg);
background-repeat: no-repeat;
background-size: 100% 100%; 只写一个不行
登陆透明色
background: rgba(255, 255, 255, 0.3);
opacity: 0.85;
background-color: #fff;
opacity: .3;
路由
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{
path: '/home', component: Home, children: [
{ path: '/', redirect: '/park' },
{ path: '/park', component: Park },
{ path: '/factory', component: Factory },
{ path: '/user', component: User },
]
}
Home.vue
实现单页面，跳转后的页面就展示在同一个页面
........导航.........
<div class="main">
<router-view></router-view>
</div>
导航冒泡
handleSelect(key, keyPath) {
if (keyPath[1] === "1-1") {
this.$router.push("/park");
} else if (keyPath[1] === "1-2") {
this.$router.push("/factory");
} else if (keyPath[1] === "1-3") {
this.$router.push("/user");
}
路由跳转
this.$router.push(“/parkreport”);
if (this.$route.path === ‘/park’)
侧边栏划过去显示
.menuList {
height: 100vh;
width: 200px;
position: absolute;
left: -198px;
//很往里面去，留出来一点鼠标能经过
z-index: 1001;
//保证在任何页面都能显示
}
.menuList:hover {
left: 0px;
//鼠标经过则显示出来侧边栏
}
.el-menu {
height: 100%;
width: 100%;
//让整个侧边栏占据侧边全屏
z-index: 1002;
}
多选
js中使用splice在一次循环删除数组中的多个元素
splice():该方法会改变原始数组。
// 想删除item是2的元素
var arr = [1, 2, 2];
for (var i = 0; i < arr.length; i++) {
console.log(i + '=' + arr[i]); //i=0 i=1进来 i=2都没进来
if (arr[i] == 2) {
arr.splice(i, 1);//i=1进来之后arr[1]=2，则[1,2,2].splice(1,1) 这个arr就变成了[1,2]
console.log(arr);//[1,2]
}
}
由结果可以看出，这个循环只循环了两次，没有判断当arr[i]=3的情况，这是因为当 arr[2]==2的时候使用splice将该元素删除后，该数组的长度变成了2，此时进行循环已经不满足条件，所以当arr[i]=3的时候没有再进行循环。
解决方法：
var arr = [1, 2, 2];
for (var i = arr.length - 1; i >= 0; i--) {
console.log(i + '=' + arr[i]);//i=2,i=1,i=0都进来了
if (arr[i] == 2) {
arr.splice(i, 1);
console.log(arr);//[1]
}
}
原文https://www.cnblogs.com/xxl910/p/12758821.html
多选互斥实现
<el-table :data="carbonFactoryData" style="width: 100%" :stripe="true" :border="true :header-cell-style="rowClass">
<el-table-column label="类别" width="220">
<template slot-scope="scope">
<el-select v-model="scope.row.value" size="mini" multiple
@change="hasIncludeAllFactory">
<el-option v-for="item in factoryType" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</el-table-column>
carbonFactoryData: [
{
id: 1,
number: "0001",
value: ['全要素'],//多选则数组
}]
factoryType: [{
value: '全要素',
label: '全要素'
}, {
value: '二氧化碳',
label: '二氧化碳'
}, {
value: '气象五参数',
label: '气象五参数'
}],
hasIncludeAllFactory(val = []) {
// if (val.includes('全要素') || val.includes('选项1')) {
if (val.includes('全要素')) {//如果这个数组含有全要素
// console.log(val);
for (let i = val.length - 1; i >= 0; i--) {//倒着的
// if (val.indexOf('全要素') != i && val.indexOf('选项1') != i) {
if (val.indexOf('全要素') != i) {//除了全要素之外的数组里的项全删掉
val.splice(i, 1)
}
}
console.log(val);
}
},
单选互斥
<el-table :data="electricHeatData" style="width: 100%" :stripe="true" :border="true">
<el-table-column label="分类" width="">
<template slot-scope="scope">
<el-select v-model="scope.row.eleClassifyValue" size="mini">
<el-option v-for="item in eleClassifyType" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</el-table-column>
electricHeatData: [{
id: 1,
eleClassifyValue: '外购电力消费'}]
eleClassifyType: [{
value: '外购电力消费',
label: '外购电力消费'
}, {
value: '外购热力消费',
label: '外购热力消费'
}]
el-table中表头跨两列
1、为table添加:header-cell-style=“rowClass”
<el-table :data="carbonFactoryData" style="width: 100%" :stripe="true" :border="true" :header-cell-style="rowClass">
<el-table-column label="定位">
<el-table-column prop="east" width="50"></el-table-column>
<el-table-column prop="eastValue" width="70"></el-table-column>
<el-table-column prop="north" width="50"></el-table-column>
<el-table-column prop="northValue" width="70"></el-table-column>
</el-table-column>
</el-table>
methods: {
rowClass({ row, column, rowIndex, columnIndex }) {
// console.log(rowIndex, columnIndex);
if (rowIndex === 1) {
return { display: 'none' }
}
}
row和column是表格的行和列,里面是当前行和列的值,也就是tableData里的值,rowIndex,columnIndex是当前行和列的序号
* row 表格每一行的数据
* column 表格每一列的数据
* rowIndex 表格的行索引,不包括表头,从0开始
* columnIndex 表格的列索引,从0开始
碳大屏
鼠标经过离开点击，div显示与隐藏
经过则下面div显示，离开则下面div消失。如果点击一下，会固定在那，离开也在那。再点击一下，离开则消失.
离开也不一定false，即不一定div隐藏。想要false还要判断一下isClick，即点击没有，如果没点，isClick为false，所以鼠标离开是false，即离开鼠标隐藏。
infoshowFlag1: false,
isClick:false
<div class="info-icon" @mouseover="infoshowFlag1 = true" @mouseleave="infoshowFlag1=(isClick==true)?true:false" @click="isClick=!isClick">
<div v-show="infoshowFlag1 ">
</div>
盒子垂直水平居中两种方法
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 450px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
底部居中布局
#footer{
position: absolute;
height: 200px;
bottom: 0;
left: 350px;
right: 350px;
}
box-sizing: border-box;
box-sizing：border-box就是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变。
.main-mid {
width: 1178px;
height: 976px;
background-color: red;
margin-top: 19px;
margin-left: 24px;
box-sizing: border-box;
}
加了box-sizing: border-box;之后，写了固定宽高之后，你再设置padding-left: 24px;这个中间的div整体是缩小的，拿出来自身一部分用来做padding-left
float与position会改变display的值为inline-block(除了display：none)
伪元素—inline
1、伪元素:before和:after添加的内容默认是inline元素.两个伪元素的content属性，表示伪元素的内容，设置before和after时必须设置其content属性，否则伪元素不起作用；
2、伪元素是不占位置的；
<style type="text/css">
div::before {
content: "我是BEFORE，";
background-color: green;
width: 100px; /*行内元素不生效的*/
height: 100px;
/*类选择、伪类选择器 就是选区对象
伪元素选择器，本质上是插入一具元素（标签 盒子），只不过是行内元素；*/
}
div::after {
content: "我是AFTER，";
background-color: red;
display: block; /*转成块元素*/
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>我是BODY</div>
</body>
</html>
css伪元素before插入图片
.conteText5{
position: relative;
}
.conteText5::before{
content: '';
position: absolute;
left: 0;
top: 0;
width:12.97pt;
height: 10.66pt;
background-image: url(../../../../static/images/myshop/jingdong.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
伪元素插入图片
.topmessage::before {
content: url(../../assets/右上方效果.png);
position: absolute;
top: 0;
left: 0;
}
文字在图片中居中
文字p，图片img标签引入，之后文字position：absolute
背景图放文字
<div class="topTitle">
<p class="main-title">厂区基本信息</p>
</div>
.topTitle {
background-image: url(../assets/image/parkPlantArea/文字列表标题.png);
width: 291px;
height: 32px;
}
.main-title{
font-size: 18px;
font-family: Microsoft YaHei UI;
font-weight: bold;
color: #ffffff;
line-height: 32px;
margin-left: 35px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.35);
}
font-weight: bold;
text-shadow: 0px 4px 4px rgba(0, 40, 122, 0.5);
大屏最外层样式
background: radial-gradient(circle, #003678, #001948);
width: 1920px;
height: 1080px;
position: relative;
box-sizing: border-box;
时钟
data() {
return {
time: null,//放当前时间显示在页面上
timer:''//放定时器变量
}
},
methods: {
// 时钟
disptime() {
var today = new Date()
var year = today.getFullYear()
var month = today.getMonth()
month = month < 10 ? '0' + month : month
var date = today.getDate() + 1
date = date < 10 ? '0' + date : date
var hh = today.getHours()
hh = hh < 10 ? '0' + hh : hh
var mm = today.getMinutes()
mm = mm < 10 ? '0' + mm : mm
var ss = today.getSeconds()
ss = ss < 10 ? '0' + ss : ss
this.time = year + '/' + month + '/' + date + '/' + ' ' + hh + ':' + mm + ':' + ss
},
nowTimes() {
// var _this = this;
// this.timer = setInterval(() => {
// _this.disptime()
// }, 1000)
this.timer=setInterval(this.disptime,1000)
}
},
created() {
this.nowTimes()
},
destroyed() {
if (this.timer) { // 注意在vue实例销毁前，清除我们的定时器
clearInterval(this.timer);
}
}
element图标
div上面 可以设置颜色 还可以设置字体大小 能改变图标大小
<div class="el-icon-warning" style="font-size: 36px; color: yellow"></div>
<li>PM10</li>
<li style="color: yellow">PM205</li>
修改element的默认属性 加个/deep/
.el-pagination /deep/ .el-pager li{
width:20px;
min-width:20px;
background: transparent;
背景色透明说明使用外层盒子的默认颜色
setInterval的this
mounted() {
console.log(this); //vue
this.setIntervalTime = setInterval(function() {
console.log(this); //windows
},2000),
this.setIntervalTime = setInterval(()=>{
console.log(this);//vue
},2000)
},
${}
format(percentage) {
return '已消耗'+this.percentage+'%'
// return `已消耗${percentage}%`;
}
滚动
height: 220px;
overflow: hidden;
vue-seamless-scroll 无缝滚动 很好用 如果卡了就配置一下属性 https://www.jb51.net/article/243770.html
https://wenku.baidu.com/view/c3c783d44593daef5ef7ba0d4a7302768e996fc5.html
样式
<li
v-for="(item, index) in listData"
:key="index"
style="padding: 10px; margin: 5px"
>
template
这个写个template就很好
<li v-for="(item, index) in alarmListData" :key="index">
<template v-if="item.flag == 0">
<span style="color: #00eaffff">
{{ item.date }}-----{{ item.title }}</span>
<div class="dateBottom"></div>
</template>
<template v-else>
<span style="color: white">
{{ item.date }}-----{{ item.title }}</span>
<div class="dateBottom"></div>
</template>
</li>
引用高德地图
高德地图接口：https://lbs.amap.com/demo/javascript-api/example/map-lifecycle/map-show
地图快速上手：https://lbs.amap.com/api/javascript-api/guide/abc/quickstart?from=api-js_api-guide-abc-prepare
点标记：https://lbs.amap.com/api/javascript-api/guide/overlays/marker
https://lbs.amap.com/demo/javascript-api/example/marker/adaptive-show-multiple-markers
删除点标记：https://lbs.amap.com/demo/javascript-api/example/marker/delete-multiple-markers
设置地图点标记：https://lbs.amap.com/demo/javascript-api/example/map/change-map-center/
vue中用高德地图
https://blog.csdn.net/weixin_52691965/article/details/121796669
安装vue-amap
main.js
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
key: 'e7652a60d88cb54885252bbc6caa8114',
plugin: [
'AMap.Scale', //右下角缩略图插件 比例尺
'AMap.OverView', //地图鹰眼插件
'AMap.ToolBar', //地图工具条
'AMap.MapType', //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
'AMap.PlaceSearch', //POI搜索插件
'AMap.Geolocation', //定位控件，用来获取和展示用户主机所在的经纬度位置
'AMap.Geocoder', //地理编码与逆地理编码服务，用于地址描述与坐标间的相互转换
'AMap.Autocomplete', //输入提示插件
'AMap.MouseTool', //鼠标工具插件
'AMap.MarkerClusterer', //点聚合插件
'AMap.MassMarks' //图海量麻点图层类
],
v: '1.4.4',
uiVersion: '1.0'
});
https://juejin.cn/post/6844903889930551310
vue初始化高德地图报错‘AMap‘ is not defined
在index.html中script引入
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>园区碳排放管理平台</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e7652a60d88cb54885252bbc6caa8114"></script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
初始化地图写在另一个文件的mounted中，可以不在这里调用其他函数，直接把函数里面的东西写出来
<script>
import location from'@/assets/image/parkPlantArea/location.png';
export default {
name: 'parkMonitor',
data() {
return {
map:null
};
},
mounted() {
let that = this;
that.map = new AMap.Map('container', {
zoom: 16, //级别
center: [120.31194,30.20835], //中心点坐标
});
var marker = new AMap.Marker({
icon:location,
position: [120.31194,30.20835] //位置
})
that.map.add(marker); //添加到地图
},
created() {},
methods: {
}
};
</script>
vue 引入本地图片不显示 https://www.csdn.net/tags/OtDacg5sNjg4MjktYmxvZwO0O0OO0O0O.html
182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
