修改用户头像和echarts

develoop
ww 5 months ago
parent dae612864d
commit 51d96cddcc
  1. 129
      src/views/home/components/Echart/Echarts.vue
  2. 3
      src/views/home/components/Echarts.vue
  3. 32
      src/views/home/components/Status.vue
  4. 8
      src/views/home/index.vue

@ -7,79 +7,96 @@ onMounted(() => {
// //
myChart.setOption({ myChart.setOption({
// //
grid: {
left: '4%', //
right: '10%', //
bottom: '20%', //
top: '10%', //
},
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999',
},
},
}, },
legend: {
left: 'center', //
bottom: 0, //
orient: 'horizontal', //
itemWidth: 16, // 0
itemHeight: 0, // 0
data: ['本月', '上月'],
},
// grid: {
// left: '3%',
// right: '4%',
// bottom: '3%',
// containLabel: true
// },
toolbox: { toolbox: {
feature: { feature: {
saveAsImage: {}, dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true },
}, },
}, },
xAxis: { legend: {
type: 'category', data: ['本月', '上月'],
boundaryGap: true,
data: [
'09-01',
'09-03',
'09-05',
'09-07',
'09-09',
'09-11',
'09-13',
'09-15',
],
},
yAxis: {
type: 'value',
}, },
xAxis: [
{
type: 'category',
data: [
'09-01',
'09-03',
'09-05',
'09-07',
'09-09',
'09-11',
'09-13',
'09-15',
],
axisPointer: {
type: 'shadow',
},
},
],
yAxis: [
{
type: 'value',
name: '浏览次数',
min: 0,
max: 200,
interval: 40,
axisLabel: {
formatter: '{value}',
},
},
{
type: 'value',
name: '',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value}',
},
},
],
series: [ series: [
{ {
name: '本月', name: '本月',
// itemStyle: { type: 'bar',
// color: '#0052D9' tooltip: {
// }, valueFormatter: function (value) {
symbol: 'circle', return (value as number) + ' 次'
itemStyle: { },
color: '#0052D9', //
borderWidth: 1.5, //
borderColor: 'white', //
}, },
symbolSize: 8, // data: [2, 4, 7, 23, 25, 76, 35, 62, 32, 20, 6, 3],
type: 'line',
data: [20, 38, 60, 65, 90, 55, 36, 30],
}, },
{ {
name: '上月', name: '上月',
symbol: 'circle', type: 'bar',
itemStyle: { tooltip: {
color: '#B5C7FF', // valueFormatter: function (value) {
borderWidth: 1.5, // return (value as number) + ' 次'
borderColor: 'white', // },
}, },
symbolSize: 8, // data: [2, 5, 9, 26, 28, 70, 75, 82, 48, 18, 6, 2],
},
{
type: 'line', type: 'line',
yAxisIndex: 1,
data: [22, 25, 48, 70, 80, 45, 24, 38], data: [2, 4, 7, 23, 25, 76, 35, 62, 32, 20, 6, 3],
},
{
type: 'line',
yAxisIndex: 1,
data: [2, 5, 9, 26, 28, 70, 75, 82, 48, 18, 6, 2],
}, },
], ],
}) })

@ -1,10 +1,11 @@
<script setup> <script setup>
import echarts from '@/views/home/components/Echart/Echarts.vue' import echarts from '@/views/home/components/Echart/Echarts.vue'
import conheader from '@/views/home/components/ConHeader.vue' import conheader from '@/views/home/components/ConHeader.vue'
defineProps(['sum'])
</script> </script>
<template> <template>
<div class="info_container" style="width: 95%; height: 384px"> <div class="info_container" style="width: 95%; height: 384px">
<conheader title="主页访问数据(次)"></conheader> <conheader :title="`主页访问数据(${sum}次)`"></conheader>
<div class="info_content" style="width: 75%; height: 100%"> <div class="info_content" style="width: 75%; height: 100%">
<echarts></echarts> <echarts></echarts>
</div> </div>

@ -1,6 +1,7 @@
<script setup> <script setup>
import add from '@/assets/images/add.png' import add from '@/assets/images/add.png'
// import { Plus } from '@element-plus/icons-vue' // import { Plus } from '@element-plus/icons-vue'
import tool from '@/utils/oss.js'
import { userChangeService } from '@/api/user/user.js' import { userChangeService } from '@/api/user/user.js'
const dialogFormVisible = ref(false) const dialogFormVisible = ref(false)
import { ref } from 'vue' import { ref } from 'vue'
@ -10,7 +11,6 @@ const props = defineProps({
}, },
}) })
// const data = ref(props.data, 'dsfd') // const data = ref(props.data, 'dsfd')
console.log(props.data, 44444)
const imageUrl = ref('') const imageUrl = ref('')
// //
const form = ref() const form = ref()
@ -42,37 +42,21 @@ const formLabelWidth = '70px'
// //
imageUrl.value = props.data.icon imageUrl.value = props.data.icon
// //
const openFileInput = () => { const upload = async (option) => {
const input = document.createElement('input') const res = await tool.oss.upload(option.file)
input.type = 'file' const url = 'https://wenyu132.oss-cn-beijing.aliyuncs.com/' + res.name
input.accept = 'image/*' imageUrl.value = url
input.style.display = 'none' changeInfo()
input.onchange = (event) => {
const file = event.target.files[0]
if (file) {
const reader = new FileReader()
reader.onload = () => {
imageUrl.value = reader.result
}
reader.readAsDataURL(file)
changeInfo()
}
}
document.body.appendChild(input)
input.click()
document.body.removeChild(input)
} }
// //
const changeInfo = async () => { const changeInfo = async () => {
const userInfo = { const userInfo = {
// username: form.value.username,
phone: form.value.phone, phone: form.value.phone,
id: form.value.id, id: form.value.id,
nickName: form.value.nickName, nickName: form.value.nickName,
icon: imageUrl.value, icon: imageUrl.value,
} }
const jsonData = JSON.stringify(userInfo) const jsonData = JSON.stringify(userInfo)
console.log(jsonData)
await userChangeService(jsonData) await userChangeService(jsonData)
dialogFormVisible.value = false dialogFormVisible.value = false
} }
@ -83,9 +67,9 @@ const changeInfo = async () => {
<div class="avater"> <div class="avater">
<img :src="imageUrl" alt="Uploaded" v-if="imageUrl" class="avater" /> <img :src="imageUrl" alt="Uploaded" v-if="imageUrl" class="avater" />
</div> </div>
<div class="click" @click="openFileInput" :http-request="upload"> <el-upload class="click" :http-request="upload" :show-file-list="false">
<img :src="add" /> <img :src="add" />
</div> </el-upload>
<div <div
class="info_content" class="info_content"
style="height: 58px" style="height: 58px"

@ -19,9 +19,13 @@ const rightVisible = ref(false)
userStore.getUserInfo().catch((error) => { userStore.getUserInfo().catch((error) => {
console.log(error) console.log(error)
}) })
let sum: any = localStorage.getItem('sum') || '0'
onMounted(() => { onMounted(() => {
// getData() // getData()
sum = parseInt(sum) + 1
localStorage.setItem('sum', sum.toString())
console.log(sum, 'sum')
username.value = userStore.userName username.value = userStore.userName
data.value = userStore.data data.value = userStore.data
infoData.value = userStore.userInfo infoData.value = userStore.userInfo
@ -48,7 +52,7 @@ onMounted(() => {
<Info :data="infoData" v-if="flag"></Info> <Info :data="infoData" v-if="flag"></Info>
</div> </div>
<div class="echarts" style="width: 100%; height: 444px"> <div class="echarts" style="width: 100%; height: 444px">
<echarts></echarts> <echarts :sum="sum"></echarts>
</div> </div>
</div> </div>
<div v-if="rightVisible" class="right"> <div v-if="rightVisible" class="right">

Loading…
Cancel
Save