267 lines
10 KiB
JavaScript
267 lines
10 KiB
JavaScript
let element, layer;
|
|
layui.use(['layer', 'element', 'table'], function () {
|
|
element = layui.element;
|
|
layer = layui.layer;
|
|
var table = layui.table;
|
|
var data = [
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
{id: 2, proName: '李四', teamName: '666', teamLeader: '女', quality: 1, content: '起飞'}
|
|
];
|
|
table.render({
|
|
elem: '#demo',
|
|
data: data,
|
|
skin: 'line',
|
|
page: true,
|
|
cols: [[
|
|
{field: 'id', title: '排名'},
|
|
{field: 'proName', title: '工程名称'},
|
|
{field: 'teamName', title: '班组名称'},
|
|
{field: 'teamLeader', title: '班组长'},
|
|
{field: 'quality', title: '施工质量'},
|
|
]]
|
|
})
|
|
|
|
|
|
//天气echarts图表
|
|
connect2();
|
|
//和风天气API调用
|
|
zephyrineWeather();
|
|
|
|
});
|
|
|
|
|
|
//和风天气API调用
|
|
function zephyrineWeather() {
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition(function(position) {
|
|
let latitude = position.coords.latitude;
|
|
let longitude = position.coords.longitude;
|
|
console.log("经度：" + longitude + ", 纬度：" + latitude);
|
|
let latLon = longitude + ',' + latitude;
|
|
|
|
const apiUrl = `https://devapi.qweather.com/v7/weather/3d?location=${latLon}&key=b353808cee6649dba8ea4c6838319ea4`;
|
|
console.log(apiUrl)
|
|
|
|
fetch(apiUrl)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const dailyWeather = data.daily;
|
|
console.log(dailyWeather)
|
|
if (dailyWeather && Array.isArray(dailyWeather)) {
|
|
dailyWeather.forEach(day => {
|
|
console.log(`日期：${day.fxDate}，天气：${day.textDay}，最高温度：${day.tempMax}℃，最低温度：${day.tempMin}℃`);
|
|
});
|
|
} else {
|
|
console.log('未能获取有效的天气数据');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching weather data:', error);
|
|
});
|
|
});
|
|
} else {
|
|
console.log("浏览器不支持 Geolocation API");
|
|
}
|
|
}
|
|
|
|
|
|
//天气echarts图表
|
|
function connect2(){
|
|
var myChart = echarts.init(document.getElementById('weather_time'));
|
|
var option = {
|
|
grid: {
|
|
show: true,
|
|
backgroundColor: 'transparent',
|
|
opacity: 0.3,
|
|
borderWidth: '0',
|
|
top: '150',
|
|
bottom: '0'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
xAxis: [
|
|
// 日期
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
position: 'top',
|
|
offset: 100,
|
|
zlevel: 100,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
formatter: [
|
|
'{a|{value}}'
|
|
].join('\n'),
|
|
rich: {
|
|
a: {
|
|
color: 'white',
|
|
fontSize: 11
|
|
}
|
|
}
|
|
},
|
|
nameTextStyle: {
|
|
|
|
},
|
|
data: ["25日","26日","27日","28日","29日","30日","31日"]
|
|
},
|
|
// 天气图标
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
position: 'top',
|
|
offset: 20,
|
|
zlevel: 100,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
formatter: function(value, index) {
|
|
return '{' + index + '| }\n{b|' + value + '}'
|
|
},
|
|
rich: {
|
|
0: {
|
|
backgroundColor: {
|
|
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[0]] + '.png')
|
|
image: '../../img/operEnvironment/多云.png'
|
|
},
|
|
height: 30,
|
|
width: 30
|
|
},
|
|
1: {
|
|
backgroundColor: {
|
|
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[1]] + '.png')
|
|
image: '../../img/operEnvironment/多云.png'
|
|
},
|
|
height: 30,
|
|
width: 30
|
|
},
|
|
2: {
|
|
backgroundColor: {
|
|
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[2]] + '.png')
|
|
image: '../../img/operEnvironment/多云.png'
|
|
},
|
|
height: 30,
|
|
width: 30
|
|
},
|
|
3: {
|
|
backgroundColor: {
|
|
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[3]] + '.png')
|
|
image: '../../img/operEnvironment/多云.png'
|
|
},
|
|
height: 30,
|
|
width: 30
|
|
},
|
|
4: {
|
|
backgroundColor: {
|
|
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[4]] + '.png')
|
|
image: '../../img/operEnvironment/多云.png'
|
|
},
|
|
height: 30,
|
|
width: 30
|
|
},
|
|
5: {
|
|
backgroundColor: {
|
|
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[5]] + '.png')
|
|
image: '../../img/operEnvironment/多云.png'
|
|
},
|
|
height: 30,
|
|
width: 30
|
|
},
|
|
6: {
|
|
backgroundColor: {
|
|
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[6]] + '.png')
|
|
image: '../../img/operEnvironment/多云.png'
|
|
},
|
|
height: 30,
|
|
width: 30
|
|
},
|
|
b: {
|
|
color: 'white',
|
|
fontSize: 12,
|
|
lineHeight: 30,
|
|
height: 20
|
|
}
|
|
}
|
|
},
|
|
nameTextStyle: {
|
|
fontWeight: 'bold',
|
|
fontSize: 19
|
|
},
|
|
// data: this.weatherdata.weather
|
|
data: ["小雨","小雨","阴","小雨","多云","小雨","小雨"]
|
|
}
|
|
],
|
|
yAxis: {
|
|
type: 'value',
|
|
show: false,
|
|
axisLabel: {
|
|
formatter: '{value} °C',
|
|
color: 'white'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '最高气温',
|
|
type: 'line',
|
|
data: ["16.3","16.2","17.6","14.2","17.6","15.7","14.3"],
|
|
symbol: 'emptyCircle',
|
|
symbolSize: 10,
|
|
showSymbol: true,
|
|
smooth: true,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#C95843'
|
|
}
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
color: 'white',
|
|
formatter: '{c} °C'
|
|
},
|
|
lineStyle: {
|
|
width: 1,
|
|
// shadowOffsetY: -10,
|
|
// color: 'white'
|
|
},
|
|
areaStyle: {
|
|
opacity: 1,
|
|
// shadowOffsetY: -10,
|
|
color: 'transparent'
|
|
}
|
|
}
|
|
]
|
|
}
|
|
|
|
myChart.setOption(option);
|
|
} |