Skip to content

M
myblogVue_django

yma16 / myblogVue_django

通知 5
Star 1
Fork 0
M
myblogVue_django
提交 b805e45a 编写于 作者: yma16's avatar yma16
浏览文件
操作

perf:按需引入element echarts

上级 d49fa0dc
显示空白变更内容
内联 并排
Showing with 1395 addition and 1430 deletion
.babelrc
浏览文件 @ b805e45a
{
"presets": [
["env", {
[
"env",
{
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
}
],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"],
"plugins": [
"transform-vue-jsx",
"transform-runtime",
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
],
"env": {
"test": {
"presets": ["env", "stage-2"]
......
config/index.js
浏览文件 @ b805e45a
......@@ -11,7 +11,7 @@ module.exports = {
assetsPublicPath: "/",
proxyTable: {
"/api/": {
target: "http://yongma16.xyz/", //后端接口地址
target: "https://yongma16.xyz/", //后端接口地址
ws: true, //接受websocket请求
changeOrigin: true, //是否允许跨越
chunkOrigins: true,
......@@ -20,7 +20,7 @@ module.exports = {
},
},
"/ws_api/": {
target: "ws://yongma16.xyz/ws/webchat/",
target: "wss://yongma16.xyz/ws/webchat/",
ws: true, //接受websocket请求
changeOrigin: true, //是否允许跨越
chunkOrigins: true,
......@@ -58,7 +58,7 @@ module.exports = {
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true,
cssSourceMap: false,
},
build: {
......@@ -74,7 +74,7 @@ module.exports = {
* Source Maps
*/
productionSourceMap: true,
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: "#source-map",
......
index.html
浏览文件 @ b805e45a
......@@ -14,8 +14,7 @@
rel="stylesheet"
href="myblog_static/utils/fx_background/css/core.css"
/>
<!-- 我的阿里图标库 -->
<script src="http://at.alicdn.com/t/font_1957918_9kt1mmflyr8.js"></script>
<style>
body {
background: url(myblog_static/utils/fx_background/image/background.png);
......@@ -43,10 +42,12 @@
<div id="is"></div>
<div id="beautiful"></div>
</div>
</body>
<!-- built files will be auto injected -->
<!-- <script src="myblog_static/utils/fx_background/js/jquery-2.1.4.min.js"></script>-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<!-- 我的阿里图标库 -->
<script src="https://yongma16.xyz/static/aliyunIcon/icon.js"></script>
<script>
L2Dwidget.init({
model: {
......@@ -73,5 +74,4 @@
},
});
</script>
</body>
</html>
src/App.vue
浏览文件 @ b805e45a
......@@ -134,161 +134,158 @@
</template>
<script>
import store from "@/store";
import store from '@/store'
export default {
name: "App",
data() {
name: 'App',
data () {
return {
authSlogan: "yma16",
authSlogan: 'yma16',
chat_flag: false,
msg: "yma16",
msg: 'yma16',
navigate_flag: true,
value: new Date(),
baseUrl: "/api/",
src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
url: "/image/logo/logo.jpg",
baseUrl: '/api/',
src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
url: '/image/logo/logo.jpg',
srcList: [
"https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
"https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
],
headerData: ["从现在开始，种一棵树", "从现在开始，种一棵树"],
readCount: 0,
};
headerData: ['从现在开始，种一棵树', '从现在开始，种一棵树'],
readCount: 0
}
},
computed: {
currentUserName: function () {
return store.state.user.userInfo && store.state.user.userInfo.name
? store.state.user.userInfo.name
: "游客";
},
: '游客'
}
},
mounted() {
this.addReadCountFun();
this.readCountFun();
mounted () {
this.addReadCountFun()
this.readCountFun()
},
methods: {
jumpIpDns: function () {
try {
window.open("https://beian.miit.gov.cn");
window.open('https://beian.miit.gov.cn')
} catch (r) {
window.location.href = "https://beian.miit.gov.cn";
throw Error(r);
window.location.href = 'https://beian.miit.gov.cn'
throw Error(r)
}
},
addReadCountFun: function () {
const that = this;
let clientIp = "未知";
const that = this
let clientIp = '未知'
try {
console.warn("ip待定");
console.warn('ip待定')
} catch (e) {
console.warn(e);
console.warn(e)
}
that.$axios
.post(this.baseUrl + "count/add/", {
ip: clientIp,
.post(this.baseUrl + 'count/add/', {
ip: clientIp
})
.then((res) => {
console.log(res);
console.log(res)
})
.catch((e) => {
throw Error(e);
});
throw Error(e)
})
},
readCountFun: function () {
let that = this;
let that = this
that.$axios
.get(that.baseUrl + "count/get/")
.get(that.baseUrl + 'count/get/')
.then((res) => {
this.readCount = res.data.num;
this.readCount = res.data.num
})
.catch((error) => {
console.log(error);
});
throw Error(error)
})
},
changeNavigate: function () {
this.navigate_flag = !this.navigate_flag; // 取反
this.navigate_flag = !this.navigate_flag // 取反
},
handleOpen(key, keyPath) {
console.log(key, keyPath);
if (key === "3") {
console.log("打开3号");
this.chat_flag = true;
this.onlineWebsocket(); // 调用跳转
handleOpen (key, keyPath) {
console.log(key, keyPath)
if (key === '3') {
this.chat_flag = true
this.onlineWebsocket() // 调用跳转
}
if (key === "2-1") {
this.chat_flag = false;
this.loginAction(); // 调用跳转
if (key === '2-1') {
this.chat_flag = false
this.loginAction() // 调用跳转
}
if (key === "2-2") {
this.chat_flag = false;
this.registerAction(); // 调用跳转
if (key === '2-2') {
this.chat_flag = false
this.registerAction() // 调用跳转
}
},
handleClose(key, keyPath) {
console.info(key, keyPath);
if (key === "3") {
this.chat_flag = false;
handleClose (key, keyPath) {
console.info(key, keyPath)
if (key === '3') {
this.chat_flag = false
}
},
jumpRouter: function (params) {
this.$router
.push({
name: `${params}`,
name: `${params}`
})
.catch((error) => {
console.log(error);
});
throw Error(error)
})
},
onlineWebsocket: function () {
// console.log(this.$router);
this.$router
.push({
path: "/onlinewebsocket",
path: '/onlinewebsocket'
})
.catch((error) => {
throw Error(error);
});
throw Error(error)
})
},
jumpToEcharts: function () {
// console.log(this.$router);
this.$router
.push({
path: "/bilicom",
path: '/bilicom'
})
.catch((error) => {
console.log(error);
});
throw Error(error)
})
},
jumpToAdmin: function () {
this.$router
.push({
path: "/mavoneditor",
path: '/mavoneditor'
})
.catch((error) => {
console.log(error);
});
throw Error(error)
})
},
loginAction: function () {
this.$router
.push({
path: "/login",
path: '/login'
})
.catch((error) => {
console.log(error);
});
throw Error(error)
})
},
registerAction: function () {
this.$router
.push({
path: "/register",
path: '/register'
})
.catch((error) => {
console.log(error);
});
},
},
};
throw Error(error)
})
}
}
}
</script>
<style>
......
src/components/Article.vue
浏览文件 @ b805e45a
......@@ -213,7 +213,7 @@
</template>
<script>
import Email from '@/components/email/Email'
import Email from '@/components/email/Email'
import VueMarkdown from "vue-markdown";
import ArticleComment from "@/comment/ArticleComment";
import EchartWeather from "@/weather/EchartWeather";
......
src/components/Bilicom.vue
浏览文件 @ b805e45a
......@@ -6,7 +6,6 @@
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'Bilicom',
data () {
......@@ -18,6 +17,9 @@ export default {
},
methods: {
echartfunc: function () {
// echarts
const echarts = this.$echarts
if (!echarts) return
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('bilicom'))
const option = {
......
src/components/Loading.vue 已删除 100644 → 0
浏览文件 @ d49fa0dc
<template>
<div id="loading">
<canvas id="fbxload" style="width: 100%; height: 100%"> </canvas>
</div>
</template>
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
// threejs引入
export default {
name: 'Loading',
data () {
return {
msg: 'fbxloading'
}
},
methods: {
loadingFbx: function () {
const scene = new THREE.Scene()
const width = window.innerWidth
const height = window.innerHeight
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 100)
const canvas = document.querySelector('#fbxload') // 根据canvas的id获取dom节点
console.log(canvas)
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true }) // 渲染场景
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
controls.update()
camera.position.z = 5
// const geometry = new THREE.BoxGeometry();
// const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// const cube = new THREE.Mesh(geometry, material);
const light = new THREE.AmbientLight(0x0000ff) // 蓝色环境环境光
scene.add(light)
// scene.add(cube);
const gltfLoader = new GLTFLoader()
gltfLoader.load(
'/myblog_static/utils/fx_background/model/glb/snow.glb',
function (gltf) {
console.log(gltf)
scene.add(gltf.scene)
},
undefined,
function (error) {
console.error(error)
}
)
function animate () {
// 渲染
renderer.render(scene, camera)
requestAnimationFrame(animate)
}
animate()
}
},
created () {
window.onload = this.loadingFbx // dom加载完再执行
}
}
</script>
<style scoped>
#loading {
width: 100%;
height: 100%;
line-height: 1em;
}
#fbxload {
width: 100%;
height: 100%;
}
</style>
src/components/Login.vue
浏览文件 @ b805e45a
......@@ -61,7 +61,7 @@ export default {
}
const validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'))
callback(new Error('密码不能为空'))
} else {
callback()
}
......
src/components/Onlinewebsocket.vue
浏览文件 @ b805e45a
......@@ -32,7 +32,7 @@
>
<div
v-bind:class="[
{ room_active: index == room_loc },
{ room_active: index === room_loc },
room_defaultClass,
]"
@click="changeRoom(item, index)"
......@@ -75,13 +75,13 @@
class="text item"
>
<!-- {{item}} -->
<template v-if="item.room == room_select">
<template v-if="item.room === room_select">
<div
v-for="(item2, index2) in item.content"
:key="index2"
class="msgClass"
v-bind:class="[
{ info_active: ws_flag == true },
{ info_active: ws_flag === true },
info_defaultClass,
]"
>
......@@ -125,333 +125,302 @@
</template>
<script>
import VueMarkdown from "vue-markdown";
import axios from "axios";
import VueMarkdown from 'vue-markdown'
import axios from 'axios'
export default {
components: {
VueMarkdown,
VueMarkdown
},
name: "Onlinewebsocket",
data() {
name: 'Onlinewebsocket',
data () {
return {
ws_flag: false,
msg: "连接中",
send_info: "hello world!",
room_name: ["DjangoVue"],
room_select: "",
msg: '连接中',
send_info: 'hello world!',
room_name: ['DjangoVue'],
room_select: '',
// baseUrl: "http://localhost:8006/webchat/index/",
baseUrl: "http://yongma16.xyz/api/",
baseUrl: 'https://yongma16.xyz/api/',
// websocketUrl: "/ws_api/",
websocketUrl: "ws://yongma16.xyz/ws-api/",
websocketUrl: 'wss://yongma16.xyz/ws-api/',
websocket: null,
// room 存房间名字，content保存聊天信息的数组
chat_info: new Array(),
chat_room: null,
room_loc: 0,
user: "",
user: '',
cookieValue: document.cookie,
chatCount: 0,
personCount: 0,
sendmsg: "",
getmsg: "",
sendmsg: '',
getmsg: '',
// 房间索引0
chatRoomIndex: 0,
chatRoomIndex: 0
// msg='连接成功'
};
},
watch() {
// cookieValue:function(newValue,oldValue){
// this.user=newValue
// console.log(newValue,oldValue)
// return newValue
// }
},
beforeDestroy() {
// window.removeEventListener("onload",this.initWebsocket());
}
},
mounted() {
mounted () {
// 判断是否登录
this.judeIsLogin();
// window.addEventListener("onload",this.initWebsocket());
this.judeIsLogin()
},
methods: {
judeIsLogin() {
judeIsLogin () {
try {
console.log(
"domMain",
document.getElementById("mainappid"),
document.getElementById("mainappid").style
);
document.getElementById("mainappid").style.padding = "0";
document.getElementById("mainappid").style.margin = "0";
'domMain',
document.getElementById('mainappid'),
document.getElementById('mainappid').style
)
document.getElementById('mainappid').style.padding = '0'
document.getElementById('mainappid').style.margin = '0'
} catch (e) {
console.log("e", e);
}
// let that = this;
// console.log("cookie");
// let strcookie = document.cookie; //获取cookie字符串
// let arrcookie = strcookie.split(";"); //分割
// let length = arrcookie.length;
// //遍历匹配
// for (let i = 0; i < length; i++) {
// let arr = arrcookie[i].split("=");
// let arrname = arr[0].replace(" ", "");
// // 划分为两个
// if (arrname == "user") {
// that.user = arr[1];
// let selectNameDom = document.getElementById("selectNameId");
// console.log(selectNameDom);
// selectNameDom.style.display = "none";
// }
// console.log(arrname == "user", arrname + "：" + arr[1]);
// }
console.log('e', e)
}
},
registerUsername() {
let selectNameDom = document.getElementById("selectNameId");
console.log(selectNameDom);
selectNameDom.style.display = "none";
registerUsername () {
let selectNameDom = document.getElementById('selectNameId')
console.log(selectNameDom)
selectNameDom.style.display = 'none'
//
this.initWebsocket();
this.getRoom(this.room_loc);
this.initRoom();
this.initWebsocket()
this.getRoom(this.room_loc)
this.initRoom()
// this.cookiePrint(); //打印cookie
},
clearChat() {
clearChat () {
// 清空消息
this.chatCount = 0;
this.chat_info = new Array();
// console.log('this.websocket.chat_info',this.websocket.chat_info)
// console.log('this.websocket.chat_info.content',this.websocket.chat_info.content)
this.websocket.chat_info[this.chatRoomIndex].content = [];
// console.log('this.websocket.chat_info.content',this.websocket.chat_info.content)
// this.websocket.chat_info=null;
// this.websocket.chat_info=new Array()
this.chatCount = 0
this.chat_info = new Array()
this.websocket.chat_info[this.chatRoomIndex].content = []
},
cookiePrint() {
let that = this;
console.log("cookie");
let strcookie = document.cookie; //获取cookie字符串
let arrcookie = strcookie.split(";"); //分割
let length = arrcookie.length;
//遍历匹配
cookiePrint () {
let that = this
console.log('cookie')
let strcookie = document.cookie // 获取cookie字符串
let arrcookie = strcookie.split(';') // 分割
let length = arrcookie.length
// 遍历匹配
for (let i = 0; i < length; i++) {
let arr = arrcookie[i].split("=");
let arrname = arr[0].replace(" ", "");
let arr = arrcookie[i].split('=')
let arrname = arr[0].replace(' ', '')
// 划分为两个
if (arrname == "user") {
that.user = arr[1];
if (arrname === 'user') {
that.user = arr[1]
}
console.log(arrname == "user", arrname + "：" + arr[1]);
console.log(arrname === 'user', arrname + '：' + arr[1])
}
},
info_defaultClass: function () {
console.log("发送消息的css");
console.log('发送消息的css')
},
room_defaultClass: function () {
console.log("选中房间的css");
console.log('选中房间的css')
},
getRoom: function (room_loc) {
// 更新index
this.room_loc = room_loc;
console.log("获取房间");
this.room_loc = room_loc
console.log('获取房间')
axios
.get(this.baseUrl + "webchat/index/")
.get(this.baseUrl + 'webchat/index/')
.then((res) => {
console.log("返回", res);
console.log('返回', res)
})
.catch((error) => {
console.log("error", error);
});
console.log('error', error)
})
},
initRoom: function () {
// 用户信息
// 日期格式化
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
S: this.getMilliseconds(), //毫秒
};
if (/(y+)/.test(fmt))
'M+': this.getMonth() + 1, // 月份
'd+': this.getDate(), // 日
'H+': this.getHours(), // 小时
'm+': this.getMinutes(), // 分
's+': this.getSeconds(), // 秒
'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
S: this.getMilliseconds() // 毫秒
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
(this.getFullYear() + "").substr(4 - RegExp.$1.length)
);
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
(this.getFullYear() + '').substr(4 - RegExp.$1.length)
)
}
for (var k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length == 1
RegExp.$1.length === 1
? o[k]
: ("00" + o[k]).substr(("" + o[k]).length)
);
return fmt;
};
: ('00' + o[k]).substr(('' + o[k]).length)
)
}
}
return fmt
}
this.room_select = this.room_name[0];
this.room_select = this.room_name[0]
},
changeRoom: function (roomName, roomLoc) {
this.room_loc = roomLoc;
this.room_select = roomName;
this.room_loc = roomLoc
this.room_select = roomName
// 新建连接
// this.initWebsocket(roomName)
console.log("选择房间", roomName);
console.log('选择房间', roomName)
// console.log(that)
},
initWebsocket: function (roomName) {
try {
if (this.websocket) {
this.websocket.close();
this.websocket.close()
}
} catch (e) {
console.log("关闭失败！", e);
console.log('关闭失败！', e)
}
// 触发+1
this.personCount++;
this.personCount++
// 默认第一个房间
let room = roomName != undefined ? roomName : this.room_name[0];
let room = roomName !== undefined ? roomName : this.room_name[0]
// 判断房间是否存在，不存在则创建房间
let chatRoomIndex = 0;
let chatRoomIndex = 0
try {
//判断房间是否存在
let roomFlag = false;
// 判断房间是否存在
let roomFlag = false
this.chat_info.map((item, index) => {
if (item.room == roomName) {
if (item.room === roomName) {
// 房间存在
console.log("房间存在", roomName);
roomFlag = true;
chatRoomIndex = index;
console.log('房间存在', roomName)
roomFlag = true
chatRoomIndex = index
}
});
})
if (!roomFlag) {
// 房间不存在，创建
let roomObject = {
room: room,
content: [],
};
this.chat_info.push(roomObject);
console.log("创建房间", this.chat_info);
content: []
}
this.chat_info.push(roomObject)
console.log('创建房间', this.chat_info)
}
} catch (e) {
console.log("创建房间出错", e);
}
this.chatRoomIndex = chatRoomIndex;
const wsUrl = this.websocketUrl;
this.websocket = new WebSocket(wsUrl + room + "/"); // 连接
console.log(this.websocket, "聊天室");
this.websocket.onmessage = this.websocketMessage; // 函数指向
this.websocket.onopen = this.websocketOpen;
this.websocket.onerror = this.websocketError;
this.websocket.onclose = this.websocketClose;
console.log('创建房间出错', e)
}
this.chatRoomIndex = chatRoomIndex
const wsUrl = this.websocketUrl
this.websocket = new WebSocket(wsUrl + room + '/') // 连接
console.log(this.websocket, '聊天室')
this.websocket.onmessage = this.websocketMessage // 函数指向
this.websocket.onopen = this.websocketOpen
this.websocket.onerror = this.websocketError
this.websocket.onclose = this.websocketClose
// 保存数据 临时容器 房间号
this.websocket.chat_info = JSON.parse(JSON.stringify(this.chat_info));
this.websocket.chatRoomIndex = chatRoomIndex;
console.log("实例websocket", this.websocket);
this.websocket.chat_info = JSON.parse(JSON.stringify(this.chat_info))
this.websocket.chatRoomIndex = chatRoomIndex
console.log('实例websocket', this.websocket)
},
websocketMessage: function (e) {
console.log("聊天信息", JSON.parse(JSON.stringify(e.data)));
let res = JSON.parse(e.data);
console.log('聊天信息', JSON.parse(JSON.stringify(e.data)))
let res = JSON.parse(e.data)
if (res.message.info.isTrusted) {
console.log("accsee right!");
console.log('accsee right!')
// 人数记录,只会后加入的
}
if (true) {
let flag = true
if (flag) {
// 房间计数
this.personCount = res.message.person_count
? res.message.person_count
: 0;
let getUser = res.message.user;
: 0
let getUser = res.message.user
let getinfo = res.message.info.isTrusted
? `欢迎${getUser}加入聊天室`
: res.message.info;
this.getmsg = getinfo;
this.msg = this.sendmsg == this.getmsg ? "连接聊天室成功" : "";
let getTime = res.message.create_time;
: res.message.info
this.getmsg = getinfo
this.msg = this.sendmsg === this.getmsg ? '连接聊天室成功' : ''
let getTime = res.message.create_time
let message = {
user: getUser,
message: getinfo,
create_time: getTime,
};
create_time: getTime
}
// 添加信息
this.websocket.chat_info[this.websocket.chatRoomIndex].content.push(
message
);
)
// 交换数据
this.chat_info = this.websocket.chat_info;
this.chatCount++;
console.log("信息", this.chat_info);
this.chat_info = this.websocket.chat_info
this.chatCount++
console.log('信息', this.chat_info)
setTimeout((o) => {
try {
let dom = document.getElementById("idChat");
console.log("滚动前", dom.scrollTop, dom.scrollHeight);
dom.scrollTop = parseInt(dom.scrollHeight);
console.log("滚动后", dom.scrollTop, dom.scrollHeight);
dom.scrollTop = dom.scrollHeight;
let dom = document.getElementById('idChat')
console.log('滚动前', dom.scrollTop, dom.scrollHeight)
dom.scrollTop = parseInt(dom.scrollHeight)
console.log('滚动后', dom.scrollTop, dom.scrollHeight)
dom.scrollTop = dom.scrollHeight
// document.getElementById('idChat').scrollTop+=20
} catch (e) {
console.log(e);
console.log(e)
}
}, 100);
}, 100)
}
},
websocketOpen: function (info) {
this.websocketSend(info);
this.websocketSend(info)
// this.send_info=''//清空
},
websocketSend: function (data) {
this.sendmsg = data;
this.sendmsg = data
// 名字，消息，时间
let sendData = {
person_count: this.personCount,
user: this.user,
info: data,
create_time: new Date().Format("yyyy-MM-dd HH:mm:ss"),
};
create_time: new Date().Format('yyyy-MM-dd HH:mm:ss')
}
// this.msg='消息发送中'
console.log("消息发送中");
console.log('消息发送中')
let info = JSON.stringify({
message: sendData,
});
message: sendData
})
try {
this.websocket.send(info);
this.websocket.send(info)
// this.msg=''
} catch (e) {
console.log("消息发送失败", e);
this.msg = "连接失败";
console.log('消息发送失败', e)
this.msg = '连接失败'
}
},
websocketError: function () {
this.msg = "连接失败";
let selectNameDom = document.getElementById("selectNameId");
console.log(selectNameDom);
selectNameDom.style.display = "block";
window.alert("websocket连接失败！");
this.msg = '连接失败'
let selectNameDom = document.getElementById('selectNameId')
console.log(selectNameDom)
selectNameDom.style.display = 'block'
window.alert('websocket连接失败！')
// this.initWebsocket()// 重连
},
websocketClose: function (e) {
// 人数减一
this.personCount = this.personCount > 0 ? this.personCount-- : 0;
this.msg = "离开";
console.log("离开", e);
let selectNameDom = document.getElementById("selectNameId");
console.log(selectNameDom);
selectNameDom.style.display = "block";
this.personCount = this.personCount > 0 ? this.personCount-- : 0
this.msg = '离开'
console.log('离开', e)
let selectNameDom = document.getElementById('selectNameId')
console.log(selectNameDom)
selectNameDom.style.display = 'block'
// 触发减一
}
},
},
destroyed() {
this.websocketClose(); // 关闭
},
};
destroyed () {
this.websocketClose() // 关闭
}
}
</script>
<style scoped>
......
src/components/Register.vue
浏览文件 @ b805e45a
......@@ -77,114 +77,114 @@
</template>
<script>
import axios from "axios";
import axios from 'axios'
export default {
name: "Register",
data() {
name: 'Register',
data () {
const checkName = (rule, value, callback) => {
if (!value) {
return callback(new Error("账号不能为空"));
return callback(new Error('账号不能为空'))
}
setTimeout(() => {
// if (!Number.isInteger(value)) {
// callback(new Error('请输入密码'));
// } if {
if (value.length < 2) {
callback(new Error("名字至少两位"));
callback(new Error('名字至少两位'))
} else {
callback();
callback()
}
}, 1000)
}
}, 1000);
};
const validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
if (value === '') {
callback(new Error('密码不能为空'))
} else {
if (this.ruleForm.checkPass !== "") {
this.$refs.ruleForm.validateField("checkPass");
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass')
}
callback()
}
callback();
}
};
const validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
if (value === '') {
callback(new Error('请确认密码'))
} else if (value !== this.ruleForm.pass) {
callback(new Error("两次输入密码不一致!"));
callback(new Error('密码不一致!'))
} else {
callback();
callback()
}
}
};
return {
loading:false,
loading: false,
register_success: false,
register_error: false,
// baseurl: "http://127.0.0.1/",
baseurl: "/api/",
baseurl: '/api/',
// baseurl: 'http://yongma16.xyz/',
ruleForm: {
pass: "",
checkPass: "",
name: "",
pass: '',
checkPass: '',
name: ''
},
rules: {
pass: [{ validator: validatePass, trigger: "blur" }],
checkPass: [{ validator: validatePass2, trigger: "blur" }],
name: [{ validator: checkName, trigger: "blur" }],
},
};
pass: [{ validator: validatePass, trigger: 'blur' }],
checkPass: [{ validator: validatePass2, trigger: 'blur' }],
name: [{ validator: checkName, trigger: 'blur' }]
}
}
},
methods: {
submitForm(formName) {
submitForm (formName) {
this.$refs[formName].validate((valid) => {
const that = this;
const that = this
if (valid) {
that.loading=false
that.loading = false
// 提交数据
// alert("yes submit!");
that.register_success = false; // 初始化register的状态
that.register_error = false;
that.register_success = false // 初始化register的状态
that.register_error = false
axios
.post(that.baseurl + "user/register/", {
.post(that.baseurl + 'user/register/', {
// 传递的名字和密码
name: that.ruleForm.name,
password: that.ruleForm.pass,
password: that.ruleForm.pass
})
.then(function (res) {
if (res.data.code === 0) {
document.cookie = `user=${that.ruleForm.name}`;
that.register_error = true;
document.cookie = `user=${that.ruleForm.name}`
that.register_error = true
that.$message({
message: "名称重复" + that.ruleForm.name + "!",
type: "error",
});
message: '名称重复' + that.ruleForm.name + '!',
type: 'error'
})
} else {
that.register_success = true;
that.register_success = true
that.$message({
message: "注册成功，欢迎您，" + that.ruleForm.name + "!",
type: "success",
});
message: '注册成功，欢迎您，' + that.ruleForm.name + '!',
type: 'success'
})
}
that.loading=false
that.loading = false
})
.catch(function (res) {
// 获取res中的name
that.loading=false
that.loading = false
that.$message({
message: "注册失败" + that.ruleForm.name + "!",
type: "error",
});
});
message: '注册失败' + that.ruleForm.name + '!',
type: 'error'
})
})
} else {
return false;
return false
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
})
},
};
resetForm (formName) {
this.$refs[formName].resetFields()
}
}
}
</script>
<style scoped>
......
src/echarts/Map.vue
浏览文件 @ b805e45a
......@@ -27,13 +27,12 @@
</template>
<script>
import * as echarts from "echarts";
import axios from "axios";
import axios from 'axios'
export default {
name: "Map",
data() {
name: 'Map',
data () {
return {
msg: "map组件内层",
msg: 'map组件内层',
option: {},
// gisData
gisData: null,
......@@ -47,264 +46,267 @@ export default {
// 气泡层
locationGis: [],
// 城市
focusCity: "贵阳市",
clickCity: "未选择",
focusCity: '贵阳市',
clickCity: '未选择',
// 坐标
focusGeo: null,
// 终点选择
aimPointData: [],
};
aimPointData: []
}
},
watch: {
focusCity: function (oldValue, newValue) {
console.log(oldValue, newValue);
console.log(oldValue, newValue)
// this.mapEchart.clear()
this.initOptionData();
},
this.initOptionData()
}
},
mounted() {
this.initDomDiv();
this.initOptionData();
mounted () {
this.initDomDiv()
this.initOptionData()
},
methods: {
initDomDiv: function () {
let mapDom = document.getElementById("echartMapid");
this.mapEchart = echarts.init(mapDom);
const echarts = this.$echarts
if (!echarts) return
let mapDom = document.getElementById('echartMapid')
this.mapEchart = echarts.init(mapDom)
// 显示加载
this.mapEchart.showLoading({
text: "初始化",
});
console.log("dom", this.mapEchart);
text: '初始化'
})
console.log('dom', this.mapEchart)
try {
console.log(
"domMain",
document.getElementById("mainappid"),
document.getElementById("mainappid").style
);
document.getElementById("mainappid").style.padding = "0";
document.getElementById("mainappid").style.margin = "0";
'domMain',
document.getElementById('mainappid'),
document.getElementById('mainappid').style
)
document.getElementById('mainappid').style.padding = '0'
document.getElementById('mainappid').style.margin = '0'
} catch (e) {
console.log("e", e);
console.log('e', e)
}
},
refreshEchart: function () {
this.mapEchart.clear();
this.mapEchart.clear()
this.mapEchart.showLoading({
text: "刷新中",
text: '刷新中'
// color: 'blue',
// opacity: 0.2
});
this.initOptionData();
})
this.initOptionData()
},
initOptionData: function () {
var that = this;
const echarts = this.$echarts
if (!echarts) return
let that = this
// 置空
that.linesCoord = [];
function task1() {
that.linesCoord = []
function task1 () {
return new Promise((resolve) => {
setTimeout(() => {
console.log("第1个任务geojson获取");
console.log('第1个任务geojson获取')
axios
.get("http://yongma16.xyz/static/json/map/guizhou.json")
.get('https://yongma16.xyz/static/json/map/guizhou.json')
.then(function (response) {
var res = response.data;
that.gisData = res;
console.log("贵州数据", res);
let itemData = res.features;
let length = itemData.length;
that.aimPointData = [];
let res = response.data
that.gisData = res
console.log('贵州数据', res)
let itemData = res.features
let length = itemData.length
that.aimPointData = []
for (let loc = 0; loc < length; ++loc) {
let name = itemData[loc].properties.name;
let name = itemData[loc].properties.name
that.aimPointData.push({
value: name,
});
let center = itemData[loc].properties.center;
value: name
})
let center = itemData[loc].properties.center
// 中心位置
if (name == that.focusCity) {
that.centerLoction = center;
if (name === that.focusCity) {
that.centerLoction = center
}
}
for (let loc = 0; loc < length; ++loc) {
let name = itemData[loc].properties.name;
let number = (Math.random() * 100).toFixed(2);
let center = itemData[loc].properties.center;
let name = itemData[loc].properties.name
let number = (Math.random() * 100).toFixed(2)
let center = itemData[loc].properties.center
that.locationGis.push({
value: center,
});
value: center
})
// eslint-disable-next-line eqeqeq
if (name != that.focusCity) {
that.linesCoord.push([center, that.centerLoction]);
if (name !== that.focusCity) {
that.linesCoord.push([center, that.centerLoction])
}
// eslint-disable-next-line eqeqeq
if (name && name != "") {
if (name && name !== '') {
let temp = {
name: `${name}`,
value: Number(number),
};
that.airData.push(temp);
value: Number(number)
}
continue;
that.airData.push(temp)
}
console.log("测试热力处理", that.airData);
echarts.registerMap("geoJson", res);
});
resolve("第一个任务");
}, 1000);
continue
}
console.log('测试热力处理', that.airData)
echarts.registerMap('geoJson', res)
})
resolve('第一个任务')
}, 1000)
}).catch((error) => {
console.log("error", error);
});
console.log('error', error)
})
}
function task2() {
function task2 () {
return new Promise((resolve) => {
setTimeout(() => {
console.log("第2个任务option配置");
console.log('第2个任务option配置')
that.option = {
title: {
text: "贵州省地图",
subtext: "geoJson",
text: '贵州省地图',
subtext: 'geoJson'
},
geo: {
// 经纬度中心
center: that.centerLoction,
type: "map",
map: "geoJson", // 这里的值要和上面registerMap的第一个参数一致
type: 'map',
map: 'geoJson', // 这里的值要和上面registerMap的第一个参数一致
roam: true, // 拖拽
nameProperty: "name",
nameProperty: 'name',
// 悬浮标签
label: {
type: "map",
map: "geoJson", // 这里的值要和上面registerMap的第一个参数一致
type: 'map',
map: 'geoJson', // 这里的值要和上面registerMap的第一个参数一致
// roam: false, // 拖拽
nameProperty: "name",
nameProperty: 'name',
show: true,
color: "#fff",
backgroundColor: "#546de5",
align: "center",
color: '#fff',
backgroundColor: '#546de5',
align: 'center',
fontSize: 10,
width: (function () {
// let n = parseInt(Math.random() * 10)
return 110;
return 110
})(),
height: 50,
shadowColor: "rgba(0,0,0,.7)",
borderRadius: 10,
shadowColor: 'rgba(0,0,0,.7)',
borderRadius: 10
},
zoom: 1.2,
zoom: 1.2
},
series: [
// 坐标点的热力数据
{
data: that.airData,
geoIndex: 0, // 将热力的数据和第0个geo配置关联在一起
type: "map",
type: 'map'
},
{
type: "effectScatter",
type: 'effectScatter',
// 渲染显示
zlevel: 2,
showEffectOn: "render",
showEffectOn: 'render',
data: that.locationGis, // 配置散点的坐标数据
coordinateSystem: "geo", // 指明散点使用的坐标系统
coordinateSystem: 'geo', // 指明散点使用的坐标系统
rippleEffect: {
// 缩放
scale: 4,
// 涟漪的颜色
color: "#cf6a87",
color: '#cf6a87',
// 波纹数量
number: 2,
// 扩散方式 stroke(线条) fill（区域覆盖）
brushType: "fill",
brushType: 'fill'
},
// 形状
symbol: "circle",
symbol: 'circle'
},
// 飞线层
{
// name: '贵阳市飞线',
type: "lines",
coordinateSystem: "geo",
type: 'lines',
coordinateSystem: 'geo',
polyline: true,
zlevel: 3,
effect: {
show: true,
period: 5,
trailLength: 0, // 拖尾
symbol: "arrow", // 箭头
color: "red", // 样式颜色
symbolSize: 5,
symbol: 'arrow', // 箭头
color: 'red', // 样式颜色
symbolSize: 5
},
lineStyle: {
color: "#000",
color: '#000',
width: 2,
type: "solid",
dashOffset: 0,
type: 'solid',
dashOffset: 0
// cap: butt,
// join: bevel
},
// 飞线层数据
data: that.linesCoord,
},
data: that.linesCoord
}
],
visualMap: {
min: 0,
max: 100,
inRange: {
color: ["white", "#0984e3"], // 控制颜色渐变的范围
},
calculable: false, // 出现滑块
color: ['white', '#0984e3'] // 控制颜色渐变的范围
},
};
resolve("2");
}, 1000);
});
calculable: false // 出现滑块
}
async function allTasks() {
await task1(); // 获取数据geojson
await task2(); // option
}
resolve('2')
}, 1000)
})
}
async function allTasks () {
await task1() // 获取数据geojson
await task2() // option
}
allTasks().then(function () {
// console.log('热力值', hotValue)
console.log("series", that.option.series);
that.initMapGis(that.option);
});
console.log('series', that.option.series)
that.initMapGis(that.option)
})
},
initMapGis: function (optionParams) {
var that = this;
let that = this
try {
// 基于准备好的dom，初始化echarts实例
console.log("echarts_map渲染");
console.log('echarts_map渲染')
// console.log("测试data_echart",this.data,that.weather_title,this.weather_low);
let mapEchart = that.mapEchart;
let mapEchart = that.mapEchart
// 显示加载
// mapEchart.showLoading()
console.log("配置之前", optionParams);
mapEchart.setOption(optionParams);
console.log('配置之前', optionParams)
mapEchart.setOption(optionParams)
// 关闭加载
mapEchart.hideLoading();
mapEchart.hideLoading()
// 重绘
window.onresize = function () {
mapEchart.resize();
};
mapEchart.resize()
}
// 点击事件传递参数
mapEchart.on("click", function (params) {
let name = "贵阳市";
if (params.name && params.name != "") {
name = params.name;
mapEchart.on('click', function (params) {
let name = '贵阳市'
if (params.name && params.name !== '') {
name = params.name
}
console.log("点击参数", params);
console.log("选择行政区", name);
console.log('点击参数', params)
console.log('选择行政区', name)
// window.alert(name)
that.clickCity = name;
});
that.clickCity = name
})
} catch (e) {
console.log(e);
console.log(e)
}
},
},
};
}
}
}
</script>
<style scoped>
......
src/importEchartsComponents.js 0 → 100644
浏览文件 @ b805e45a
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, LineChart, MapChart, GraphChart, PieChart} from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent
} from 'echarts/components'
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
import Vue from 'vue'
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
BarChart,
LineChart,
MapChart,
GraphChart,
PieChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
])
const importEchartsComponents = () => {
Vue.prototype.$echarts = echarts// 绑定echarts
}
export default importEchartsComponents
src/importElement.js 0 → 100644
浏览文件 @ b805e45a
import Vue from 'vue'
import {
Container,
Header,
Aside,
Main,
Footer,
Message,
Form,
Button,
Table,
TableColumn,
Drawer,
Input,
Card,
Menu,
Submenu,
MenuItem,
MenuItemGroup,
FormItem,
Avatar,
Link,
Notification,
Loading
} from 'element-ui'
const importElementComponents = () => {
Vue.use(Container)
Vue.use(Header)
Vue.use(Main)
Vue.use(Aside)
Vue.use(Footer)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Button)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Drawer)
Vue.use(Input)
Vue.use(Card)
Vue.use(MenuItem)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(Avatar)
Vue.use(Link)
Vue.use(Notification)
Vue.use(Loading)
Vue.prototype.$message = Message
Vue.prototype.$notify = Notification
}
export default importElementComponents
src/main.js
浏览文件 @ b805e45a
......@@ -3,18 +3,23 @@
import Vue from 'vue'
import './plugins/axios'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import cookies from 'vue-cookies'
import 'github-markdown-css/github-markdown.css'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
import * as echarts from 'echarts'
import router from './router'
import importElementComponents from './importElement'
import importEchartsComponents from './importEchartsComponents'
// 按需引入elementui
importElementComponents()
//按需引入echarts
importEchartsComponents()
Vue.config.productionTip = false
Vue.prototype.$echarts = echarts
Vue.use(ElementUI)
Vue.use(cookies)
// Vue.use(hljs)
......@@ -27,11 +32,8 @@ Vue.directive('highlight', function(el) {
// Vue.prototype.http = axios;
Vue.prototype.$cookies = cookies
// 添加cookies的生命周期
console.log(Vue.prototype.$cookies)
Vue.prototype.$cookies.set("user_session", "null")
console.log('测试', Vue.prototype.$cookies)
Vue.prototype.$cookies.set("user_session", "null")
new Vue({
el: '#app',
......
src/router/index.js
浏览文件 @ b805e45a
import Vue from "vue";
import Vue from 'vue'
import Nprogress from "nprogress";
import "nprogress/nprogress.css";
import { getToken } from "@/utils/auth";
import { isEmpty } from "@/utils";
import VueRouter from "vue-router";
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'
// import { getToken } from '@/utils/auth'
import { isEmpty } from '@/utils'
import VueRouter from 'vue-router'
// import Router from 'vue-router'
import store from "@/store";
import store from '@/store'
// store
import Article from "@/components/Article";
import Login from "@/components/Login";
import Register from "@/components/Register";
import Onlinewebsocket from "@/components/Onlinewebsocket";
import Home from "@/components/Home";
import Bilicom from "@/components/Bilicom";
import Mavoneditor from "@/components/Mavoneditor";
import Loading from "@/components/Loading";
import Article from '@/components/Article'
import Login from '@/components/Login'
import Register from '@/components/Register'
import Onlinewebsocket from '@/components/Onlinewebsocket'
import Home from '@/components/Home'
import Bilicom from '@/components/Bilicom'
import Mavoneditor from '@/components/Mavoneditor'
import GrilShow from "@/components/GrilShow";
import Csslearn from "@/components/Csslearn";
import GrilShow from '@/components/GrilShow'
import Csslearn from '@/components/Csslearn'
Vue.use(VueRouter);
Vue.use(VueRouter)
const defaultRoutes = [
{
path: "/",
name: "Article",
component: Article,
path: '/',
name: 'Article',
component: Article
},
{
path: "/login",
name: "Login",
component: Login,
path: '/login',
name: 'Login',
component: Login
},
{
path: "/register",
name: "Register",
component: Register,
path: '/register',
name: 'Register',
component: Register
},
{
path: "/home",
name: "Home",
component: Home,
path: '/home',
name: 'Home',
component: Home
},
{
path: "/onlinewebsocket",
name: "Onlinewebsocket",
component: Onlinewebsocket,
path: '/onlinewebsocket',
name: 'Onlinewebsocket',
component: Onlinewebsocket
},
{
path: "/bilicom",
name: "Bilicom",
component: Bilicom,
path: '/bilicom',
name: 'Bilicom',
component: Bilicom
},
{
path: "/mavoneditor",
name: "Mavoneditor",
component: Mavoneditor,
path: '/mavoneditor',
name: 'Mavoneditor',
component: Mavoneditor
},
{
path: "/loading",
name: "loading",
component: Loading,
path: '/gril',
name: 'grilshow',
component: GrilShow
},
{
path: "/gril",
name: "grilshow",
component: GrilShow,
},
{
path: "/css",
name: "css",
component: Csslearn,
},
// {
// path: '/register',
// name: 'Register',
// component: () =>
// import ('../components/Register.vue')
// },
// {
// path: '/home',
// name: 'Home',
// component: () =>
// import ('../components/Home.vue')
// },
// {
// path: '/onlinewebsocket',
// name: 'Onlinewebsocket',
// component: () =>
// import ('../components/Onlinewebsocket.vue')
// },
// {
// path: '/mavoneditor',
// name: 'Mavoneditor',
// component: () =>
// import ('../components/Mavoneditor.vue')
// },
// {
// path: '/bilicom',
// name: 'Bilicom',
// component: () =>
// import ('../components/Bilicom.vue')
// }
];
path: '/css',
name: 'css',
component: Csslearn
}
]
let routes = [
...defaultRoutes,
...defaultRoutes
// ...modulesRoutes,
// ...errorRoutes,
// ...dashboardRouters
];
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch((err) => err);
};
]
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
return originalPush.call(this, location).catch((err) => err)
}
const router = new VueRouter({
routes,
});
routes
})
const whiteList = ["/login", "/register"];
// const whiteList = ['/login', '/register']
router.beforeEach(async (to, from, next) => {
next();
let yma16siteUserInfo = localStorage.getItem("yma16siteUserInfo")
? JSON.parse(localStorage.getItem("yma16siteUserInfo"))
: "";
let name = yma16siteUserInfo.username,
pwd = yma16siteUserInfo.password;
next()
let yma16siteUserInfo = localStorage.getItem('yma16siteUserInfo')
? JSON.parse(localStorage.getItem('yma16siteUserInfo'))
: ''
let name = yma16siteUserInfo.username
let pwd = yma16siteUserInfo.password
let hasToken = {
name: name,
password: pwd,
};
console.log("localStorage", hasToken);
password: pwd
}
console.log('localStorage', hasToken)
if (hasToken.name && hasToken.password) {
if (isEmpty(store.state.user.userInfo)) {
// 空的 modules下的user
console.log("路由的登录认证");
console.log('路由的登录认证')
// 用户自主登录
await store.dispatch("user/loginUserInfo", hasToken);
next();
await store.dispatch('user/loginUserInfo', hasToken)
next()
} else {
next();
next()
}
} else {
// next({ path: "/login" }); //去登录
next();
next()
}
});
})
router.afterEach((to, from) => {
Nprogress.done();
});
Nprogress.done()
})
export default router;
export default router
src/weather/EchartWeather.vue
浏览文件 @ b805e45a
......@@ -15,118 +15,118 @@
</template>
<script>
import axios from "axios";
import * as echarts from "echarts";
import axios from 'axios'
export default {
name: "EchartWeather",
data() {
name: 'EchartWeather',
data () {
return {
msg: "贵阳天气",
baseurl: "/api/",
msg: '贵阳天气',
baseurl: '/api/',
// baseurl: 'http://yongma16.xyz/',
// baseurl: 'api/article/weather/',
tabPosition: "left",
tabPosition: 'left',
weather_title: [],
weather_high: [],
weather_low: [],
weather_discribe: [],
weather_windem: [],
weather_windwl: [],
tableData: [],
};
tableData: []
}
},
mounted() {
this.initWeatherLine();
mounted () {
this.initWeatherLine()
},
methods: {
initWeatherLine() {
let that = this;
async function waitGetWeatherData() {
await that.getWeatherData();
await that.weatherInint();
initWeatherLine () {
let that = this
async function waitGetWeatherData () {
await that.getWeatherData()
await that.weatherInint()
}
waitGetWeatherData().then((o) => {
console.log(o);
}); // 同步
console.log(o)
}) // 同步
},
getWeatherData() {
let that = this;
getWeatherData () {
let that = this
return new Promise((resolve) => {
setTimeout(function () {
axios
.get(that.baseurl + "article/weather/")
.get(that.baseurl + 'article/weather/')
.then((res) => {
console.log("天气接口返回", res);
let resdata = res.data;
let weather = resdata.weather;
let title = weather.title;
let high = weather.high;
let low = weather.low;
let discribe = weather.discribe;
let windem = weather.windem;
let windwl = weather.windwl;
that.tableData = [];
console.log('天气接口返回', res)
let resdata = res.data
let weather = resdata.weather
let title = weather.title
let high = weather.high
let low = weather.low
let discribe = weather.discribe
let windem = weather.windem
let windwl = weather.windwl
that.tableData = []
title.map((item) => {
that.weather_title.push(item);
});
that.weather_title.push(item)
})
high.map((o) => {
let temp = parseInt(o);
that.weather_high.push(temp);
});
let temp = parseInt(o)
that.weather_high.push(temp)
})
low.map((o) => {
let temp = parseInt(o);
that.weather_low.push(temp);
});
that.weather_windem = Array.from(...[windem]);
that.weather_windwl = Array.from(...[windwl]);
let temp = parseInt(o)
that.weather_low.push(temp)
})
that.weather_windem = Array.from(...[windem])
that.weather_windwl = Array.from(...[windwl])
discribe.map((item) => {
that.weather_discribe.push(item);
});
let weatherLength = title.length;
that.weather_discribe.push(item)
})
let weatherLength = title.length
for (let loc = 0; loc < weatherLength; ++loc) {
let discribeText = {
date: "",
discrible: "",
temperature: "",
};
discribeText.date = that.weather_title[loc];
discribeText.discrible = that.weather_discribe[loc];
date: '',
discrible: '',
temperature: ''
}
discribeText.date = that.weather_title[loc]
discribeText.discrible = that.weather_discribe[loc]
discribeText.temperature =
that.weather_low[loc] + "/" + that.weather_high[loc] + "°C";
discribeText.windem = that.weather_windem[loc];
discribeText.windwl = that.weather_windwl[loc];
that.tableData.push(discribeText);
that.weather_low[loc] + '/' + that.weather_high[loc] + '°C'
discribeText.windem = that.weather_windem[loc]
discribeText.windwl = that.weather_windwl[loc]
that.tableData.push(discribeText)
}
console.log(that.tableData, "that.tableData");
console.log(that.tableData, 'that.tableData')
})
.catch((r) => {
console.log("r", r);
});
}, 1000);
resolve("获取后端天气成功的promise");
});
console.log('r', r)
})
}, 1000)
resolve('获取后端天气成功的promise')
})
},
weatherInint() {
weatherInint () {
// 基于准备好的dom，初始化echarts实例
console.log("echarts!");
var that = this; // 传递
const echarts = this.$echarts
if (!echarts) return
const that = this // 传递
return new Promise((resolve) => {
setTimeout(function () {
let highData = Array.from(...[that.weather_high]);
let lowData = Array.from(...[that.weather_low]);
let titleData = Array.from(...[that.weather_title]);
console.log("绘制折线图数据", titleData, highData, lowData);
var dom = document.getElementById("echart_weather");
let highData = Array.from(...[that.weather_high])
let lowData = Array.from(...[that.weather_low])
let titleData = Array.from(...[that.weather_title])
console.log('绘制折线图数据', titleData, highData, lowData)
let dom = document.getElementById('echart_weather')
// console.log('dom', dom)
var myChart = echarts.init(dom);
let myChart = echarts.init(dom)
// 绘制图表
var option = {
let option = {
title: {
text: that.msg,
subtext: "气温°C",
subtext: '气温°C'
},
tooltip: {
trigger: "axis",
trigger: 'axis'
},
// legend: {
// data: ['最高', '最低']
......@@ -135,107 +135,107 @@ export default {
show: true,
feature: {
dataZoom: {
yAxisIndex: "none",
yAxisIndex: 'none'
},
dataView: {
readOnly: false,
readOnly: false
},
magicType: {
type: ["bar", "line"],
type: ['bar', 'line']
},
restore: {},
saveAsImage: {},
},
saveAsImage: {}
}
},
xAxis: {
type: "category",
type: 'category',
boundaryGap: true,
data: titleData,
data: titleData
},
yAxis: {
type: "value",
type: 'value',
axisLabel: {
formatter: "{value}",
},
formatter: '{value}'
}
},
series: [
{
name: "Highest",
type: "bar",
name: 'Highest',
type: 'bar',
data: highData,
markPoint: {
data: [
{
type: "max",
name: "Max",
type: 'max',
name: 'Max'
},
{
type: "min",
name: "Min",
},
],
type: 'min',
name: 'Min'
}
]
},
markLine: {
data: [
{
type: "average",
name: "avg",
},
],
},
type: 'average',
name: 'avg'
}
]
}
},
{
name: "Lowest",
type: "line",
name: 'Lowest',
type: 'line',
data: lowData,
markPoint: {
data: [
{
name: "最低",
name: '最低',
value: -2,
xAxis: 1,
yAxis: -1.5,
},
],
yAxis: -1.5
}
]
},
markLine: {
data: [
{
type: "average",
name: "Avg",
type: 'average',
name: 'Avg'
},
[
{
symbol: "circle",
x: "75%",
yAxis: "max",
symbol: 'circle',
x: '75%',
yAxis: 'max'
},
{
symbol: "circle",
symbol: 'circle',
label: {
position: "start",
formatter: "Max",
},
type: "max",
name: "最高点",
},
],
],
position: 'start',
formatter: 'Max'
},
},
],
};
myChart.setOption(option); // 画折线图
type: 'max',
name: '最高点'
}
]
]
}
}
]
}
myChart.setOption(option) // 画折线图
window.onresize = function () {
myChart.resize();
};
}, 3000);
resolve("绘制折线图Promise");
});
myChart.resize()
}
}, 3000)
resolve('绘制折线图Promise')
})
// dom = null; //销毁
},
},
};
}
}
}
</script>
<style scoped>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或