碳排放管理项目

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值