调查问卷
This commit is contained in:
X1627315083
@@ -292,6 +292,3 @@ export default defineComponent({
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
|
||||
</style>
|
||||
173
src/component/Administrator/administratorEcharts copy.vue
Normal file
173
src/component/Administrator/administratorEcharts copy.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div class="adminEcharts admin_page">
|
||||
<div class="admin_table_search">
|
||||
</div>
|
||||
<div class="allUser_table_content">
|
||||
<div class="allUser_table_content_item">
|
||||
<div>123123123</div>
|
||||
<!-- <div class="allUser_table_content_item_canvas" id="echarts1"></div> -->
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, createVNode, computed, onMounted } from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
|
||||
import * as echarts from "echarts/core";
|
||||
import {
|
||||
TitleComponent,
|
||||
ToolboxComponent,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
LegendComponent,
|
||||
} from "echarts/components";
|
||||
import { LineChart } from "echarts/charts";
|
||||
import { UniversalTransition } from "echarts/features";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
export default defineComponent({
|
||||
components: {},
|
||||
setup() {
|
||||
let rangePickerValue: any = ref([]);
|
||||
let rangeTimeValue: any = ref([]);
|
||||
let renameData: any = ref({}); //修改名字选中的数据
|
||||
|
||||
onMounted(() => {
|
||||
echarts.use([
|
||||
TitleComponent,
|
||||
ToolboxComponent,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
LegendComponent,
|
||||
LineChart,
|
||||
CanvasRenderer,
|
||||
UniversalTransition,
|
||||
]);
|
||||
|
||||
var chartDom = document.getElementById("echarts1");
|
||||
console.log(chartDom);
|
||||
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option = {
|
||||
title: {
|
||||
text: "",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: "#6a7985",
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: [
|
||||
"新增用户数量",
|
||||
"活跃用户数量",
|
||||
"参加活动用户数量",
|
||||
"Search Engine",
|
||||
],
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "新增用户数量",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
name: "活跃用户数量",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
},
|
||||
{
|
||||
name: "参加活动用户数量",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: "Search Engine",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
},
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
},
|
||||
],
|
||||
};
|
||||
// option && myChart.setOption(option);
|
||||
});
|
||||
return {};
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.adminEcharts {
|
||||
.allUser_table_content{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: space-between;
|
||||
.allUser_table_content_item{
|
||||
width: 49%;
|
||||
height: 49%;
|
||||
.allUser_table_content_item_canvas{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="admin_table_search">
|
||||
</div>
|
||||
|
||||
<div class="allUser_table_content" ref="historyTable">
|
||||
<div class="admin_table_content" ref="historyTable">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="dataList"
|
||||
@@ -156,69 +156,4 @@ export default defineComponent({
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.admin_page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
// min-width: 1440px;
|
||||
position: relative;
|
||||
|
||||
.allUser_table_content {
|
||||
margin-top: 2.6rem;
|
||||
width: 100%;
|
||||
height: calc(100% - 13.7rem);
|
||||
padding-bottom: 3rem;
|
||||
background: #fff;
|
||||
border-radius: 2rem;
|
||||
overflow: hidden;
|
||||
.ant-table {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ant-table-body {
|
||||
overflow-y: auto !important;
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
}
|
||||
}
|
||||
.ant-table-thead > tr > th {
|
||||
background: #ffffff00;
|
||||
border-bottom: none;
|
||||
backdrop-filter: blur(1rem);
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
border: none;
|
||||
background: transparent;
|
||||
// color: #fff;
|
||||
}
|
||||
.ant-table-tbody > tr {
|
||||
&:hover > td {
|
||||
background: #ffffff3a;
|
||||
}
|
||||
}
|
||||
.ant-table-pagination-right {
|
||||
padding-right: 3.5rem;
|
||||
}
|
||||
.operate_list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 1rem;
|
||||
|
||||
.operate_item {
|
||||
font-size: 1.4rem;
|
||||
font-family: Roboto;
|
||||
font-weight: 400;
|
||||
color: #343579;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
197
src/component/Administrator/questionnaire.vue
Normal file
197
src/component/Administrator/questionnaire.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="admin_page">
|
||||
<div class="admin_table_search">
|
||||
<div class="admin_state">
|
||||
<div class="admin_state_item">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="admin_table_content" ref="questionnaireTable">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="dataList"
|
||||
:scroll="{ y: historyTableHeight}"
|
||||
@change="changePage"
|
||||
@resizeColumn="handleResizeColumn"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
current: currentPage,
|
||||
pageSize: pageSize,
|
||||
total: total,
|
||||
showQuickJumper: true,
|
||||
bordered: false,
|
||||
}"
|
||||
>
|
||||
<template
|
||||
#bodyCell="{ column, text, record, index }"
|
||||
>
|
||||
<div v-if="column?.Operations">
|
||||
<div class="operate_list" v-if="column?.Operations">
|
||||
<div class="operate_item" @click="setDetail(record)">Details</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
<a-modal
|
||||
class="generalModelOperate"
|
||||
v-model:visible="isFeedbackShow"
|
||||
:footer="null"
|
||||
width="55%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:keyboard="false"
|
||||
:closable="false"
|
||||
:mask="false"
|
||||
>
|
||||
<div class="generalModelOperate_closeIcon" @click.stop="closeModal()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
</div>
|
||||
<feedbackSurveyVue ref="feedbackSurveyVue"></feedbackSurveyVue>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, createVNode,toRefs, computed,reactive, onMounted, nextTick } from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
|
||||
import type { TableColumnsType } from 'ant-design-vue';
|
||||
import feedbackSurveyVue from "@/views/feedbackSurvey.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: {feedbackSurveyVue},
|
||||
setup() {
|
||||
const columns: any = ref([
|
||||
{
|
||||
title: 'User Name',
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
width: 50,
|
||||
dataIndex: "userName",
|
||||
key: "userName",
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
align: "center",
|
||||
width: 50,
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
},
|
||||
{
|
||||
title: 'Country',
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
width: 50,
|
||||
dataIndex: "country",
|
||||
key: "country",
|
||||
},
|
||||
{
|
||||
title: 'Email',
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
width: 50,
|
||||
|
||||
dataIndex: "email",
|
||||
key: "email",
|
||||
},
|
||||
{
|
||||
title: 'Is Subscribe',
|
||||
align: "center",
|
||||
width: 50,
|
||||
|
||||
dataIndex: "isSubscribe",
|
||||
key: "isSubscribe",
|
||||
},
|
||||
{
|
||||
title: 'Occupation',
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
width: 50,
|
||||
//
|
||||
dataIndex: "occupation",
|
||||
key: "occupation",
|
||||
},{
|
||||
title: 'Operations',
|
||||
key: 'operation',
|
||||
align:'center',
|
||||
fixed: 'right',
|
||||
width: 50,
|
||||
// slots:{customRender:'action'}
|
||||
Operations:true,
|
||||
},
|
||||
]
|
||||
);
|
||||
let dataList: any = ref([]);
|
||||
let tabelData = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
historyTableHeight: 0,
|
||||
isFeedbackShow:false,
|
||||
})
|
||||
let getQuestionnaireList =async ()=>{
|
||||
return new Promise((resolve, reject) => {
|
||||
Https.axiosGet(Https.httpUrls.getAllQuestionnaire).then((res:any)=>{
|
||||
if(res){
|
||||
dataList.value = res
|
||||
console.log(dataList);
|
||||
// console.log(allEchartsList.value);
|
||||
|
||||
resolve('')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
let questionnaireTable:any = ref()
|
||||
let feedbackSurveyVue = ref()
|
||||
let changePage = (e:any)=>{
|
||||
tabelData.currentPage = e.current;
|
||||
tabelData.pageSize = e.pageSize;
|
||||
}
|
||||
let setDetail = (data:any)=>{
|
||||
tabelData.isFeedbackShow = true
|
||||
nextTick().then(()=>{
|
||||
feedbackSurveyVue.value.initData(data)
|
||||
})
|
||||
}
|
||||
let closeModal = ()=>{
|
||||
tabelData.isFeedbackShow = false
|
||||
}
|
||||
onMounted(async () => {
|
||||
await getQuestionnaireList()
|
||||
tabelData.historyTableHeight = questionnaireTable.value.clientHeight - 200;
|
||||
});
|
||||
return {
|
||||
columns,
|
||||
dataList,
|
||||
...toRefs(tabelData),
|
||||
handleResizeColumn: (w:any, col:any) => {
|
||||
col.width = w;
|
||||
},
|
||||
questionnaireTable,
|
||||
feedbackSurveyVue,
|
||||
changePage,
|
||||
setDetail,
|
||||
closeModal,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.generalModelOperate{
|
||||
// .ant-modal-body{
|
||||
// height: calc(65rem*1.2);
|
||||
// display: flex;
|
||||
// overflow-y: auto;
|
||||
// flex-direction: column;
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
@@ -16,7 +16,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="allUser_table_content" ref="historyTable">
|
||||
<div class="admin_table_content" ref="historyTable">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="collectionList"
|
||||
@@ -293,6 +293,3 @@ export default defineComponent({
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user