This commit is contained in:
timorls 2022-02-25 14:49:40 +08:00
parent 3bdbb7fc42
commit 0940059b2d
4 changed files with 341 additions and 301 deletions

View File

@ -6,16 +6,14 @@
export default {
props: {
data: [Object, Array],
sty: [Object, Array],
id: {
type: String,
default: "pie",
},
},
data() {
return {};
},
mounted() {
this.init();
mounted(){
this.init()
},
methods: {
init() {
@ -36,10 +34,10 @@ export default {
top: "center",
textAlign: "center",
textStyle: {
color: this.data.color[0],
color: this.sty.color[0],
},
},
color: this.data.color,
color: this.sty.color,
legend: {
x: "center",
y: "bottom",
@ -51,7 +49,7 @@ export default {
return {
name: item.name,
type: "pie",
radius: this.data.radius[i],
radius: this.sty.radius[i],
label: {
show: false,
position: "center",
@ -89,9 +87,11 @@ export default {
data: {
handler(val) {
this.data = val;
this.init();
if (this.data) {
this.init();
}
},
immediate: true,
// immediate: true,
deep: true,
},
},

View File

@ -22,7 +22,7 @@
v-else
v-model.number="scope.row[index]"
placeholder="请编辑"
type="number"
:type="scope.row[0] === '公司是否有审计报告'?'text':'number'"
@input="backData"
></el-input>
</div>

View File

@ -10,56 +10,43 @@
<el-card>
<p style="text-align: center; font-size: 24px">ESG填报问卷</p>
<p>基础信息</p>
<el-form
:model="data['基础信息']"
label-position="top"
style="padding: 0"
>
<el-form :model="data" label-position="top" style="padding: 0">
<el-form-item label="企业名称">
<el-input v-model="data['基础信息']['企业名称']"></el-input>
<el-input v-model="data['企业名称']"></el-input>
</el-form-item>
<el-form-item label="所属行业">
<el-cascader
v-model="data['基础信息']['所属行业']"
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-row type="flex" justify="space-between">
<el-form-item
v-for="(item, index) in data['公司收入']"
:key="index"
:label="index"
>
<el-input v-model.number="data['公司收入'][index]" type="number"></el-input>
</el-form-item>
</el-row>
</el-form>
<p>环境信息</p>
<p>环境问卷</p>
<fecr-tran-table
@backData="backData"
:data="data['环境信息']"
:columns="getColumns(data['环境信息'])"
@backData="backDataEnvironment"
: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>
<div v-for="(item, index) in data['治理信息']['问卷二']" :key="index">
<p>{{ index }}</p>
<div v-if="item.question">
<div
v-for="(item, index) in question['环境问卷']"
:key="'环境' + index"
>
<p>{{ item.question }}</p>
<div v-if="item.options">
<el-radio
v-for="(child, i) in item.question"
v-for="(child, i) in item.options"
:key="i"
v-model="item.answer"
:label="child"
@ -67,212 +54,267 @@
</div>
<el-input v-else v-model="item.answer"></el-input>
</div>
<p>社会问卷</p>
<fecr-tran-table
@backData="backDataSocial"
:data="data['社会问卷']['近三年公司数据']"
:columns="getColumns(data['社会问卷']['近三年公司数据'])"
></fecr-tran-table>
<div
v-for="(item, index) in question['社会问卷']"
:key="'社会' + index"
>
<p>{{ item.question }}</p>
<div v-if="item.options">
<el-radio
v-for="(child, i) in item.options"
:key="i"
v-model="item.answer"
:label="child"
></el-radio>
</div>
<el-input v-else v-model="item.answer"></el-input>
</div>
<p>治理问卷</p>
<fecr-tran-table
@backData="backDataGovernance"
:data="data['治理问卷']['近三年公司数据']"
:columns="getColumns(data['治理问卷']['近三年公司数据'])"
></fecr-tran-table>
<div
v-for="(item, index) in question['治理问卷']"
:key="'治理' + index"
>
<p>{{ item.question }}</p>
<div v-if="item.options">
<el-radio
v-for="(child, i) in item.options"
:key="i"
v-model="item.answer"
:label="child"
></el-radio>
</div>
<el-input v-else v-model.number="item.answer" type="number"></el-input>
</div>
</el-card>
</el-main>
<el-footer>
<el-button type="primary" @click="submit" :disabled="submitStatus">
</el-button>
<el-popover placement="top" width="200" v-model="visible">
<p>是否提交数据并开始评价</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible = false"
>取消</el-button
>
<el-button type="primary" size="mini" @click="submit">确定</el-button>
</div>
<el-button
slot="reference"
type="primary"
@click="save"
:disabled="!submitStatus"
>
</el-button>
</el-popover>
</el-footer>
</el-container>
</template>
<script>
import { get } from "@/api/api";
import { get, JsonPost } from "@/api/api";
import FecrTranTable from "@/components/FecrTranTable";
export default {
components: { FecrTranTable },
data() {
return {
visible: false,
submitStatus: false,
industry: [],
data: {
基础信息: {
企业名称: "",
所属行业: [],
企业当年收入: [
{ 报告期: "2021-12-31", "公司当年收入(万元)": "" },
{ 报告期: "2020-12-31", "公司当年收入(万元)": "" },
{ 报告期: "2019-12-31", "公司当年收入(万元)": "" },
],
企业名称: "",
评价年度: "",
所属行业: null,
公司收入: {},
环境问卷: {
近三年公司数据: [],
其他类型问卷: [],
},
环境信息: [
社会问卷: {
近三年公司数据: [],
其他类型问卷: [],
},
治理问卷: {
近三年公司数据: [],
其他类型问卷: [],
},
},
question: {
环境问卷: [
{
报告期: "2021-12-31",
公司当年消耗的原煤: "",
公司当年消耗的焦炭: "",
公司当年消耗的原油: "",
公司当年消耗的燃料油: "",
公司当年消耗的汽油: "",
公司当年消耗的煤油: "",
公司当年消耗的柴油: "",
公司当年消耗的液化石油气: "",
公司当年消耗的天然气: "",
公司当年消耗的煤气: "",
公司当年消耗的电: "",
公司当年消耗的水: "",
"公司当年绿色业务收入(包括不限于清洁能源,清洁交通,绿色建筑,清洁技术等)":
"",
question:
"1.公司是否有温室气体减排目标比如以2021年为基准未来5年减少10%",
options: ["A.是", "B.否"],
answer: "",
},
{
报告期: "2020-12-31",
公司当年消耗的原煤: "",
公司当年消耗的焦炭: "",
公司当年消耗的原油: "",
公司当年消耗的燃料油: "",
公司当年消耗的汽油: "",
公司当年消耗的煤油: "",
公司当年消耗的柴油: "",
公司当年消耗的液化石油气: "",
公司当年消耗的天然气: "",
公司当年消耗的煤气: "",
公司当年消耗的电: "",
公司当年消耗的水: "",
"公司当年绿色业务收入(包括不限于清洁能源,清洁交通,绿色建筑,清洁技术等)":
"",
question:
"2.公司是否有节能目标比如以2021年为基准未来5年减少10%",
options: ["A.是", "B.否"],
answer: "",
},
{
报告期: "2019-12-31",
公司当年消耗的原煤: "",
公司当年消耗的焦炭: "",
公司当年消耗的原油: "",
公司当年消耗的燃料油: "",
公司当年消耗的汽油: "",
公司当年消耗的煤油: "",
公司当年消耗的柴油: "",
公司当年消耗的液化石油气: "",
公司当年消耗的天然气: "",
公司当年消耗的煤气: "",
公司当年消耗的电: "",
公司当年消耗的水: "",
"公司当年绿色业务收入(包括不限于清洁能源,清洁交通,绿色建筑,清洁技术等)":
"",
question:
"3.公司是否有节约用水目标比如以2021年为基准未来5年减少10%",
options: ["A.是", "B.否"],
answer: "",
},
{
question:
"4.公司是否有绿色业务——包括不限于清洁能源、清洁交通、绿色建筑、清洁技术等",
options: ["A.是", "B.否"],
answer: "",
},
{
question: "5.公司近三年是否被环境或水务等监管部门处罚",
options: ["A.是", "B.否"],
answer: "",
},
{
question: "6.国家双碳目标对公司业务是否有不利影响",
options: ["A.是", "B.否"],
answer: "",
},
{
question: "7.国家双碳目标对公司业务是否有有利影响",
options: ["A.是", "B.否"],
answer: "",
},
{
question:
"8.公司是否使用风电、光电等清洁能源,是否使用清洁交通工具",
options: ["A.是", "B.否"],
answer: "",
},
],
社会信息: [
社会问卷: [
{
报告期: "2021-12-31",
"员工总数(年底)": "",
当年离职人数: "",
"人均薪酬水平(元/月)": "",
"劳动合同要求的工作时长(每周小时数)": "",
劳资纠纷次数: "",
安全事故发生次数: "",
组织培训次数: "",
"公司从前3大供应商拿货占全部供应商比例%": "",
"公司前3大客户销售额占全部销售比例%": "",
"返修、退回、投诉产品对应销售额占全部销售比例(%": "",
"扶贫+捐赠规模(万元)": "",
question: "1.社保缴纳是否符合当地标准",
options: ["A.是", "B.否"],
answer: "",
},
{
报告期: "2020-12-31",
"员工总数(年底)": "",
当年离职人数: "",
"人均薪酬水平(元/月)": "",
"劳动合同要求的工作时长(每周小时数)": "",
劳资纠纷次数: "",
安全事故发生次数: "",
组织培训次数: "",
"公司从前3大供应商拿货占全部供应商比例%": "",
"公司前3大客户销售额占全部销售比例%": "",
"返修、退回、投诉产品对应销售额占全部销售比例(%": "",
"扶贫+捐赠规模(万元)": "",
question: "2.公积金缴纳是否符合当地标准",
options: ["A.是", "B.否"],
answer: "",
},
{
报告期: "2019-12-31",
"员工总数(年底)": "",
当年离职人数: "",
"人均薪酬水平(元/月)": "",
"劳动合同要求的工作时长(每周小时数)": "",
劳资纠纷次数: "",
安全事故发生次数: "",
组织培训次数: "",
"公司从前3大供应商拿货占全部供应商比例%": "",
"公司前3大客户销售额占全部销售比例%": "",
"返修、退回、投诉产品对应销售额占全部销售比例(%": "",
"扶贫+捐赠规模(万元)": "",
question: "3.是否提供员工体检",
options: ["A.是", "B.否"],
answer: "",
},
{
question: "4.是否提供带薪假期",
options: ["A.是", "B.否"],
answer: "",
},
],
治理信息: {
问卷一: [
{
报告期: "2021-12-31",
公司是否有审计报告: "",
"公司净资产(万元)": "",
"公司净利润(万元)": "",
},
{
报告期: "2020-12-31",
公司是否有审计报告: "",
"公司净资产(万元)": "",
"公司净利润(万元)": "",
},
{
报告期: "2019-12-31",
公司是否有审计报告: "",
"公司净资产(万元)": "",
"公司净利润(万元)": "",
},
],
问卷二: {
"1.公司性质": {
question: ["A.股份有限公司", "B.有限责任公司", "C.其他"],
answer: "",
},
"2.截至目前,董监高平均拥有的行业经验年数(高管包括总经理、财务总监、董秘以及公司章程规定的其他人)":
{
question: [
"A.大于等于8年",
"B.大于等于5年小于8年",
"C.小于5年",
],
answer: "",
},
"3.目前董监高人数": { answer: "" },
"4.2019年至2021年公司董监高合计离职人数": { answer: "" },
"5.公司董事会近三年年均开会次数": {
question: [
"A.大于等于4次",
"B.大于等于2次小于4次",
"C.小于2次",
],
answer: "",
},
"6.公司是否设有董事会": {
question: ["A.是", "B.否"],
answer: "",
},
"7.公司是否设有监事会": {
question: ["A.是", "B.否"],
answer: "",
},
"8.公司近三年信息披露是否及时、可靠、完备、审计质量较好": {
question: ["A.是", "B.否"],
answer: "",
},
治理问卷: [
{
question: "1.公司性质",
options: ["A.股份有限公司", "B.有限责任公司", "C.其他"],
answer: "",
},
},
{
question:
"2.截至目前,董监高平均拥有的行业经验年数(高管包括总经理、财务总监、董秘以及公司章程规定的其他人)",
options: ["A.大于等于8年", "B.大于等于5年小于8年", "C.小于5年"],
answer: "",
},
{
question: "3.目前董监高人数",
answer: "",
},
{
question: "4.2019年至2021年公司董监高合计离职人数",
answer: "",
},
{
question: "5.公司董事会近三年年均开会次数",
options: ["A.大于等于4次", "B.大于等于2次小于4次", "C.小于2次"],
answer: "",
},
{
question: "6.公司是否设有董事会",
options: ["A.是", "B.否"],
answer: "",
},
{
question: "7.公司是否设有监事会",
options: ["A.是", "B.否"],
answer: "",
},
{
question: "8.公司近三年信息披露是否及时、可靠、完备、审计质量较好",
options: ["A.是", "B.否"],
answer: "",
},
],
},
};
},
mounted() {
created() {
this.init();
},
methods: {
init() {
get("/input/choose_industry").then((res) => {
this.industry = res.result;
});
get("/esg/start_esg_rating")
.then((result) => {
this.data = result.result;
const list = ["环境问卷", "社会问卷", "治理问卷"];
list.forEach((key) => {
result.result[key]["其他类型问卷"].forEach((item, index) => {
if (this.question[key][index].options) {
for (let i in this.question[key][index].options) {
this.question[key][index].options[i][0] === item
? (this.question[key][index].answer =
this.question[key][index].options[i])
: null;
}
} else {
this.question[key][index].answer = item;
}
});
});
})
.then(() => {
get("/input/choose_industry").then((res) => {
this.industry = res.result;
});
});
},
back() {
this.$router.push("/appraisal");
},
backData(val) {
console.log(val);
backDataIncome(val) {
this.data["公司收入"] = val;
},
backDataEnvironment(val) {
this.data["环境问卷"]["近三年公司数据"] = val;
},
backDataSocial(val) {
this.data["社会问卷"]["近三年公司数据"] = val;
},
backDataGovernance(val) {
this.data["治理问卷"]["近三年公司数据"] = val;
},
getColumns(value) {
@ -281,8 +323,60 @@ export default {
});
},
save() {
JsonPost("/esg/save_esg_input_form", {
input_form: this.data,
}).then((res) => {
this.$message.success(res.info);
});
},
submit() {
console.log(this.data);
get("/esg/submit_esg_rating_input", {}).then((res) => {
this.message.success(res.info);
this.visible = false;
});
},
},
watch: {
question: {
handler(val) {
const list = ["环境问卷", "社会问卷", "治理问卷"];
list.forEach((key) => {
this.data[key]["其他类型问卷"] = val[key].map((item) => {
return item.options && item.answer ? item.answer[0] : item.answer;
});
});
},
deep: true,
},
data: {
handler(val) {
const state = [];
this.submitStatus = !val["所属行业"] ? true : false;
Object.keys(val["公司收入"]).forEach((key) => {
state.push(!val["公司收入"][key]&& val["公司收入"][key] !== "" ? true : false);
});
const array = ["环境问卷", "社会问卷", "治理问卷"];
array.forEach((key) => {
val[key]["近三年公司数据"].forEach((item) => {
Object.keys(item).forEach((keys) => {
state.push(!item[keys] && item[keys] !== "" ? true : false);
});
});
val[key]["其他类型问卷"].forEach((item) => {
state.push(!item ? true : false);
});
});
this.submitStatus = state.every((item) => {
return !item;
});
},
// immediate: true,
deep: true,
},
},
};
@ -330,10 +424,6 @@ export default {
margin-bottom: 20px;
}
.el-input {
width: auto;
}
p::before {
content: "";
display: block;

View File

@ -3,8 +3,8 @@
<el-card>
<el-row type="flex" justify="space-between">
<el-col :span="11">
<p class="pri-title">ESG评级BB</p>
<span>行业评级分布制造业</span>
<p class="pri-title">ESG评级{{data['ESG评级']['ESG评级']}}</p>
<span>行业评级分布{{data['ESG评级']['行业']}}</span>
<div class="kpi">
<div
class="kpi-item"
@ -13,7 +13,7 @@
:style="{
background: item.color,
width: item.width,
border: index === 4 ? '4px dashed #00D8FF' : none,
border: data['ESG评级']['ESG评级'] === item.level ? '4px dashed #00D8FF' : none,
}"
>
{{ item.level }}
@ -26,17 +26,17 @@
</div> -->
</el-col>
<el-col :span="11">
<p class="pri-title">ESG综合得分16.04</p>
<span>行业得分制造业</span>
<p class="pri-title">ESG综合得分{{data['ESG评级']['ESG综合得分']}}</p>
<span>行业得分{{data['ESG评级']['行业']}}</span>
<div class="esg-progress">
<div class="esg-progress-line">
<div class="esg-progress-line-value"></div>
<div class="esg-progress-line-value" :style="{width:data['ESG评级']['ESG综合得分']+'%'}"></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>
<span :style="{position: 'absolute', left: data['ESG评级']['ESG综合得分']+'%'}">{{data['ESG评级']['ESG综合得分']}}</span>
<span style="position: absolute; right: 0">100</span>
</el-row>
</el-col>
</el-row>
@ -47,7 +47,7 @@
<el-col :span="11">
<p>维度得分情况</p>
<fecr-table
:data="score().data"
:data="data['维度得分情况']"
:columns="score().columns"
></fecr-table>
</el-col>
@ -56,7 +56,8 @@
<el-row type="flex" justify="space-between">
<el-col v-for="(item, index) in issueScore" :key="index">
<fecr-ring
:data="item"
:data="data['实质性议题得分情况'][item.name]"
:sty="item"
:id="'ring' + index"
v-if="name === 'seventh'"
/>
@ -69,12 +70,13 @@
<el-card>
<p>议题表现</p>
<el-divider></el-divider>
<fecr-table :data="issue().data" :columns="issue().columns"></fecr-table>
<fecr-table :data="data['实质性议题']" :columns="issue().columns"></fecr-table>
</el-card>
</div>
</template>
<script>
import { get } from "@/api/api";
import FecrRing from "@/components/FecrRing";
import FecrTable from "@/components/FecrTable";
export default {
@ -85,23 +87,20 @@ export default {
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%" },
{ level: "D", color: "#909399", width: "12%" },
{ level: "CCC", color: "rgb(240,203,0,1)", width: "12%" },
{ level: "B", color: "rgb(125,155,221,0.5)", width: "12%" },
{ level: "BB", color: "rgb(125,155,221,0.8)", width: "12%" },
{ level: "BBB", color: "rgb(123,153,221,0.98)", width: "12%" },
{ level: "A", color: "rgb(32,216,159,0.5)", width: "12%" },
{ level: "AA", color: "rgb(32,216,159,0.7)", width: "12%" },
{ level: "AAA", color: "#20D89F", width: "12%" },
],
data:{},
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)",
@ -112,14 +111,9 @@ export default {
["40%", "45%"],
["30%", "35%"],
],
name:'环境'
},
{
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)",
@ -130,14 +124,9 @@ export default {
["40%", "45%"],
["30%", "35%"],
],
name:'社会'
},
{
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)",
@ -148,84 +137,45 @@ export default {
["40%", "45%"],
["30%", "35%"],
],
name:'治理'
},
],
};
},
created(){
this.init()
},
methods: {
init(){
get("/company/esg_analysis").then(res=>{
this.data = res.result[0]
})
},
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: "行业均分(制造业)" },
{ 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: "得分变化" },
{ prop: "更新日期", label: "更新日期" },
],
};
@ -282,7 +232,7 @@ export default {
border-radius: 20px;
&-value {
width: 50%;
// width: 50%;
height: 30px;
background-image: linear-gradient(to right, #7dd9dd, #15c380);
border-radius: 20px;