From 31cbe57809438eb27c4ee8e6b432efef706c7bd8 Mon Sep 17 00:00:00 2001
From: WXL <1785969728@qq.com>
Date: 星期一, 16 六月 2025 14:48:50 +0800
Subject: [PATCH] 测试完成
---
src/views/sfstatistics/Voicedetail/index.vue | 374 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 368 insertions(+), 6 deletions(-)
diff --git a/src/views/sfstatistics/Voicedetail/index.vue b/src/views/sfstatistics/Voicedetail/index.vue
index df47fb3..0ffbe56 100644
--- a/src/views/sfstatistics/Voicedetail/index.vue
+++ b/src/views/sfstatistics/Voicedetail/index.vue
@@ -1,17 +1,379 @@
<template>
- <div>澶嶈瘖缁熻</div>
+ <div class="Questionnairemanagement">
+ <!-- 鍙充晶鏁版嵁 -->
+ <div class="leftvlue">
+ <div class="leftvlue-top">
+ <el-tabs v-model="topactiveName" @tab-click="tophandleClick">
+ <el-tab-pane name="Local">
+ <span class="mulsz" slot="label">澶嶆煡缁熻 </span>
+ </el-tab-pane>
+ <el-tab-pane name="sharing">
+ <span class="mulsz" slot="label">澶嶈瘖缁熻 </span>
+ </el-tab-pane>
+ </el-tabs>
+ </div>
+ </div>
+ <div class="viewbox">
+ <div class="title-bot">
+ <el-form
+ :model="queryParams"
+ ref="queryForm"
+ size="small"
+ :inline="true"
+ label-width="98px"
+ >
+ <el-form-item prop="userName">
+ <el-select
+ v-model="queryParams.value1"
+ placeholder="榛樿鎸夋湀浠芥殏鏃�"
+ >
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鎶曡瘔鎻愪氦鏃堕棿">
+ <el-date-picker
+ v-model="queryParams.dateRange"
+ style="width: 240px"
+ value-format="yyyy-MM-dd"
+ type="daterange"
+ range-separator="-"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ ></el-date-picker>
+ </el-form-item>
+ <el-form-item label="绉戝锛�" prop="userName">
+ <el-select v-model="queryParams.value2" placeholder="璇烽�夋嫨">
+ <el-option
+ v-for="item in ksoptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="绠＄悊鏂规锛�" prop="userName">
+ <el-select v-model="queryParams.value3" placeholder="璇烽�夋嫨">
+ <el-option
+ v-for="item in gloptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ </el-form>
+ </div>
+ <div class="viewhez">
+ <div
+ id="fucazCharts"
+ class="sontwoactiveNamecaz"
+ style="width: 800px; height: 800px"
+ ></div>
+ <div
+ id="fucabCharts"
+ class="sontwoactiveNamecab"
+ style="width: 1300px; height: 800px"
+ ></div>
+ </div>
+ </div>
+ </div>
</template>
<script>
+import Treeselect from "@riophae/vue-treeselect";
+import * as echarts from "echarts";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
+ name: "questionnaire",
+ dicts: ["sys_normal_disable", "sys_user_sex"],
+ components: { Treeselect },
data() {
- return {};
+ return {
+ topactiveName: "Local", //椤堕儴閫夋嫨
+ fucazCharts: {},
+ fucabCharts: {},
+ queryParams: {},
+ options: [
+ {
+ value: 1,
+ label: "鎸夋湀浠�",
+ },
+ {
+ value: 2,
+ label: "鎸夊搴�",
+ },
+ {
+ value: 3,
+ label: "鎸夊勾",
+ },
+ ],
+ ksoptions: [
+ {
+ value: 1,
+ label: "楠ㄧ",
+ },
+ {
+ value: 2,
+ label: "蹇冭剰绉�",
+ },
+ {
+ value: 3,
+ label: "鍐呭垎娉岀",
+ },
+ ],
+ gloptions: [
+ {
+ value: 4,
+ label: "涓�鍙�",
+ },
+ {
+ value: 2,
+ label: "浜屽彿",
+ },
+ {
+ value: 3,
+ label: "涓夊彿",
+ },
+ {
+ value: 1,
+ label: "鏃�",
+ },
+ ],
+ };
+ },
+ watch: {},
+ created() {},
+ mounted() {
+ this.fucazCharts = document.getElementById("fucazCharts");
+ this.fucabCharts = document.getElementById("fucabCharts");
+
+ console.log(this.fucazCharts);
+ console.log(this.fucabCharts);
+
+ this.fucazChartsInit();
+ this.fucabChartsInit();
},
- created() {},
-
- methods: {},
+ methods: {
+ // 楗煎浘
+ fucazChartsInit() {
+ var fucazCharts = echarts.init(this.fucazCharts);
+ console.log(fucazCharts);
+ var option = {
+ tooltip: {
+ trigger: "item",
+ },
+ legend: {
+ top: "5%",
+ left: "center",
+ },
+ series: [
+ {
+ name: "鍘熷洜褰掑睘",
+ type: "pie",
+ radius: ["40%", "70%"],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 10,
+ borderColor: "#fff",
+ borderWidth: 2,
+ },
+ label: {
+ show: false,
+ formatter(param) {
+ // correct the percentage
+ return param.name + " (" + param.percent * 2 + "%)";
+ },
+ position: "center",
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: 40,
+ fontWeight: "bold",
+ },
+ },
+ labelLine: {
+ show: false,
+ },
+ data: [
+ { value: 1048, name: "涓嶉渶瑕佸璇�" },
+ { value: 735, name: "娌℃湁鎰忎箟" },
+ { value: 580, name: "涓嶇煡閬撴椂闂�" },
+ { value: 484, name: "缁忔祹鍘熷洜" },
+ { value: 300, name: "蹇樿澶嶈瘖" },
+ { value: 200, name: "涓嶆柟渚挎潵闄㈠璇�" },
+ { value: 200, name: "鍏朵粬鍖婚櫌澶嶈瘖" },
+ { value: 100, name: "鍏朵粬" },
+ ],
+ },
+ ],
+ };
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ fucazCharts.setOption(option);
+ },
+ fucabChartsInit() {
+ var fucabCharts = echarts.init(this.fucabCharts);
+ console.log(fucabCharts);
+ var option = {
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "cross",
+ crossStyle: {
+ color: "#999",
+ },
+ },
+ },
+ toolbox: {
+ feature: {
+ dataView: { show: true, readOnly: false },
+ magicType: { show: true, type: ["line", "bar"] },
+ restore: { show: true },
+ saveAsImage: { show: true },
+ },
+ },
+ legend: {
+ data: ["鏈璇婃暟", "鍙婃椂澶嶈瘖鏁�", "鍙婃椂澶嶈瘖鐜�"],
+ },
+ xAxis: [
+ {
+ type: "category",
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ name: "浜烘暟",
+ min: 0,
+ max: 250,
+ interval: 50,
+ axisLabel: {
+ formatter: "{value} ",
+ },
+ },
+ {
+ type: "value",
+ name: "鐧惧垎姣�",
+ min: 0,
+ max: 25,
+ interval: 5,
+ axisLabel: {
+ formatter: "{value} %",
+ },
+ },
+ ],
+ series: [
+ {
+ name: "鏈璇婃暟",
+ type: "bar",
+ tooltip: {
+ valueFormatter: function (value) {
+ return value + " ";
+ },
+ },
+ data: [
+ 47.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
+ 3.3,
+ ],
+ },
+ {
+ name: "鍙婃椂澶嶈瘖鏁�",
+ type: "bar",
+ tooltip: {
+ valueFormatter: function (value) {
+ return value + " ";
+ },
+ },
+ data: [
+ 66.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+ 2.3,
+ ],
+ },
+ {
+ name: "鍙婃椂澶嶈瘖鐜�",
+ type: "line",
+ yAxisIndex: 1,
+ tooltip: {
+ valueFormatter: function (value) {
+ return value + " %";
+ },
+ },
+ data: [
+ 7.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
+ ],
+ },
+ ],
+ };
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ fucabCharts.setOption(option);
+ },
+ },
};
</script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.Questionnairemanagement {
+}
+
+::v-deep.el-tabs--left,
+.el-tabs--right {
+ overflow: hidden;
+ align-items: center;
+ display: flex;
+}
+::v-deep.el-input--medium .el-input__inner {
+ height: 40px !important;
+}
+::v-deep.el-tabs--right .el-tabs__active-bar.is-right {
+ height: 40px;
+ width: 5px;
+ left: 0;
+}
+::v-deep.el-tabs--right .el-tabs__item.is-right {
+ display: block;
+ text-align: left;
+ font-size: 20px;
+}
+
+.leftvlue {
+ // display: flex;
+ // flex: 1;
+ margin-top: 20px;
+ // margin: 20px;
+ padding: 30px;
+ background: #ffff;
+ border: 1px solid #dcdfe6;
+ -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
+ 0 0 6px 0 rgba(0, 0, 0, 0.04);
+ .mulsz {
+ font-size: 20px;
+ }
+}
+.viewbox {
+ border: 1px solid #dcdfe6;
+ -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
+ 0 0 6px 0 rgba(0, 0, 0, 0.04);
+ // height: 300px;
+ margin-top: 20px;
+ .title-bot {
+ padding: 20px;
+ }
+}
+.viewhez {
+ display: flex;
+ overflow: hidden;
+}
+</style>
--
Gitblit v1.9.3