loveflow
11 months ago
parent
41339eeda4
commit
083c23729b
@ -0,0 +1,3 @@
|
|||||||
|
<template>
|
||||||
|
<div class="juageMapPanel"></div>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,150 @@
|
|||||||
|
<template>
|
||||||
|
<div class="juageTablePanel">
|
||||||
|
<div class="flexSpaceBetween">
|
||||||
|
<div class="tableOperator"></div>
|
||||||
|
<div class="searchWrap">
|
||||||
|
<el-form :inline="true" :model="queryParam" class="demo-form-inline">
|
||||||
|
<el-form-item label="关键词:">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParam.name"
|
||||||
|
placeholder="请输入企业名称"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="风险类型:">
|
||||||
|
<el-select clearable v-model="queryParam.risk" placeholder="">
|
||||||
|
<el-option
|
||||||
|
v-for="item in riskList"
|
||||||
|
:label="item.name"
|
||||||
|
:key="item.name"
|
||||||
|
:value="item.value"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="要素异常明细:">
|
||||||
|
<el-select clearable v-model="queryParam.ys" placeholder="">
|
||||||
|
<el-option
|
||||||
|
v-for="item in elementList"
|
||||||
|
:label="item.name"
|
||||||
|
:key="item.name"
|
||||||
|
:value="item.value"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item style="margin-right: 0">
|
||||||
|
<el-button type="primary" @click="searchQuery">查询</el-button>
|
||||||
|
<el-button type="primary" plain @click="searchReset"
|
||||||
|
>重置</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tableWrap">
|
||||||
|
<gMainTable
|
||||||
|
border
|
||||||
|
stripe
|
||||||
|
ref="gMainTable"
|
||||||
|
:tableData="dataSource"
|
||||||
|
:columns="columns"
|
||||||
|
rowKey="id"
|
||||||
|
:pagination="ipagination"
|
||||||
|
@pageSizeChange="handlePageSizeChange"
|
||||||
|
@currentPageChange="handleCurrentPageChange"
|
||||||
|
>
|
||||||
|
<template v-slot:idSlot="{ scope }">
|
||||||
|
<span class="serialWrap">
|
||||||
|
{{ scope.row.id }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<template v-slot:riskSlot="{ scope }">
|
||||||
|
<gDict :options="riskList" :value="scope.row.risk"></gDict>
|
||||||
|
</template>
|
||||||
|
<template v-slot:ysSlot="{ scope }">
|
||||||
|
<gDict :options="elementList" :value="scope.row.ys"></gDict>
|
||||||
|
</template>
|
||||||
|
<template v-slot:jjSlot="{ scope }">
|
||||||
|
<div class="ybWrap" v-if="scope.row.jj == 0">
|
||||||
|
<div class="text">一般</div>
|
||||||
|
</div>
|
||||||
|
<div class="zdWrap" v-if="scope.row.jj == 1">
|
||||||
|
<div class="text">重点关注</div>
|
||||||
|
</div>
|
||||||
|
<div class="jjWrap" v-if="scope.row.jj == 2">
|
||||||
|
<div class="text">紧急</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</gMainTable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
|
||||||
|
import { commonMixins } from "@/loveflow/mixins/commonMixins";
|
||||||
|
export default {
|
||||||
|
mixins: [tableListMixins, commonMixins],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
slot: "idSlot",
|
||||||
|
prop: "id",
|
||||||
|
label: "序号",
|
||||||
|
attrs: {
|
||||||
|
width: 60,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "cmy",
|
||||||
|
label: "企业名称",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
slot: "riskSlot",
|
||||||
|
prop: "risk",
|
||||||
|
label: "违规事件",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
slot: "ysSlot",
|
||||||
|
prop: "ys",
|
||||||
|
label: "要素异常明细项",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "deal",
|
||||||
|
label: "类型",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
slot: "jjSlot",
|
||||||
|
prop: "jj",
|
||||||
|
label: "紧急程度",
|
||||||
|
attrs: {
|
||||||
|
width: 140,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "remarks",
|
||||||
|
label: "备注",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
@import "@/loveflow/assets/index.scss";
|
||||||
|
.juageTablePanel {
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
.tableWrap {
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
.serialWrap {
|
||||||
|
padding: 2px 6px;
|
||||||
|
border: solid 1px #9ed7e7;
|
||||||
|
color: #33e6ff;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,152 @@
|
|||||||
|
<template>
|
||||||
|
<div style="height: 100%; width: 100%" id="pieWrap">
|
||||||
|
<g-chart :echartdata="option"></g-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
chartObj: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
option: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.setOption();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setOption() {
|
||||||
|
let temp = this.getHeight();
|
||||||
|
let height = parseInt(temp / 8);
|
||||||
|
console.log(height);
|
||||||
|
let point = this.chartObj.point; //环形图的具体 百分比
|
||||||
|
let total = this.chartObj.total;
|
||||||
|
|
||||||
|
this.option = {
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
// 圆环中央文字
|
||||||
|
show: true, // 是否显示
|
||||||
|
text: this.chartObj.name,
|
||||||
|
textStyle: { fontSize: 12, color: "#D0DEEE" },
|
||||||
|
textAlign: "center",
|
||||||
|
left: "47%",
|
||||||
|
top: 2 * height + 20,
|
||||||
|
},
|
||||||
|
color: this.chartObj.color,
|
||||||
|
graphic: {
|
||||||
|
elements: [
|
||||||
|
{
|
||||||
|
type: "image",
|
||||||
|
style: {
|
||||||
|
image: this.chartObj.icon,
|
||||||
|
width: 4 * height,
|
||||||
|
height: 4 * height,
|
||||||
|
zIndex: 1,
|
||||||
|
},
|
||||||
|
left: "center",
|
||||||
|
top: 12 - height,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// name: '访问来源1',
|
||||||
|
type: "pie",
|
||||||
|
radius: [height - 6, height],
|
||||||
|
center: ["center", height + 12],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: total, //对应显示的部分数据即100%
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderRadius: 15,
|
||||||
|
color: "#1B2221",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
position: "center",
|
||||||
|
formatter: ((100 * point) / total).toFixed(0) + "%",
|
||||||
|
color: this.chartObj.color[0],
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// name: '访问来源2',
|
||||||
|
type: "pie",
|
||||||
|
showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
|
||||||
|
radius: [height - 6, height],
|
||||||
|
center: ["center", height + 12],
|
||||||
|
avoidLabelOverlap: true, // 标签重叠时进行调整
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: total,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 15, //圆角
|
||||||
|
color: {
|
||||||
|
// 设置渐变色
|
||||||
|
type: "linear",
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: this.chartObj.color[1], // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: this.chartObj.color[2], // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
value: total, //百分比
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(255,255,255,0)", //透明
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: "center",
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
getHeight() {
|
||||||
|
let div = document.getElementById("pieWrap");
|
||||||
|
return div.clientHeight;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
chartObj: {
|
||||||
|
handler(newval) {
|
||||||
|
this.setOption();
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
// immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Loading…
Reference in new issue