DigitalMgnt
/
tfse-app-webapp-v0.2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mode

This commit is contained in:
xuyucheng 2022-02-22 17:19:08 +08:00
parent 325bb9c778
commit 3bdbb7fc42
12 changed files with 526 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/assets/css/company.scss
View File

@ -34,4 +34,11 @@
::v-deep .el-progress__text {
font-family: "SR" !important;
font-weight: bolder;
}
.el-select {
::v-deep .el-input__inner {
font-family: "SRL" !important;
}
}

6
src/assets/css/font.css
View File

@ -1,9 +1,9 @@
@font-face{
@font-face {
font-family: 'SR';
src: url('../font/SourceHanSansCN-Medium.otf');
}
@font-face{
@font-face {
font-family: 'SRL';
src: url('../font/SourceHanSansCN-ExtraLight.otf');
src: url('../font/SourceHanSansK-Normal.ttf');
}

12
src/assets/css/general.scss
View File

@ -73,12 +73,15 @@ span {
width: 100%;
border: none;
background-color: transparent;
border: 1px solid #EBEEF5
border: 1px solid #EBEEF5;
padding: 20px;
box-sizing: border-box;
}
::v-deep .el-card__header {
padding: 0 20px !important;
background-color: transparent;
border: none !important;
}
::v-deep .el-card__body {
@ -143,4 +146,11 @@ input[type="number"] {
::v-deep .el-dialog__title {
font-size: 14px !important;
}
.el-select {
::v-deep .el-input__inner {
font-family: "SRL" !important;
}
}

BIN
src/assets/font/SourceHanSansK-Normal.ttf Normal file
View File

Binary file not shown.

87
src/components/FecrAgree.vue
View File

@ -1,87 +0,0 @@
<!-- 消息提示 -->
<template>
<el-dialog :visible.sync="dialog" width="auto" :before-close="handleClose">
<!-- <img src="../assets/img/moon.png" /> -->
<p>即将开启新的服务</p>
<el-button type="primary" @click="handleClose">我再看看</el-button>
<el-button type="primary" @click="toRouter">现在就去</el-button>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialog: false,
time: 5,
};
},
mounted() {
this.$nextTick(() => {
this.dialog = true;
// setInterval(() => {
// this.timer();
// }, 1000);
});
},
methods: {
toRouter() {
this.dialog = false;
this.$router.push("/service");
},
handleClose() {
this.$emit("getDialog", false);
this.dialog = false;
},
// timer() {
// if (this.time > 0) {
// this.time--;
// } else {
// this.dialog = false;
// this.$router.push("/info");
// }
// },
},
};
</script>
<style lang='scss' scoped>
::v-deep .el-dialog {
display: flex;
flex-direction: column;
margin: 0 !important;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 10px;
}
// ::v-deep .el-dialog__header {
// display: none;
// }
::v-deep .el-dialog__body {
display: flex;
justify-content: center;
flex-wrap: wrap;
p {
font-family: "SRL";
font-size: 16px;
}
}
img {
height: 180px;
}
p {
width: 100%;
text-align: center;
margin-bottom: 30px;
}
</style>

47
src/components/FecrDialog.vue
View File

@ -1,47 +0,0 @@
<template>
<el-dialog
:title="title"
:visible.sync="dialog"
width="30%"
:before-close="handleClose"
>
<slot name="dialogContent"></slot>
<span slot="footer" class="dialog-footer">
<el-button @click="submit">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
prop: {
dialog: {
type: Boolean,
default: false,
},
title: {
type: String,
default: "",
},
},
methods: {
handleClose() {
this.$emit("close", false);
},
submit() {
this.$emit("submit", false);
},
},
watch: {
dialog: {
handler(value) {
this.dialog = value;
console.log(value)
},
},
},
};
</script>
<style lang="scss" scoped>
</style>

102
src/components/FecrRing.vue Normal file
View File

@ -0,0 +1,102 @@
<template>
<div :id="id" style="width: 100%; height: 300px"></div>
</template>
<script>
export default {
props: {
data: [Object, Array],
id: {
type: String,
default: "pie",
},
},
data() {
return {};
},
mounted() {
this.init();
},
methods: {
init() {
var chart = this.$echarts.init(document.getElementById(this.id), "shine");
var option = {
tooltip: {
show: true,
trigger: "item",
formatter: function (params) {
return params.data.value;
},
},
title: {
show: true,
text: this.data.name,
x: "center",
left: "48%",
top: "center",
textAlign: "center",
textStyle: {
color: this.data.color[0],
},
},
color: this.data.color,
legend: {
x: "center",
y: "bottom",
itemHeight: 10,
itemGap: 8,
background: "#fff",
},
series: this.data.value.map((item, i) => {
return {
name: item.name,
type: "pie",
radius: this.data.radius[i],
label: {
show: false,
position: "center",
},
labelLine: {
normal: {
show: false,
},
},
emphasis: {
label: {
show: true,
fontSize: "20",
fontWeight: "bold",
},
},
data: [
{
value: item.value,
name: item.name,
},
],
};
}),
};
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
window.addEventListener("resize", function () {
chart.resize();
});
},
},
watch: {
data: {
handler(val) {
this.data = val;
this.init();
},
immediate: true,
deep: true,
},
},
};
</script>
<style>
</style>

130
src/view/appraisal/esg/index.vue
View File

@ -8,46 +8,50 @@
</el-header>
<el-main>
<el-card>
<p>
一、基础信息
<el-form
:model="data['基础信息']"
label-position="top"
style="padding: 0"
>
<el-form-item label="企业名称">
<el-input v-model="data['基础信息']['企业名称']"></el-input>
</el-form-item>
<el-form-item label="所属行业">
<el-cascader
v-model="data['基础信息']['企业名称']"
:options="industry"
:props="{ label: 'value' }"
>
</el-cascader>
</el-form-item>
<el-form-item label="企业当年收入">
<fecr-tran-table
:data="data['基础信息']['企业当年收入']"
:columns="getColumns(data['基础信息']['企业当年收入'])"
></fecr-tran-table>
</el-form-item>
</el-form>
</p>
<p>
二、环境信息
<fecr-tran-table
:data="data['环境信息']"
:columns="getColumns(data['环境信息'])"
></fecr-tran-table>
</p>
<p style="text-align: center; font-size: 24px">ESG填报问卷</p>
<p>一、基础信息</p>
<el-form
:model="data['基础信息']"
label-position="top"
style="padding: 0"
>
<el-form-item label="企业名称">
<el-input v-model="data['基础信息']['企业名称']"></el-input>
</el-form-item>
<el-form-item label="所属行业">
<el-cascader
v-model="data['基础信息']['所属行业']"
:options="industry"
:props="{ label: 'value' }"
>
</el-cascader>
</el-form-item>
<el-form-item label="企业当年收入">
<fecr-tran-table
@backData="backData"
:data="data['基础信息']['企业当年收入']"
:columns="getColumns(data['基础信息']['企业当年收入'])"
></fecr-tran-table>
</el-form-item>
</el-form>
<p>二、环境信息</p>
<fecr-tran-table
@backData="backData"
:data="data['环境信息']"
:columns="getColumns(data['环境信息'])"
></fecr-tran-table>
<p>三、社会信息</p>
<fecr-tran-table
@backData="backData"
:data="data['社会信息']"
:columns="getColumns(data['社会信息'])"
></fecr-tran-table>
<p>四、治理信息</p>
<fecr-tran-table
@backData="backData"
:data="data['治理信息']['问卷一']"
:columns="getColumns(data['治理信息']['问卷一'])"
></fecr-tran-table>
@ -61,12 +65,12 @@
:label="child"
></el-radio>
</div>
<el-input v-else v-model="item[index]"></el-input>
<el-input v-else v-model="item.answer"></el-input>
</div>
</el-card>
</el-main>
<el-footer>
<el-button type="primary" @click="submit" :disabled="!submitStatus">
<el-button type="primary" @click="submit" :disabled="submitStatus">
提 交
</el-button>
</el-footer>
@ -211,11 +215,11 @@ export default {
},
],
问卷二: {
公司性质: {
"1.公司性质": {
question: ["A.股份有限公司", "B.有限责任公司", "C.其他"],
answer: "",
},
"截至目前，董监高平均拥有的行业经验年数(高管包括总经理、财务总监、董秘以及公司章程规定的其他人)":
"2.截至目前，董监高平均拥有的行业经验年数(高管包括总经理、财务总监、董秘以及公司章程规定的其他人)":
{
question: [
"A.大于等于8年",
@ -224,9 +228,9 @@ export default {
],
answer: "",
},
目前董监高人数: "",
"2019年至2021年公司董监高合计离职人数": "",
公司董事会近三年年均开会次数: {
"3.目前董监高人数": { answer: "" },
"4.2019年至2021年公司董监高合计离职人数": { answer: "" },
"5.公司董事会近三年年均开会次数": {
question: [
"A.大于等于4次",
"B.大于等于2次，小于4次",
@ -234,15 +238,15 @@ export default {
],
answer: "",
},
公司是否设有董事会: {
"6.公司是否设有董事会": {
question: ["A.是", "B.否"],
answer: "",
},
公司是否设有监事会: {
"7.公司是否设有监事会": {
question: ["A.是", "B.否"],
answer: "",
},
"公司近三年信息披露是否及时、可靠、完备、审计质量较好": {
"8.公司近三年信息披露是否及时、可靠、完备、审计质量较好": {
question: ["A.是", "B.否"],
answer: "",
},
@ -267,13 +271,19 @@ export default {
this.$router.push("/appraisal");
},
backData(val) {
console.log(val);
},
getColumns(value) {
return Object.keys(value[0]).map((key) => {
return key;
});
},
submit() {},
submit() {
console.log(this.data);
},
},
};
</script>
@ -320,8 +330,36 @@ export default {
margin-bottom: 20px;
}
.el-input{
width:auto
.el-input {
width: auto;
}
p::before {
content: "";
display: block;
width: 3px;
height: 14px;
background: #ff9347;
border-radius: 2px;
position: absolute;
left: -9px;
top: 50%;
transform: translateY(-50%);
}
.el-form {
width: 100%;
padding: 0 5%;
box-sizing: border-box;
.el-form-item {
::v-deep .el-form-item__label {
font-family: "SRL";
}
}
}
::v-deep .el-input__inner {
font-family: "SRL" !important;
}
</style>

4
src/view/company/index.vue
View File

@ -134,7 +134,7 @@
<p slot="label">ESG评价</p>
<div>
<span>更新日期：{{ data["综合信用等级"]["评价时间"] }}</span>
<el-row></el-row></div
<el-row><step-esg :name="state"></step-esg></el-row></div
></el-tab-pane>
</el-tabs>
@ -159,6 +159,7 @@ import stepElementsAppraisal from "./stepElementsAppraisal";
import stepRiskAppraisal from "./stepRiskAppraisal";
import stepCompanyInfo from "./stepCompanyInfo";
import stepAnalysisIndicator from "./stepAnalysisIndicator";
import stepEsg from "./stepEsg.vue"
export default {
components: {
FecrTable,
@ -169,6 +170,7 @@ export default {
stepRiskAppraisal,
stepCompanyInfo,
stepAnalysisIndicator,
stepEsg
},
data() {
return {

9
src/view/company/stepCreditAppraisal.vue
View File

@ -33,7 +33,8 @@
: '#F56C6C'
"
:show-text="false"
></el-progress> </el-col
></el-progress>
</el-col
><el-col :span="3"
><span
:style="{
@ -104,10 +105,12 @@
>
<el-col :span="18">
<el-progress
:percentage="Math.abs(item)"
:percentage="Math.abs(item) > 100 ? 100 : Math.abs(item)"
:color="item > 0 ? '#1989fa' : '#F56C6C'"
:show-text="false"
></el-progress> </el-col
:format="format(item)"
></el-progress>
</el-col
><el-col :span="2"
><span
:style="{

292
src/view/company/stepEsg.vue Normal file
View File

@ -0,0 +1,292 @@
<template>
<div style="width: 99.8%">
<el-card>
<el-row type="flex" justify="space-between">
<el-col :span="11">
<p class="pri-title">ESG评级：BB</p>
<span>行业评级分布（制造业）</span>
<div class="kpi">
<div
class="kpi-item"
v-for="(item, index) in kpi"
:key="index"
:style="{
background: item.color,
width: item.width,
border: index === 4 ? '4px dashed #00D8FF' : none,
}"
>
{{ item.level }}
</div>
</div>
<!-- <div class="kpi">
<div class="kpi-level">落后</div>
<div class="kpi-level">平均</div>
<div class="kpi-level">领先</div>
</div> -->
</el-col>
<el-col :span="11">
<p class="pri-title">ESG综合得分：16.04</p>
<span>行业得分（制造业）</span>
<div class="esg-progress">
<div class="esg-progress-line">
<div class="esg-progress-line-value"></div>
</div>
</div>
<el-row type="flex" style="margin-top: 20px">
<span>0</span>
<span style="position: absolute; left: 48%">16.04</span>
<span style="position: absolute; right: 0">20</span>
</el-row>
</el-col>
</el-row>
</el-card>
<el-card>
<el-row type="flex" justify="space-between">
<el-col :span="11">
<p>维度得分情况</p>
<fecr-table
:data="score().data"
:columns="score().columns"
></fecr-table>
</el-col>
<el-col :span="11">
<p>实质性议题得分情况</p>
<el-row type="flex" justify="space-between">
<el-col v-for="(item, index) in issueScore" :key="index">
<fecr-ring
:data="item"
:id="'ring' + index"
v-if="name === 'seventh'"
/>
</el-col>
</el-row>
</el-col>
</el-row>
</el-card>
<el-card>
<p>议题表现</p>
<el-divider></el-divider>
<fecr-table :data="issue().data" :columns="issue().columns"></fecr-table>
</el-card>
</div>
</template>
<script>
import FecrRing from "@/components/FecrRing";
import FecrTable from "@/components/FecrTable";
export default {
components: { FecrTable, FecrRing },
props: {
name: [String],
},
data() {
return {
kpi: [
{ level: "CCC", color: "rgb(240,203,0,1)", width: "16%" },
{ level: "B", color: "rgb(125,155,221,0.5)", width: "16%" },
{ level: "BB", color: "rgb(125,155,221,0.8)", width: "10.4%" },
{ level: "BBB", color: "rgb(123,153,221,0.98)", width: "10.4%" },
{ level: "A", color: "rgb(32,216,159,0.5)", width: "10.4%" },
{ level: "AA", color: "rgb(32,216,159,0.7)", width: "16%" },
{ level: "AAA", color: "#20D89F", width: "16%" },
],
issueScore: [
{
name: "环境",
value: [
{ name: "能源与气候变化", value: 10.0 },
{ name: "废气", value: 9.0 },
{ name: "废水", value: 6.49 },
],
color: [
"rgb(75,226,197,1)",
"rgb(75,226,197,0.5)",
"rgb(75,226,197,0.2)",
],
radius: [
["50%", "55%"],
["40%", "45%"],
["30%", "35%"],
],
},
{
name: "社会",
value: [
{ name: "能源与气候变化", value: 10.0 },
{ name: "废气", value: 9.0 },
{ name: "废水", value: 6.49 },
],
color: [
"rgb(125,155,221,1)",
"rgb(125,155,221,0.5)",
"rgb(125,155,221,0.2)",
],
radius: [
["50%", "55%"],
["40%", "45%"],
["30%", "35%"],
],
},
{
name: "治理",
value: [
{ name: "能源与气候变化", value: 10.0 },
{ name: "废气", value: 9.0 },
{ name: "废水", value: 6.49 },
],
color: [
"rgb(0,216,255,1)",
"rgb(0,216,255,0.5)",
"rgb(0,216,255,0.2)",
],
radius: [
["50%", "55%"],
["40%", "45%"],
["30%", "35%"],
],
},
],
};
},
methods: {
score() {
return {
data: [
{
维度: "环境",
权重: "25.00%",
公司得分: 8.87,
得分变化: "-0.14",
"行业均分(制造业)": 6.54,
},
{
维度: "社会",
权重: "37.00%",
公司得分: 9.71,
得分变化: "-0.04",
"行业均分(制造业)": 6.69,
},
{
维度: "治理",
权重: "45.00%",
公司得分: 8.55,
得分变化: "0.19",
"行业均分(制造业)": 8.18,
},
],
columns: [
{ prop: "维度", label: "维度" },
{ prop: "权重", label: "权重" },
{ prop: "公司得分", label: "公司得分" },
{ prop: "得分变化", label: "得分变化" },
{ prop: "行业均分(制造业)", label: "行业均分(制造业)" },
],
};
},
issue() {
return {
data: [
{
"实质性议题：对公司ESG表现影响最大且纳入评估的议题": "环境",
权重: "25.00%",
得分: 8.87,
行业均分: 6.54,
得分变化: "-0.14",
更新日期: "2021年12月31日",
},
{
"实质性议题：对公司ESG表现影响最大且纳入评估的议题": "社会",
权重: "37.00%",
得分: 9.71,
行业均分: 6.69,
得分变化: "-0.04",
更新日期: "2021年12月31日",
},
{
"实质性议题：对公司ESG表现影响最大且纳入评估的议题": "治理",
权重: "45.00%",
得分: 8.55,
行业均分: 8.18,
得分变化: "0.19",
更新日期: "2021年12月31日",
},
],
columns: [
{
prop: "实质性议题：对公司ESG表现影响最大且纳入评估的议题",
label: "实质性议题：对公司ESG表现影响最大且纳入评估的议题",
},
{ prop: "权重", label: "权重" },
{ prop: "得分", label: "得分" },
{ prop: "行业均分", label: "行业均分" },
{ prop: "得分变化", label: "得分变化" },
{ prop: "更新日期", label: "更新日期" },
],
};
},
},
};
</script>
<style lang='scss' scoped>
.el-card {
margin-bottom: 40px;
}
.kpi {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 20px;
&-item {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
box-sizing: border-box;
}
&-level {
width: 32.4%;
height: 50px;
text-align: center;
line-height: 50px;
border: 1px dashed #707070;
margin-top: 20px;
}
&-line {
width: 1px;
height: 30px;
background-color: #707070;
}
}
.esg-progress {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 20px;
&-line {
width: 100%;
height: 30px;
background-color: #efefef;
border-radius: 20px;
&-value {
width: 50%;
height: 30px;
background-image: linear-gradient(to right, #7dd9dd, #15c380);
border-radius: 20px;
}
}
}
</style>

33
src/view/company/stepIndustryAnalysis.vue
View File

@ -4,38 +4,41 @@
<el-col :span="12">
<el-card class="left">
<span>增长趋势</span>
<fecr-line :data.sync="data['增长趋势']" v-if="name === 'second'"/>
<fecr-line :data.sync="data['增长趋势']" v-if="name === 'second'" />
</el-card>
</el-col>
<el-col :span="12" class="colChart">
<el-card class="right">
<span>板块分布</span>
<fecr-pie :data.sync="data['规模分布']" v-if="name === 'second'"/> </el-card
<fecr-pie
:data.sync="data['规模分布']"
v-if="name === 'second'"
/> </el-card
></el-col>
<el-col :span="24"
><el-card class="left">
<div slot="header" class="clearfix">
<span>{{data["行业"]}}</span>
<span>{{ data["行业"] }}</span>
<el-button type="primary" size="small" style="float: right"
>宏观报告</el-button
>
</div>
<div>
<p>行业简介</p>
<span>{{ data['行业简介'] }}</span>
<span>{{ data["行业简介"] }}</span>
</div>
<div>
<div>
<p>正面因素</p>
<p v-for="(item,index) in data['正面因素']" :key="index">
<span><span class="badge"></span>{{item['标签']}}</span>
<span class="block">{{ item['分析'] }}</span>
<p v-for="(item, index) in data['正面因素']" :key="index">
<span><span class="badge"></span>{{ item["标签"] }}</span>
<span class="block">{{ item["分析"] }}</span>
</p>
</div>
<div>
<div>
<p>负面因素</p>
<p v-for="(item,index) in data['负面因素']" :key="index">
<span><span class="badge"></span>{{item['标签']}}</span>
<span class="block">{{ item['分析'] }}</span>
<p v-for="(item, index) in data['负面因素']" :key="index">
<span><span class="badge"></span>{{ item["标签"] }}</span>
<span class="block">{{ item["分析"] }}</span>
</p>
</div>
</el-card></el-col
@ -59,13 +62,13 @@ export default {
},
mounted() {
this.init()
this.init();
},
methods: {
init() {
init() {
get("/company/industry_analysis").then((res) => {
this.data = res.result
this.data = res.result;
});
},
},