Skip to content

F
founder_vue
Commit 40037f38 by liyuhang19990520
Options

Merge branch 'sn_snzz' of http://47.92.108.28/changchao/founder_vue into sn_snzz

parents 43426f95 46cd05d1
Showing with 1091 additions and 11 deletions
public/jsonData/spjkyjshyy_tableTile.json
......@@ -4,30 +4,26 @@
"data": {
"1": [
{
"label": "人员姓名",
"label": "采集时间",
"prop": "ryxm",
"width": "auto"
},
{
"label": "位置",
"label": "纠纷类别",
"prop": "jkdmc",
"width": "auto"
},
{
"label": "人员证件号码",
"label": "处置状态",
"prop": "ryzjhm",
"width": "auto"
},
{
"label": "时间",
"label": "当前部门",
"prop": "time",
"width": "auto"
},
{
"label": "监控点Id",
"prop": "jkdId",
"width": "auto"
}
],
"2": [
{
......
src/assets/jsData/sjsbForm.js 0 → 100644
/*
* @Author: your name
* @Date: 2021-08-10 10:47:58
* @LastEditTime: 2021-08-10 10:53:55
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \山南\src\assets\jsData\sjsbForm.js
*/
export const searchFormData = {
'1': {
formProps: [{
name: "纠纷类型",
id: "yjlx",
type: "select",
selectData: [
{
name: "特殊人群分析预警",
value: '1',
},
{
name: "重点青少年分析预警",
value: '2',
},
],
placeholder: "请选择",
rules: [{
required: true,
message: "请输入纠纷类型",
trigger: "blur"
}, ],
col: "3",
},
{
name: "处置000状态",
id: "czzt",
type: "select",
selectData: {
},
col: "3",
},
{
name: "采集时间",
id: "cjsj",
type: "datetime",
value: "",
col: "3",
},
],
form: {
page: 1,
pageSize: 10,
yjlx: 1,
shjdmc: '',
wgmc: '',
}
},
}
\ No newline at end of file
src/components/sjspDiolog.vue 0 → 100644
<!--
* @Author: your name
* @Date: 2021-08-10 13:59:38
* @LastEditTime: 2021-08-11 09:39:18
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \山南\src\components\sjspDiolog.vue
-->
<template>
<div id="dialogForm">
<el-dialog
v-loading="diaLogLoading"
element-loading-text="拼命加载中"
:title="title"
:visible.sync="dialogFormVisible"
custom-class="tztgClass"
@closed="closed"
>
{{ formData }}
{{ Listform.length }}
<el-form :model="form" :inline="true" :rules="rules">
<el-form-item
label="纠纷类别"
:label-width="formLabelWidth"
class="col"
prop="jflb"
>
<el-select v-model="form.jflb" placeholder="请选择活动区域">
<el-option label="纠纷类别1" value="jf1"></el-option>
<el-option label="纠纷类别2" value="jf2"></el-option>
</el-select>
</el-form-item>
<el-form-item
label="纠纷来源"
:label-width="formLabelWidth"
class="col"
prop="jfly"
>
<el-select v-model="form.jfly" placeholder="请选择活动区域">
<el-option label="纠纷来源1" value="jfly1"></el-option>
<el-option label="纠纷来源2" value="jfly2"></el-option>
</el-select>
</el-form-item>
<el-form-item
label="标题简述"
:label-width="formLabelWidth"
class="col"
prop="btjs"
>
<el-input v-model="form.btjs" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
label="事发地点"
:label-width="formLabelWidth"
class="col"
prop="ssdd"
>
<el-input v-model="form.ssdd" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
label="情况概要"
prop="desc"
:label-width="formLabelWidth"
>
<el-input type="textarea" v-model="form.desc" class="area"></el-input>
</el-form-item>
<div class="out">
<div class="fl"><span>当前状态</span><span>[事件登记]</span></div>
<div class="fr"><span>当前部门</span><span>[乃东区]</span></div>
</div>
</el-form>
<!-- 写数据 的form -->
<div class="line">
<el-form
ref="queryForm"
:model="formData"
:label-width="formLabelWidth"
>
<el-form-item label="人员列表">
<el-button @click="addDomain">新增域名</el-button>
</el-form-item>
<el-form-item
:label="item.name + ':'"
v-for="item in propQueryField"
:key="item.id"
:prop="item.id"
v-show="!item.hidden"
:rules="item.rules"
:class="'demo-input-suffix zdycol' + item.col"
>
<el-input
clearable
:placeholder="item.placeholder"
v-model="formData[item.id]"
v-if="item.type == 'text'"
>
</el-input>
</el-form-item>
</el-form>
</div>
<!-- 添加的form -->
<div v-show="(Listform && Listform.length) == 0 ? false : true">
<el-form
ref="queryFormadd"
:model="formDataadd"
:label-width="formLabelWidth"
:inline="true"
:rules="rulestwo"
>
<div
class=""
v-for="(item, index) in Listform"
:key="index"
prop="xm"
:class="{
line: true,
lineborder: Listform.length != 0 ? true : false,
}"
>
<el-form-item label="姓名" class="col" prop="xm">
<el-input v-model="item.xm"></el-input>
</el-form-item>
<el-form-item label="身份证号 " class="col" prop="sfzh">
<el-input v-model="item.sfzh"></el-input>
</el-form-item>
<el-form-item label="性别" class="col" prop="xb">
<el-input v-model="item.xb"></el-input>
</el-form-item>
<el-form-item label="证件地址" class="col" prop="zjdz">
<el-input v-model="item.zjdz"></el-input>
</el-form-item>
<el-form-item label="电话" class="col" prop="dh">
<el-input v-model="item.dh"></el-input>
</el-form-item>
<!-- <el-button @click="addDomain">增加</el-button> -->
<el-button @click="removeDomain(item)">删除</el-button>
</div>
<el-form-item class="sub">
<el-button type="primary" @click="submitForm('queryFormadd')"
>提交</el-button
>
<el-button type="primary" @click="submitForm('queryFormadd')"
>修改
</el-button>
</el-form-item>
</el-form>
</div>
<!-- 调处记录 -->
<div class="lineborder">
<el-form :model="tcjlform" >
<el-form-item
label="调处记录"
prop="desc"
:label-width="formLabelWidth"
class="tcjl"
>
<el-form-item :label-width="formLabelWidth">
<el-input
type="textarea"
v-model="tcjlform.desc"
class="area"
></el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth" class="tcjl">
<el-checkbox-group v-model="tcjlform.checkList">
<el-checkbox label="已完结 "></el-checkbox>
<el-checkbox label="上报"></el-checkbox>
<el-checkbox label="转交"></el-checkbox>
<el-checkbox label="交办"></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form-item>
<el-form-item :label-width="formLabelWidth" label="to" width='500px'>
<el-select v-model="tcjlform.value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-tag type="warning">标签四</el-tag>
</el-form-item>
</el-form>
</div>
</el-dialog>
</div>
</template>
<script>
import SearchForm from "@c/SearchForm.vue";
export default {
components: {
SearchForm,
},
data() {
return {
diaLogLoading: false, //dialog Loading
title: "", //dialog显示的title
dialogFormVisible: false, //dialog开关
formLoading: false, //表单loading
formDataadd: {}, //增加的表单数据
formData: {}, //往添加的表单存储的
id: "", //当前 行数的id
Listform: [], //添加表单的数据
form: {
name: "",
region: "",
date1: "",
date2: "",
delivery: false,
type: [],
resource: "",
desc: "",
},
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
},],
tcjlform: { checkList: ["选中且禁用", "复选框 A"] }, //调处记录的数据
formLabelWidth: "120px",
rules: {
jflb: [{ required: true, message: "请选择纠纷类别", trigger: "change" },],
jfly: [{ required: true, message: "请选择纠纷来源", trigger: "change" },],
btjs: [{ required: true, message: "请输入标题简述", trigger: "blur" }],
ssdd: [{ required: true, message: "请输入事发地点", trigger: "blur" }],
desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
},
rulestwo:{
xm: [{ required: true, message: "请输入姓名", trigger: "change" },],
sfzh: [{ required: true, message: "请输入身份证号", trigger: "change" },],
xb: [{ required: true, message: "请输入性别", trigger: "blur" }],
zjdz: [{ required: true, message: "请输入证件地址", trigger: "blur" }],
dh: [{ required: true, message: "请输入电话", trigger: "blur" }],
},
propQueryField: [
{
name: "姓名",
id: "xm",
type: "text",
placeholder: "请输入",
col: "3",
rules: [{ required: true, message: "请输入姓名", trigger: "blur" }],
},
{
name: "身份证号",
id: "sfzh",
type: "text",
placeholder: "请输入",
col: "3",
rules: [
{ required: true, message: "请输入身份证号", trigger: "blur" },
],
},
{
name: "性别",
id: "xb",
type: "text",
placeholder: "请输入",
col: "3",
rules: [{ required: true, message: "请输入性别", trigger: "blur" }],
},
{
name: "证件地址",
id: "zjdz",
type: "text",
placeholder: "请输入",
col: "3",
rules: [
{ required: true, message: "请输入证件地址", trigger: "blur" },
],
},
{
name: "电话",
id: "dh",
type: "text",
placeholder: "请输入",
col: "3",
rules: [{ required: true, message: "请输入电话", trigger: "blur" }],
},
],
};
},
methods: {
/**
* @description: 关闭是的回调
* @param {*}
* @return {*}
*/
closed() {},
init(row) {
this.id = row.id;
console.log("组件里面的值 ", row);
this.dialogFormVisible = true;
},
/**
* @description: 增加表单
* @param {*}
* @return {*}
*/
addDomain() {
let _this = this;
_this.$refs.queryForm.validate((boo) => {
if (boo) {
this.Listform.push({
xm: this.formData.xm,
sfzh: this.formData.sfzh,
xb: this.formData.xb,
zjdz: this.formData.zjdz,
dh: this.formData.dh,
});
for (let key in _this.formData) {
_this.$set(_this.formData, key, "");
}
}
});
},
/**
* @description: 删除
* @param {*} item 某一行
* @return {*}
*/
removeDomain(item) {
var index = this.Listform.indexOf(item);
if (index !== -1) {
this.Listform.splice(index, 1);
}
},
/**
* @description: 提交数据
* @param {*}
* @return {*}
*/
submitForm() {
this.$refs[formName].validate((valid) => {
if (valid) {
//如果验证通过的话调用后台接口
console.log(this.num);
// this.$set(this.Listform,"id",this.num)
this.Listform.id = this.num;
console.log(this.Listform);
} else {
console.log("error submit!!");
return false;
}
});
},
},
};
</script>
<style lang='scss' scoped>
.area {
width: 100%;
}
#dialogForm /deep/ {
.el-form-item__content {
width: 200px;
}
}
.tcjl /deep/ {
.el-form-item__content {
width: 80% !important;
margin-left: 57px !important;
}
}
.sub {
width: 100%;
text-align: center;
}
.out:after {
content: "";
display: block;
width: 0px;
height: 0px;
clear: left;
}
.line {
margin-top: 20px;
}
.lineborder {
padding-top: 20px;
border: 1px solid #666;
}
.fl {
float: left;
margin-left: 10%;
}
.fr {
float: right;
margin-right: 10%;
}
.zdycol3 {
display: inline-block;
width: 43%;
}
.zdycol6 {
display: inline-block;
width: 66%;
}
.zdycol2 {
display: inline-block;
width: 50%;
}
.zdycol10 {
display: inline-block;
width: 100%;
}
.inlineBtn {
display: inline-block;
width: 66%;
}
</style>
src/router/modules/index.js
/*
* @Author: your name
* @Date: 2021-08-06 14:39:51
* @LastEditTime: 2021-08-10 16:24:15
* @LastEditTime: 2021-08-10 19:15:14
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\router\modules\index.js
......@@ -97,7 +97,15 @@ export default [
component: () => import('@/views/wssqzxt/index.vue')
},
{
path: '/rkzjfx',
path: '/sjsb',
name: 'sjsb',
meta: {
title: '事件上报',
auth: '5'
},
component: () => import('@/views/sjsb/index.vue')
},
{ path: '/rkzjfx',
name: 'rkzjfx',
meta: {
title: '人口状况分析',
......
src/views/Home.vue
......@@ -49,6 +49,10 @@
<i class="el-icon-setting"></i>
<span slot="title">网上社区子系统</span>
</el-menu-item>
<el-menu-item index="/sjsb">
<i class="el-icon-setting"></i>
<span slot="title">事件上报</span>
</el-menu-item>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-document"></i>
......
src/views/sjsb/index.scss 0 → 100644
.rightContent {
flex: 1;
height: 100%;
overflow-y: auto;
text-align: left;
.topTitle {
width: 100%;
height: 56px;
background: #1F212C;
display: flex;
align-items: center;
span {
font-size: 18px;
font-weight: bold;
line-height: 24px;
color: #FFFFFF;
margin-left: 35px;
}
.subTitleBox{
display: flex;
align-items: center;
margin-left: 90px;
}
.subTitle {
width: 138px;
text-align: center;
margin-top: 19px;
margin-left: 15px;
.ajTitle {
font-size: 14px;
font-weight: 400;
color: #FFFFFF;
opacity: 0.8;
}
.bottom {
height: 4px;
background: #F1970F;
opacity: 1;
margin-top: 7px;
}
}
}
.paneDiv {
background: #FFFFFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
opacity: 1;
border-radius: 4px;
margin: 8px 0px;
padding: 0 20px;
padding-bottom: 14px;
position: relative;
.flTtitle {
margin: 16px 10px 14px 8px;
display: inline-block;
font-size: 15px;
font-weight: bold;
line-height: 20px;
color: #333333;
opacity: 1;
}
.total {
height: 16px;
background: #f1970f;
border-radius: 8px;
display: inline-block;
text-align: center;
line-height: 16px;
padding: 0 8px;
span {
width: 35px;
height: 16px;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: #ffffff;
opacity: 1;
}
}
/deep/ .el-pagination__sizes {
top: 12px;
right: 152px;
width: 110px;
}
/deep/ .has-gutter{
.cell{
font-size: 14px;
color: #000;
}
}
/deep/ .el-table__body, .el-table__footer, .el-table__header{
background-color: tomato;
}
}
.paneDiv2{
height: 250px
}
.pie1{
height: 100%;
width: 100%;
}
.header{
background-color: #1F212C;
height: 56px;
width: 20%;
text-align: center;
.info{
font-size: 18px;
font-weight: bold;
line-height: 56px;
color: #FFFFFF;
margin-left: 35px;
}
}
}
.Content /deep/{
.el-table td, .el-table th.is-leaf,.el-pagination{
line-height: 0px;
}
}
src/views/sjsb/index.vue 0 → 100644
<template>
<div class="Content">
<div class="rightContent">
<div class="topTitle">
<span>事件上报</span>
</div>
<!-- 查询表单 -->
<SearchForm
:formProps="formProps"
:form="form"
:positionList="positionList"
@searchEvent="searchsh($event)"
@clearEvent="searchsh($event)"
@change="selectChange"
></SearchForm>
<!-- 表格内容 -->
<div class="Content paneDiv">
<div class="">
<el-row style="width: 99%; margin: 0 auto">
<el-col :span="24">
<span class="flTtitle">查询结果</span>
<!--可配置化图标-->
<div class="total">
<span> {{ tableDataLength }} </span>
</div>
</el-col>
</el-row>
<!--表格-->
<el-table
stripe
:key="key"
v-loading="tableLoading"
element-loading-text="拼命加载中"
ref="itsmDataTable"
tooltip-effect="dark"
max-height="550"
style="width: 99%; margin: 0 auto"
width="100%"
size="small"
:data="bztjDataList"
>
<el-table-column type="index" width="50"> </el-table-column>
<el-table-column
align="center"
v-for="columnTitle in bztjFormThead"
:prop="columnTitle.prop"
:key="columnTitle.label"
:label="columnTitle.label"
:width="columnTitle.width"
>
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button type="text" @click="handleClick(scope.row)" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<!--分页-->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage1"
:page-sizes="[10, 20, 50, 100]"
:page-size="page_size"
layout="sizes,prev, pager, next"
:total="tableDataLength"
>
</el-pagination>
</div>
</div>
<!-- 饼图内容 -->
<div class="Content paneDiv paneDiv2">
<div
class="pie1"
ref="pieDiagram"
v-loading="pieDiagramLoading"
element-loading-text="拼命加载中"
></div>
</div>
<sjsp-diolog ref="dialogForm">
</sjsp-diolog>
</div>
</div>
</template>
<script>
import SearchForm from "@c/SearchForm.vue";
import sjspDiolog from "@c/sjspDiolog.vue";
import { get, postJson } from "@/utils/http.js";
import axios from "axios";
import utils from "@/utils/util.js";
import { yjlx } from "@/assets/jsData/spjkyjzshyyselect.js";
import { searchFormData } from "@/assets/jsData/spjkyjzshyy_searchForm.js";
import SjspDiolog from '../../components/sjspDiolog.vue';
export default {
name: "bztj",
components: {
SearchForm,
sjspDiolog
},
data() {
return {
tableLoading: false, // 表格loading
pieDiagramLoading: false, //饼图loading
pieSwitch: true, //是否重置饼图
currentPage1: 1, //表格页码
page_size: 10, //每页显示多少条
key: 1,
pieDateList: "",
//多少条数据
tableDataLength: 99,
//范围显示的数据
positionList: [],
// 表单 子传父的数据 按顺序进行展示
formProps: [
{
name: "纠纷类型",
id: "yjlx",
type: "select",
selectData: yjlx,
placeholder: "请输入",
rules: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
],
col: "3",
},
{
name: "处置状态",
id: "czzt",
type: "select",
selectData: [],
placeholder: "请输入",
rules: [
// { required: true, message: "请输入活动名称", trigger: "blur" },
],
col: "3",
},
{
name: "采集时间",
id: "cjsj",
type: "datetime",
placeholder: "请输入",
col: "3",
},
// {
// name: "人员证件号码",
// id: "ryzjhm",
// type: "autocomplete",
// placeholder: "请输入",
// col: "3",
// },
// {
// name: "时间",
// id: "time",
// type: "date1",
// value: "",
// col: "3",
// },
],
form: {
page: 1,
pageSize: 10,
yjlx: "1",
},
// 表格表头
bztjFormThead: [
{
label: "人员姓名",
prop: "ryxm",
width: "auto",
},
{
label: "位置",
prop: "jkdmc",
width: "auto",
},
{
/*table默认得表头*/
label: "人员证件号码",
prop: "ryzjhm",
width: "auto",
},
{
label: "时间",
prop: "time",
width: "auto",
},
{
label: "监控点Id",
prop: "jkdId",
width: "auto",
},
],
// 表格数据
bztjDataList: [],
//饼图数据
pieData: [ ],
pieDataProps: {
},
binpic: [],
};
},
methods: {
/**
* @description: 编辑按钮
* @param {*} row
* @return {*}
*/
handleClick(row){
console.log('一行的信西',row);
this.$refs.dialogForm.init(row);
},
convertKey(arr) {
arr.forEach((item) => {
this.binpic.push({ name: item.NAME, value: item.VALUE });
});
},
/**
* @description: 查询条件
* @param {*} form 表单数据
* @return {*}
*/
searchsh(form) {
console.log("form", form);
this.key = form.yjlx;
// 改变表格表头
this.selectTableTitle(this.key);
setTimeout(() => {
// this.getTableList(form,this.key);
}, 0);
this.getTableList(form, this.key);
},
/**
* @description: 根据预警类型切换表头
* @param {*} 预警类型key值
* @return {*}
*/
selectTableTitle(key) {
get(`jsonData/spjkyjshyy_tableTile.json`).then((data) => {
if (data) {
this.bztjFormThead = data[key];
} else {
this.$error.error("出错了");
}
});
},
/**
* @description: 表格呢内容获取
* @param {*} form 查询表单字段
* @return {*}
*/
getTableList(form, key) {
get(`jsonData/spjkyjshyy_tableinfo.json`).then((data) => {
if (data) {
this.bztjDataList = data[key];
} else {
this.$error.error("出错了");
}
});
// this.$set(form,'userid',sessionStorage.getItem('userid') || 'ndqzz01')
// this.tableLoading = true;
// console.log("发送给后台的数据", form);
// console.log(this.pieDateList, this.pieData);
// // this.tableLoading = true;
// if (this.pieSwitch) {
// this.pieDiagramLoading = true;
// }
// axios({
// url: "/OTHER/spjkyjshyy/queryShyj",
// method: "POST",
// data: form,
// })
// .then((res) => {
// console.log('返回的数据',res);
// let pieData = this.pieDataProps[this.key];
// this.bztjDataList = res.data;
// this.tableDataLength = res.total;
// this.bztjDataList.forEach((item)=>{
// console.log(item.jkdmc);
// this.positionList.push({value:item.jkdmc})
// })
// if (this.pieSwitch) {
// this.setPieDiagram("pieDiagram", pieData[0].title, res[pieData[0].prop]);
// this.pieDiagramLoading = false;
// this.pieSwitch = false;
// }
// this.tableLoading = false;
// })
// .catch((err) => {
// console.log(err);
// });
},
/**
* @description: 监听预警类别变化更换查询表单
* @param {*} val 预警类别的值
* @return {*}
*/
selectChange(val) {
let search = searchFormData[val];
console.log(search);
//必须深拷,不然会污染数据
if (search) {
this.formProps = utils.deepClone(search.formProps);
this.form = utils.deepClone(search.form);
}
},
filterTag(value, row) {
console.log(value);
return row.ycbz === value;
},
// 清空按钮
clearData() {
this.formData = {};
},
//字符串转数组
stringToArr(str) {
return str.split("-");
},
/**
* @description: 每页条数
* @param {*} val 目标条数
* @return {*}
*/
handleSizeChange(val) {
console.log("条数", this.form);
this.$set(this.form, "pageSize", val);
this.getTableList(this.form);
},
/**
* @description: 第几页
* @param {*} val 当前页数
* @return {*}
*/
handleCurrentChange(val) {
console.log("分页", this.form);
this.$set(this.form, "page", val);
this.getTableList(this.form);
},
// 导出功能
export2Excel() {},
/**
* @description: 人员饼图封装
* @param {*} data 饼图数据
* @return {*}
*/
setPieDiagram(dom, title, data) {
console.log("饼图的数据");
// debugger;
//颜色组
const colorList = [
"#58D5FF",
"#73ACFF",
"#FDD56A",
"#FDB36A",
"#FD866A",
"#9E87FF",
];
let myChart;
// 基于准备好的dom，初始化echarts实例
console.log("Dom", this.$refs[dom]);
// this.$nextTick(()=>{
// myChart = this.$echarts.init(this.$refs[dom]);
// })
myChart = this.$echarts.init(this.$refs[dom]);
console.log(myChart);
myChart.setOption({
title: {
text: title,
textStyle: {
color: "#000",
fontWeight: 600,
fontSize: 20,
},
left: "3%",
top: "10%",
},
tooltip: {
trigger: "item",
},
legend: {
type: "plain",
orient: "vertical",
top: "20%",
right: "29%",
itemWidth: 14,
itemGap: 17,
formatter: function (params) {
let num;
if (data.length > 0) {
num = data.find((i) => params == i.name);
}
return `${params}\xa0\xa0\xa0\xa0${num.value}`;
},
textStyle: {
color: "#B0BAD3",
},
},
series: [
{
type: "pie",
center: ["37%", "center"],
radius: ["35%", "50%"],
minAngle: 10,
avoidLabelOverlap: true,
hoverOffset: 15,
itemStyle: {
color: (params) => {
return colorList[params.dataIndex];
},
},
label: {
show: true,
position: "outer",
alignTo: "labelLine",
// ·圆点
backgroundColor: "auto", //圆点颜色，auto：映射的系列色
height: 0,
width: 0,
lineHeight: 0,
// height,width.lineHeight必须为0
distanceToLabelLine: 0, //圆点到labelline距离
borderRadius: 2.5,
padding: [2.5, -2.5, 2.5, -2.5],
/*radius和padding为圆点大小，圆点半径为几radius和padding各项数值就为几
如：圆点半径为1
borderRadius: 1,
padding: [1, -1, 1, -1]
*/
formatter: "{a|{b}：}{b|{d}%}",
rich: {
a: {
padding: [0, 0, 0, 10],
},
b: {
padding: [0, 10, 0, 0],
},
},
},
data: data,
},
],
});
window.addEventListener("resize", () => {
myChart.resize();
});
},
},
mounted() {
//初始话表格
console.log(this.form);
this.getTableList(this.form);
},
watch: {
key: function () {
this.pieSwitch = true;
},
},
};
</script>
<style lang="scss" scoped src='./index.scss'>
/deep/.el-table thead {
font-weight: 500;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment