From 37124af447b71c508ede98cbe731f56c0f54dc68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E9=99=8C?= <xiaomo.drip@gmail.com>
Date: Wed, 21 Jun 2023 19:22:16 +0800
Subject: [PATCH] no message

---
 src/views/system/stat/index.vue  | 222 +++++++++++++++++++++++++++++++
 src/views/system/table/index.vue |  68 +++++++++-
 src/views/system/table/save.vue  |  21 +--
 3 files changed, 285 insertions(+), 26 deletions(-)
 create mode 100644 src/views/system/stat/index.vue

diff --git a/src/views/system/stat/index.vue b/src/views/system/stat/index.vue
new file mode 100644
index 0000000..d82e922
--- /dev/null
+++ b/src/views/system/stat/index.vue
@@ -0,0 +1,222 @@
+<template>
+	<el-container>
+		<el-header>
+			<div class="left-panel">
+				<el-radio-group v-model="dateType" style="margin-right: 15px;">
+					<el-radio-button label="今天"></el-radio-button>
+					<el-radio-button label="昨天"></el-radio-button>
+					<el-radio-button label="最近7天"></el-radio-button>
+					<el-radio-button label="最近30天"></el-radio-button>
+				</el-radio-group>
+				<el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+			</div>
+		</el-header>
+		<el-main>
+			<el-card shadow="never">
+				<div class="number-data">
+					<div class="item">
+						<h2>浏览量(PV)
+							<el-tooltip effect="light">
+								<template #content>
+									<div style="width: 200px;line-height: 2;">
+										即通常说的Page View(PV)，用户每打开一个网站页面就被记录1次。用户多次打开同一页面，浏览量值累计。
+									</div>
+								</template>
+								<el-icon><el-icon-question-filled /></el-icon>
+							</el-tooltip>
+						</h2>
+						<p>65,715</p>
+					</div>
+					<div class="item">
+						<h2>访客数(UV)
+							<el-tooltip effect="light">
+								<template #content>
+									<div style="width: 200px;line-height: 2;">
+										一天之内您网站的独立访客数(以Cookie为依据)，一天内同一访客多次访问您网站只计算1个访客。
+									</div>
+								</template>
+								<el-icon><el-icon-question-filled /></el-icon>
+							</el-tooltip>
+						</h2>
+						<p>8,936</p>
+					</div>
+					<div class="item">
+						<h2>IP数
+							<el-tooltip effect="light">
+								<template #content>
+									<div style="width: 200px;line-height: 2;">
+										一天之内您网站的独立访问ip数。
+									</div>
+								</template>
+								<el-icon><el-icon-question-filled /></el-icon>
+							</el-tooltip>
+						</h2>
+						<p>10,279</p>
+					</div>
+					<div class="item">
+						<h2>跳出率
+							<el-tooltip effect="light">
+								<template #content>
+									<div style="width: 200px;line-height: 2;">
+										只浏览了一个页面便离开了网站的访问次数占总的访问次数的百分比。
+									</div>
+								</template>
+								<el-icon><el-icon-question-filled /></el-icon>
+							</el-tooltip>
+						</h2>
+						<p>27.92%</p>
+					</div>
+					<div class="item">
+						<h2>平均访问时长
+							<el-tooltip effect="light">
+								<template #content>
+									<div style="width: 200px;line-height: 2;">
+										访客在一次访问中，平均打开网站的时长。即每次访问中，打开第一个页面到关闭最后一个页面的平均值，打开一个页面时计算打开关闭的时间差。
+									</div>
+								</template>
+								<el-icon><el-icon-question-filled /></el-icon>
+							</el-tooltip>
+						</h2>
+						<p>00:19:05</p>
+					</div>
+				</div>
+				<div class="chart">
+					<el-row>
+						<el-col :span="8">
+							<scEcharts height="250px" :option="pie"></scEcharts>
+						</el-col>
+						<el-col :span="16">
+							<scEcharts height="250px" :option="option"></scEcharts>
+						</el-col>
+					</el-row>
+				</div>
+			</el-card>
+			<el-card shadow="never">
+				<scTable ref="table" :data="data" show-summary height="auto">
+					<el-table-column label="来源类型" prop="type"></el-table-column>
+					<el-table-column label="网站基础指标" align="center">
+						<el-table-column label="访客数(UV)" prop="uv" width="150"></el-table-column>
+						<el-table-column label="IP数" prop="ip" width="150"></el-table-column>
+					</el-table-column>
+					<el-table-column label="流量质量指标" align="center">
+						<el-table-column label="跳出率" prop="out" width="150"></el-table-column>
+						<el-table-column label="平均访问时长" prop="time" width="150"></el-table-column>
+					</el-table-column>
+				</scTable>
+			</el-card>
+		</el-main>
+	</el-container>
+</template>
+
+<script>
+	import scEcharts from '@/components/scEcharts';
+
+	export default {
+		name: 'chartlist',
+		components: {
+			scEcharts
+		},
+		data(){
+			return {
+				dateType: "今天",
+				date: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+				data: [
+					{
+						type: "直接访问",
+						pv: "57,847",
+						uv: "7,129",
+						ip: "8,330",
+						out: "26.38%",
+						time: "00:20:35"
+					},
+					{
+						type: "搜索引擎",
+						pv: "5,942",
+						uv: "1,338",
+						ip: "1,449",
+						out: "33.49%",
+						time: "00:11:31"
+					},
+					{
+						type: "外部链接",
+						pv: "1,926",
+						uv: "469",
+						ip: "500",
+						out: "44.53%",
+						time: "00:08:49"
+					}
+				],
+				pie: {
+					tooltip: {
+						trigger: 'item'
+					},
+					series: [
+						{
+							name: '访问来源',
+							type: 'pie',
+							radius: ['55%', '70%'],
+							itemStyle: {
+								borderRadius: 5,
+								borderColor: '#fff',
+								borderWidth: 1
+							},
+							data: [
+								{value: 1048, name: '搜索引擎'},
+								{value: 235, name: '直接访问'},
+								{value: 180, name: '外部链接'}
+							]
+						}
+					]
+				},
+				option: {
+					legend: {
+						data: ['直接访问', '搜索引擎', '外部链接']
+					},
+					tooltip: {
+						trigger: 'axis'
+					},
+					xAxis: {
+						type: 'category',
+						data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
+						boundaryGap: false,
+					},
+					yAxis: {
+						type: 'value'
+					},
+					series: [{
+						name: '直接访问',
+						data: [120, 210, 150, 80, 70, 110, 130],
+						type: 'line',
+					},
+					{
+						name: '搜索引擎',
+						data: [110, 180, 120, 120, 60, 90, 110],
+						type: 'line',
+					},
+					{
+						name: '外部链接',
+						data: [50, 90, 60, 60, 30, 40, 50],
+						type: 'line',
+					}]
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.el-card {margin-bottom: 15px;}
+
+	.number-data {display: flex;}
+	.number-data .item {flex:1;border-right: 1px solid #f0f0f0;padding:0 20px;}
+	.number-data .item:last-child {border: 0;}
+	.number-data .item h2 {font-size: 12px;color: #787a7d;font-weight: normal;display: flex;align-items: center;}
+	.number-data .item h2 i {margin-left: 5px;color: #8cc5ff;cursor: pointer;}
+	.number-data .item p {font-size: 20px;color: #121315;margin-top: 10px;}
+
+	.chart {border-top: 1px solid #f0f0f0;margin-top: 20px;padding-top: 20px;}
+
+	.dark .number-data .item {border-color: var(--el-border-color-light);}
+	.dark .number-data .item p {color: #d0d0d0;}
+	.dark .chart {border-color: var(--el-border-color-light);}
+</style>
diff --git a/src/views/system/table/index.vue b/src/views/system/table/index.vue
index 6ed199e..dde50a1 100644
--- a/src/views/system/table/index.vue
+++ b/src/views/system/table/index.vue
@@ -1,8 +1,20 @@
 <template>
 	<el-container>
+		<el-header class="header-tabs" v-if="tabs.length>0">
+			<el-tabs type="card" v-model="search.status" @tab-change="tabChange">
+				<el-tab-pane v-for="item in tabs" :key="item.value" :label="item.label"> </el-tab-pane>
+			</el-tabs>
+		</el-header>
 		<el-header>
 			<div class="left-panel">
-				<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
+				<el-button  v-if="operation.plus" type="primary" icon="el-icon-plus" @click="add"></el-button>
+				<el-button  v-if="operation.batchdeletion" type="danger" plain icon="el-icon-delete"></el-button>
+			</div>
+			<div class="right-panel" v-if="operation.search">
+				<div class="right-panel-search">
+					<el-input v-model="search.keyword" placeholder="关键词" clearable></el-input>
+					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
+				</div>
 			</div>
 		</el-header>
 		<el-main class="nopadding">
@@ -38,15 +50,20 @@
 		data() {
 			return {
 				dialog: {
-					save: false
+					save: false,
 				},
 				selection: [],
 				column: [],
 				api: '',
-				operation:{
-					// delete:'1',
-					// edit:'1',
-				}
+				operation:{},
+				key:'id',
+				search: {
+					keyword: "",
+					status: 0,
+				},
+				tabs: [
+					// {label:'所有', value:0},
+				]
 			}
 		},
 		mounted() {
@@ -62,6 +79,14 @@
 
 		},
 		methods: {
+			//标签切换
+			tabChange(){
+				this.$refs.table.reload(this.search)
+			},
+			//搜索
+			upsearch(){
+				this.$refs.table.reload(this.search)
+			},
 			//增加
 			add(){
 				this.dialog.save = true
@@ -72,8 +97,20 @@
 			//编辑
 			table_edit(row){
 				this.dialog.save = true
+
 				this.$nextTick(() => {
-					this.$refs.saveDialog.open('edit').setData(row)
+					if (this.operation.edit.remoteurl) {
+						setTimeout(async ()=>{
+							var res = await this.$http.get(this.operation.edit.remoteurl, {id: row[this.key]})
+							if (res.code == 200 ) {
+								this.$refs.saveDialog.open('edit').setData(res.data);
+								return;
+							}
+							this.$alert(res.message, "提示", {type: 'error'});
+						}, 100)
+					}else{
+						this.$refs.saveDialog.open('edit').setData(row)
+					}
 				})
 			},
 			//删除
@@ -113,10 +150,27 @@
 			},
 			//本地更新数据
 			handleSuccess(data, mode){
+
+
+				// var res = await this.$api.demo.post.post(this.form);
+										// this.isSaveing = false;
+										// if(res.code == 200){
+											
+										// 	this.visible = false;
+										// 	this.$message.success("操作成功")
+										// }else{
+										// 	this.$alert(res.message, "提示", {type: 'error'})
+										// }
+
+
 				if(mode=='add'){
+
 					data.id = new Date().getTime()
 					this.$refs.table.tableData.unshift(data)
+
 				}else if(mode=='edit'){
+					this.$refs.saveDialog.isSaveing = false;
+					this.$refs.saveDialog.visible = false;
 					this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
 						Object.assign(item, data)
 					})
diff --git a/src/views/system/table/save.vue b/src/views/system/table/save.vue
index 0d5dcff..4490efe 100644
--- a/src/views/system/table/save.vue
+++ b/src/views/system/table/save.vue
@@ -13,7 +13,7 @@
 </template>
 
 <style type="text/css">
-	.el-dialog__body{padding: 0px}
+	/*.el-dialog__body{padding: 0px}*/
 </style>
 
 <script>
@@ -66,30 +66,13 @@
 				this.$refs.formref.validate(async (valid) => {
 					if (valid) {
 						this.isSaveing = true;
-						var res = await this.$api.demo.post.post(this.form);
-						this.isSaveing = false;
-						if(res.code == 200){
-							this.$emit('success', this.form, this.mode)
-							this.visible = false;
-							this.$message.success("操作成功")
-						}else{
-							this.$alert(res.message, "提示", {type: 'error'})
-						}
+						this.$emit('success', this.info, this.mode);
 					}
 				})
 			},
 			//表单注入数据
 			setData(info){
 				this.info = info;
-				// this.loading = true
-				// const params = {
-				// 	id: data.id
-				// }
-				// setTimeout(async ()=>{
-				// 	var res = await this.$api.system.table.info.get(params)
-				// 	this.loading = false
-				// 	this.form = res.data
-				// },400)
 			},
 			//设置过滤项
 			setFilters(filters){