4 files modified
27 files added
| New file |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | |
|---|
| | | <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> |
|---|
| | | <!-- axios --> |
|---|
| | | <script src='../map/lib/axios.js'></script> |
|---|
| | | <script type="text/javascript" charset="utf-8" src="http://webapi.amap.com/maps?v=1.3&key=xxxxxx&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script> |
|---|
| | | <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> |
|---|
| | | <style> |
|---|
| | | #weather{ |
|---|
| | | font-weight: 400; |
|---|
| | | opacity: 0.7; |
|---|
| | | font-size: 14px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | |
|---|
| | | <body> |
|---|
| | | <div id="weather" v-if="begin"> |
|---|
| | | <span class="time"> |
|---|
| | | {{nowTime.year}}年{{nowTime.month}}月{{nowTime.day}}日 {{nowTime.hour}}:{{nowTime.minute}}:{{nowTime.second}} |
|---|
| | | </span> |
|---|
| | | <span class="weathers"> |
|---|
| | | {{weathers.nowWeather}} {{weathers.highTemperature}}-{{weathers.lowTemperature}} |
|---|
| | | </span> |
|---|
| | | </div> |
|---|
| | | <script> |
|---|
| | | var me = new Vue({ |
|---|
| | | el: '#weather', |
|---|
| | | data: { |
|---|
| | | begin: false, |
|---|
| | | weathers: { |
|---|
| | | nowWeather: '', |
|---|
| | | highTemperature: '', |
|---|
| | | lowTemperature: '', |
|---|
| | | }, |
|---|
| | | nowTime: { |
|---|
| | | year: '', |
|---|
| | | month: '', |
|---|
| | | day: '', |
|---|
| | | hour: '', |
|---|
| | | minute: '', |
|---|
| | | second: '', |
|---|
| | | }, |
|---|
| | | city: "南昌", |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | getNewTime() { |
|---|
| | | this.nowTime.year = (new Date()).getFullYear(); |
|---|
| | | this.nowTime.month = (new Date()).getMonth(); |
|---|
| | | this.nowTime.day = (new Date()).getDay(); |
|---|
| | | this.nowTime.hour = (new Date()).getHours() < 10? '0' + (new Date()).getHours():(new Date()).getHours(); |
|---|
| | | this.nowTime.minute = (new Date()).getMinutes() < 10? '0' + (new Date()).getMinutes():(new Date()).getMinutes(); |
|---|
| | | this.nowTime.second = (new Date()).getSeconds() < 10? '0' + (new Date()).getSeconds():(new Date()).getSeconds(); |
|---|
| | | }, |
|---|
| | | getWeather(){ |
|---|
| | | var that = this; |
|---|
| | | var url = `http://wthrcdn.etouch.cn/weather_mini?city=${this.city}` |
|---|
| | | axios.get(url).then((res)=>{ |
|---|
| | | var data = res.data.data, |
|---|
| | | nowDay = data.forecast[0]; |
|---|
| | | that.weathers.nowWeather = nowDay.type; |
|---|
| | | that.weathers.highTemperature = nowDay.high.slice(3); |
|---|
| | | that.weathers.lowTemperature = nowDay.low.slice(3); |
|---|
| | | that.begin = true; |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.getNewTime(); |
|---|
| | | setInterval(() => { |
|---|
| | | this.getNewTime(); |
|---|
| | | }, 1000); |
|---|
| | | setTimeout(() => { |
|---|
| | | this.getWeather(); |
|---|
| | | }, 200); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | </body> |
|---|
| | | |
|---|
| | | </html> |
|---|
| | |
|---|
| | | <script type="text/javascript"> |
|---|
| | | var map = null; |
|---|
| | | function beginJuheMap(map) { |
|---|
| | | map = L.map('map', { //初始化地图 |
|---|
| | | center: [31.87, 120.54], |
|---|
| | | zoom: 12, |
|---|
| | | // crs: L.CRS.EPSG4326, //设置坐标系4326 |
|---|
| | | attributionControl: false, //去掉右下角 |
|---|
| | | zoomControl: false, //去掉缩放 |
|---|
| | | }); |
|---|
| | | L.tileLayer( //添加切片图层 |
|---|
| | | "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", { |
|---|
| | | subdomains: ["1", "2", "3", "4"], |
|---|
| | | attribution: "高德" |
|---|
| | | } |
|---|
| | | ).addTo(map); |
|---|
| | | var markers = L.markerClusterGroup(); |
|---|
| | | |
|---|
| | | var transportIcon = L.Icon.extend({ //图标初始化 |
|---|
| | | options: { |
|---|
| | | iconSize: [30, 30], // 图标尺寸 |
|---|
| | | // iconAnchor: [30, 30], // 图标偏移量 |
|---|
| | | // popupAnchor: [-20, -20] // 弹出框偏移量 |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | var carIcon = new transportIcon({ //引入图标 |
|---|
| | | iconUrl: './img/gray.png' |
|---|
| | | }), |
|---|
| | | planeIcon = new transportIcon({ |
|---|
| | | iconUrl: './img/green.png' |
|---|
| | | }), |
|---|
| | | busIcon = new transportIcon({ |
|---|
| | | iconUrl: './img/red.png' |
|---|
| | | }); |
|---|
| | | console.log(datalist,43545343) |
|---|
| | | for (var i = 0; i < datalist.length; i++) { |
|---|
| | | var a = datalist[i]; |
|---|
| | | var title = a.title; |
|---|
| | | if (a.state == 0) { |
|---|
| | | var marker = L.marker([a.jd, a.wd], { |
|---|
| | | icon: carIcon, |
|---|
| | | title: title |
|---|
| | | }); |
|---|
| | | } else if (a.state == 1) { |
|---|
| | | var marker = L.marker([a.jd, a.wd], { |
|---|
| | | icon: planeIcon, |
|---|
| | | title: title |
|---|
| | | }); |
|---|
| | | } else if (a.state == 2) { |
|---|
| | | var marker = L.marker([a.jd, a.wd], { |
|---|
| | | icon: busIcon, |
|---|
| | | title: title |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | marker.bindPopup(title); |
|---|
| | | markers.addLayer(marker); |
|---|
| | | } |
|---|
| | | map.addLayer(markers); |
|---|
| | | |
|---|
| | | markers.on('click', function(a) { |
|---|
| | | console.log(a.layer, 11111111111); |
|---|
| | | }); |
|---|
| | | map = L.map('map', { //初始化地图 |
|---|
| | | center: [31.87, 120.54], |
|---|
| | | zoom: 12, |
|---|
| | | // crs: L.CRS.EPSG4326, //设置坐标系4326 |
|---|
| | | attributionControl: false, //去掉右下角 |
|---|
| | | zoomControl: false, //去掉缩放 |
|---|
| | | }); |
|---|
| | | L.tileLayer( //添加切片图层 |
|---|
| | | "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", { |
|---|
| | | subdomains: ["1", "2", "3", "4"], |
|---|
| | | attribution: "高德" |
|---|
| | | } |
|---|
| | | ).addTo(map); |
|---|
| | | var markers = L.markerClusterGroup(); |
|---|
| | | |
|---|
| | | var transportIcon = L.Icon.extend({ //图标初始化 |
|---|
| | | options: { |
|---|
| | | iconSize: [30, 30], // 图标尺寸 |
|---|
| | | // iconAnchor: [30, 30], // 图标偏移量 |
|---|
| | | // popupAnchor: [-20, -20] // 弹出框偏移量 |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | var carIcon = new transportIcon({ //引入图标 |
|---|
| | | iconUrl: './img/gray.png' |
|---|
| | | }), |
|---|
| | | planeIcon = new transportIcon({ |
|---|
| | | iconUrl: './img/green.png' |
|---|
| | | }), |
|---|
| | | busIcon = new transportIcon({ |
|---|
| | | iconUrl: './img/red.png' |
|---|
| | | }); |
|---|
| | | console.log(datalist, 43545343) |
|---|
| | | for (var i = 0; i < datalist.length; i++) { |
|---|
| | | var a = datalist[i]; |
|---|
| | | var title = a.title; |
|---|
| | | if (a.state == 0) { |
|---|
| | | var marker = L.marker([a.jd, a.wd], { |
|---|
| | | icon: carIcon, |
|---|
| | | title: title |
|---|
| | | }); |
|---|
| | | } else if (a.state == 1) { |
|---|
| | | var marker = L.marker([a.jd, a.wd], { |
|---|
| | | icon: planeIcon, |
|---|
| | | title: title |
|---|
| | | }); |
|---|
| | | } else if (a.state == 2) { |
|---|
| | | var marker = L.marker([a.jd, a.wd], { |
|---|
| | | icon: busIcon, |
|---|
| | | title: title |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | marker.bindPopup(title); |
|---|
| | | markers.addLayer(marker); |
|---|
| | | } |
|---|
| | | map.addLayer(markers); |
|---|
| | | |
|---|
| | | markers.on('click', function (a) { |
|---|
| | | console.log(a.layer, 11111111111); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | beginJuheMap(map); |
|---|
| | | |
|---|
| | | </script> |
|---|
| | |
|---|
| | | <div class="breadEval"> |
|---|
| | | <div class="breadTitle"> |
|---|
| | | <div class="titles">您的位置：</div> |
|---|
| | | <!-- <button @click="cc">cccc</button> --> |
|---|
| | | <!-- <el-breadcrumb-item style="position: relative;top: -3px;left: 5px">您的位置：</el-breadcrumb-item> --> |
|---|
| | | <!-- <el-breadcrumb-item v-show="!onceRouter" :to="{ path: '/wel/index' }">首页</el-breadcrumb-item> --> |
|---|
| | | <!-- <el-breadcrumb separator="/"> |
|---|
| | | <el-breadcrumb-item |
|---|
| | | :to="item.path" |
|---|
| | | v-for="item of breadListLast" |
|---|
| | | :key="item.path" |
|---|
| | | style="border: hotpink 1px solid" |
|---|
| | | > |
|---|
| | | {{ item.name }} |
|---|
| | | </el-breadcrumb-item> |
|---|
| | | </el-breadcrumb> --> |
|---|
| | | <div |
|---|
| | | class="ourCrumbsl" |
|---|
| | | v-for="(item, index) of breadListLast" |
|---|
| | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="weather"> |
|---|
| | | <IFRAME |
|---|
| | | class="weatherif" |
|---|
| | | WIDTH="310" |
|---|
| | | HEIGHT="30" |
|---|
| | | src="./weather/index.html" |
|---|
| | | scrolling="no" |
|---|
| | | ></IFRAME> |
|---|
| | | </div> |
|---|
| | | <!-- <router-view></router-view> --> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | <script> |
|---|
| | | import axios from "axios"; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | //面包屑解决方案，此方法只适用于面包屑与路由显示顺序一致，例如path：01/02/03 面包屑也是01/02/03 |
|---|
| | | data() { |
|---|
| | |
|---|
| | | if (this.isrf) { |
|---|
| | | //刷新读取localStorage |
|---|
| | | this.breadListLast = JSON.parse(localStorage.getItem("crumbsl")); |
|---|
| | | this.$store.commit("SET_SHOWDATAL", localStorage.getItem("crumbslname")); |
|---|
| | | this.$store.commit( |
|---|
| | | "SET_SHOWDATAL", |
|---|
| | | localStorage.getItem("crumbslname") |
|---|
| | | ); |
|---|
| | | } else { |
|---|
| | | //关闭重写 |
|---|
| | | var path = this.$route.path, |
|---|
| | |
|---|
| | | font-size: 14px; |
|---|
| | | height: 100%; |
|---|
| | | background: #f3f7fd; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | .breadTitle { |
|---|
| | | padding: 20px 30px; |
|---|
| | | padding-left: 80px; |
|---|
| | |
|---|
| | | float: left; |
|---|
| | | font-weight: 400; |
|---|
| | | position: relative; |
|---|
| | | top: -3px; |
|---|
| | | top: 11.15px; |
|---|
| | | a { |
|---|
| | | font-weight: 400; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .weather { |
|---|
| | | position: relative; |
|---|
| | | top: 11.15px; |
|---|
| | | right: 10px; |
|---|
| | | .weatherif{ |
|---|
| | | border: transparent; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | homeItem: { |
|---|
| | | name: "首页", |
|---|
| | | source: "el-icon-s-home", |
|---|
| | | path: "/dataL/homeL", |
|---|
| | | path: "/wel/index", |
|---|
| | | }, |
|---|
| | | dataItem: { |
|---|
| | | name: "数据模式", |
|---|
| | |
|---|
| | | this.$router.push({ path: "/healthcode/healthcode" }); |
|---|
| | | }, |
|---|
| | | down3() { |
|---|
| | | this.$router.push({ path: "/parcel/parcel" }); |
|---|
| | | this.$router.push({ path: "/parcel/parcelKind" }); |
|---|
| | | }, |
|---|
| | | down4() { |
|---|
| | | this.$router.push({ path: "/animalHeat/animalHeat" }); |
|---|
