9 changed files with 1126 additions and 135 deletions
@ -0,0 +1,131 @@ |
|||
<template> |
|||
<div style="margin-top:10px"> |
|||
<el-table :data="tableData" border class="m-table-item" style="width: 100%" :span-method="objectSpanMethod"> |
|||
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
|||
<el-table-column prop="address" align="center" label="地点" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="categoryName" align="center" label="类型" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="amount" align="center" label="投诉次数" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="content" align="center" label="投诉内容" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column label="操作" align="center" width="100"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="handelSearchAreaSameEvent(scope.row)" type="text" size="small">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<div> |
|||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo" |
|||
:page-sizes="[10, 20, 50]" :page-size="pageSize" layout="sizes, prev, pager, next, total" |
|||
:total="total"></el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { requestPost, requestGet } from "@/js/dai/request"; |
|||
import { completeList } from "@/js/columns/constants"; |
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
formData: { |
|||
startTime: "", |
|||
endTime: "", |
|||
type: "3" |
|||
}, |
|||
pageNo: 0, |
|||
pageSize: 20, |
|||
total: 0, |
|||
tableData: [], |
|||
mergeObj: {}, |
|||
mergeArr: ['address'], |
|||
}; |
|||
}, |
|||
//创建前 |
|||
created() { }, |
|||
async mounted() { |
|||
await this.getTableData() |
|||
}, |
|||
//方法 |
|||
methods: { |
|||
|
|||
handleSizeChange(val) { |
|||
console.log(`每页 ${val} 条`); |
|||
this.pageSize = val; |
|||
this.getTableData(); |
|||
}, |
|||
handelSearchAreaSameEvent(row) { |
|||
this.$emit('clickAddressMobileData', row); |
|||
}, |
|||
|
|||
handleCurrentChange(val) { |
|||
console.log(`当前页: ${val}`); |
|||
this.pageNo = val; |
|||
this.getTableData(); |
|||
}, |
|||
async getTableData() { |
|||
try { |
|||
const url = "/governance/dwdEvent/eventList"; |
|||
const { pageSize, pageNo, formData } = this; |
|||
const { data, code, msg } = await requestPost(url, { |
|||
pageSize, |
|||
pageNo, |
|||
...formData, |
|||
}); |
|||
if (code == 0) { |
|||
this.tableData = data.list; |
|||
this.total = data.total; |
|||
|
|||
this.getSpanArr(this.tableData); |
|||
} else { |
|||
console.log(err); |
|||
} |
|||
} catch (err) { |
|||
console.log(err); |
|||
} |
|||
}, |
|||
|
|||
getSpanArr(data) { |
|||
this.mergeArr.forEach((key, index1) => { |
|||
let count = 0; // 用来记录需要合并行的起始位置 |
|||
this.mergeObj[key] = []; // 记录每一列的合并信息 |
|||
data.forEach((item, index) => { |
|||
// index == 0表示数据为第一行，直接 push 一个 1 |
|||
if(index === 0) { |
|||
this.mergeObj[key].push(1); |
|||
} else { |
|||
// 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位 |
|||
if(item[key] === data[index - 1][key]) { |
|||
this.mergeObj[key][count] += 1; |
|||
this.mergeObj[key].push(0); |
|||
} else { |
|||
// 如果当前行和上一行其值不相等 |
|||
count = index; // 记录当前位置 |
|||
this.mergeObj[key].push(1); // 重新push 一个 1 |
|||
} |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
// 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 } |
|||
objectSpanMethod({ row, column, rowIndex, columnIndex }) { |
|||
// 判断列的属性 |
|||
if(this.mergeArr.indexOf(column.property) !== -1) { |
|||
// 判断其值是不是为0 |
|||
if(this.mergeObj[column.property][rowIndex]) { |
|||
return [this.mergeObj[column.property][rowIndex], 1] |
|||
} else { |
|||
// 如果为0则为需要合并的行 |
|||
return [0, 0]; |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
//子组件注册 |
|||
components: {}, |
|||
//计算 |
|||
computed: {}, |
|||
//监听 |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
<style lang="scss"></style> |
|||
@ -0,0 +1,91 @@ |
|||
<template> |
|||
<div style="margin-top:10px"> |
|||
<el-table :data="tableData" border class="m-table-item" style="width: 100%"> |
|||
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
|||
<el-table-column prop="address" align="center" label="地点" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="categoryName" align="center" label="类型" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="amount" align="center" label="投诉次数" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="content" align="center" label="投诉内容" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column label="操作" align="center" width="100"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="handelSearchAreaSameEvent(scope.row)" type="text" size="small">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<div> |
|||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo" |
|||
:page-sizes="[10, 20, 50]" :page-size="pageSize" layout="sizes, prev, pager, next, total" |
|||
:total="total"></el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { requestPost, requestGet } from "@/js/dai/request"; |
|||
import { completeList } from "@/js/columns/constants"; |
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
formData: { |
|||
startTime: "", |
|||
endTime: "", |
|||
type: "1" |
|||
}, |
|||
pageNo: 0, |
|||
pageSize: 20, |
|||
total: 0, |
|||
tableData: [], |
|||
}; |
|||
}, |
|||
//创建前 |
|||
created() { }, |
|||
async mounted() { |
|||
await this.getTableData() |
|||
}, |
|||
//方法 |
|||
methods: { |
|||
|
|||
handleSizeChange(val) { |
|||
console.log(`每页 ${val} 条`); |
|||
this.pageSize = val; |
|||
this.getTableData(); |
|||
}, |
|||
handelSearchAreaSameEvent(row) { |
|||
this.$emit('clickAddressData', row); |
|||
}, |
|||
|
|||
handleCurrentChange(val) { |
|||
console.log(`当前页: ${val}`); |
|||
this.pageNo = val; |
|||
this.getTableData(); |
|||
}, |
|||
async getTableData() { |
|||
try { |
|||
const url = "/governance/dwdEvent/eventList"; |
|||
const { pageSize, pageNo, formData } = this; |
|||
const { data, code, msg } = await requestPost(url, { |
|||
pageSize, |
|||
pageNo, |
|||
...formData, |
|||
}); |
|||
if (code == 0) { |
|||
this.tableData = data.list; |
|||
this.total = data.total; |
|||
} else { |
|||
console.log(err); |
|||
} |
|||
} catch (err) { |
|||
console.log(err); |
|||
} |
|||
}, |
|||
}, |
|||
//子组件注册 |
|||
components: {}, |
|||
//计算 |
|||
computed: {}, |
|||
//监听 |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
<style lang="scss"></style> |
|||
@ -0,0 +1,90 @@ |
|||
<template> |
|||
<div style="margin-top:10px"> |
|||
<el-table :data="tableData" border class="m-table-item" style="width: 100%"> |
|||
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
|||
<el-table-column prop="mobile" align="center" label="联系方式" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="amount" align="center" label="投诉次数" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="content" align="center" label="投诉内容" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column label="操作" align="center" width="100"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="handelSearchAreaSameEvent(scope.row)" type="text" size="small">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<div> |
|||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo" |
|||
:page-sizes="[10, 20, 50]" :page-size="pageSize" layout="sizes, prev, pager, next, total" |
|||
:total="total"></el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { requestPost, requestGet } from "@/js/dai/request"; |
|||
import { completeList } from "@/js/columns/constants"; |
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
formData: { |
|||
startTime: "", |
|||
endTime: "", |
|||
type: "2" |
|||
}, |
|||
pageNo: 0, |
|||
pageSize: 20, |
|||
total: 0, |
|||
tableData: [], |
|||
}; |
|||
}, |
|||
//创建前 |
|||
created() { }, |
|||
async mounted() { |
|||
await this.getTableData() |
|||
}, |
|||
//方法 |
|||
methods: { |
|||
|
|||
handleSizeChange(val) { |
|||
console.log(`每页 ${val} 条`); |
|||
this.pageSize = val; |
|||
this.getTableData(); |
|||
}, |
|||
handelSearchAreaSameEvent(row) { |
|||
this.$emit('clickMobileData', row); |
|||
}, |
|||
|
|||
handleCurrentChange(val) { |
|||
console.log(`当前页: ${val}`); |
|||
this.pageNo = val; |
|||
this.getTableData(); |
|||
}, |
|||
async getTableData() { |
|||
try { |
|||
const url = "/governance/dwdEvent/eventList"; |
|||
const { pageSize, pageNo, formData } = this; |
|||
const { data, code, msg } = await requestPost(url, { |
|||
pageSize, |
|||
pageNo, |
|||
...formData, |
|||
}); |
|||
if (code == 0) { |
|||
this.tableData = data.list; |
|||
this.total = data.total; |
|||
} else { |
|||
console.log(err); |
|||
} |
|||
} catch (err) { |
|||
console.log(err); |
|||
} |
|||
}, |
|||
}, |
|||
//子组件注册 |
|||
components: {}, |
|||
//计算 |
|||
computed: {}, |
|||
//监听 |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
<style lang="scss"></style> |
|||
@ -0,0 +1,417 @@ |
|||
<template> |
|||
<div class=""> |
|||
<el-cascader |
|||
v-model="formData.agencyId" |
|||
:options="orgOptions" |
|||
:props="{ |
|||
value: 'agencyId', |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
}" |
|||
:clearable="true" |
|||
:change-on-select="true" |
|||
:filterable="false" |
|||
:multiple="false" |
|||
placeholder="请选择" |
|||
@change="handleChangeCascader" |
|||
class="cascader" |
|||
/> |
|||
|
|||
<el-date-picker |
|||
v-model="formData.period" |
|||
type="month" |
|||
value-format="yyyy-MM" |
|||
class="cascader" |
|||
placeholder="选择日期" |
|||
style="width: 202px" |
|||
clearable |
|||
@change="handleChangePicker" |
|||
> |
|||
</el-date-picker> |
|||
<div style="padding-left: 10px; margin-top: 10px"> |
|||
本月已参与调研人数 {{ personQty }}人 |
|||
</div> |
|||
<section class="content_box"> |
|||
<div class="left"> |
|||
<img src="../../../../assets/img/satisfaction/zhdf.png" alt="Image" /> |
|||
<div class="left_right"> |
|||
<div> |
|||
{{ synthesisScore < 0 ? Math.abs(synthesisScore) : synthesisScore }} |
|||
</div> |
|||
<div>综合得分</div> |
|||
</div> |
|||
<div class="right_box"> |
|||
<div :class="synthesisState ? 'up' : 'down'"> |
|||
<img |
|||
src="@/assets/images/index/up.png" |
|||
alt="" |
|||
v-if="synthesisState && synthesisScoreBtLastMonth != 0" |
|||
/> |
|||
<img |
|||
src="@/assets/images/index/down.png" |
|||
alt="" |
|||
v-if=" |
|||
!synthesisState && |
|||
synthesisScoreBtLastMonth != 0 && |
|||
synthesisScoreBtLastMonth != null |
|||
" |
|||
/> |
|||
<span>{{ |
|||
synthesisScoreBtLastMonth < 0 |
|||
? Math.abs(synthesisScoreBtLastMonth) |
|||
: synthesisScoreBtLastMonth |
|||
}}</span> |
|||
</div> |
|||
<div style="color: #999">较上月</div> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="box" v-for="(item, index) in score" :key="index"> |
|||
<div class="card"> |
|||
<img :src="item.imgUrl" alt="Image" /> |
|||
<div class="right_right"> |
|||
<div>{{ item.score }}</div> |
|||
<div>{{ item.satisfactionCategoryName }}</div> |
|||
</div> |
|||
<div class="right_box"> |
|||
<div> |
|||
<img |
|||
src="@/assets/images/index/up.png" |
|||
alt="" |
|||
v-if="item.state && item.scoreDiffBtLastMonth != 0" |
|||
/> |
|||
<img |
|||
src="@/assets/images/index/down.png" |
|||
alt="" |
|||
v-if="!item.state && item.scoreDiffBtLastMonth != 0" |
|||
/> |
|||
<span :class="item.state ? 'up' : 'down'"> |
|||
{{ |
|||
item.scoreDiffBtLastMonth < 0 |
|||
? Math.abs(item.scoreDiffBtLastMonth) |
|||
: item.scoreDiffBtLastMonth |
|||
}} |
|||
</span> |
|||
</div> |
|||
<div style="color: #999">较上月</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
<section class="bto-box"> |
|||
<div id="myCharts"></div> |
|||
</section> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestGet } from "@/js/dai/request"; |
|||
import * as echarts from "echarts"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
personQty: "", //人数 |
|||
myChart: {}, |
|||
option: { |
|||
tooltip: { |
|||
trigger: "axis", |
|||
}, |
|||
legend: { |
|||
data: ["满意", "基本满意", "不满意"], |
|||
bottom: "10%", |
|||
icon: "rect", |
|||
itemWidth: 20, |
|||
itemHeight: 5, |
|||
itemGap: 20, |
|||
}, |
|||
grid: { |
|||
left: "3%", |
|||
right: "4%", |
|||
bottom: "25%", |
|||
containLabel: true, |
|||
}, |
|||
toolbox: {}, |
|||
|
|||
xAxis: { |
|||
type: "category", |
|||
boundaryGap: true, |
|||
axisLine: { |
|||
show: true, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
data: [], // 请将yourDataArray替换为您的x轴数据数组 |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
width: 60, // 设置阴影的宽度 |
|||
color: "#000", |
|||
opacity: 0, |
|||
}, |
|||
// 控制间隔，这里设置为2表示左右两侧有间隔，可以根据需要调整 |
|||
}, |
|||
}, |
|||
|
|||
yAxis: { |
|||
type: "value", |
|||
name: "单位(个)", |
|||
min: 0, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "满意", |
|||
type: "bar", |
|||
data: [], |
|||
barWidth: 16, // 设置柱子宽度 |
|||
itemStyle: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: "#2c7cf2" }, // 从顶部开始 |
|||
{ offset: 1, color: "#80b3ff" }, // 到底部结束 |
|||
]), |
|||
}, |
|||
}, |
|||
{ |
|||
name: "基本满意", |
|||
type: "bar", |
|||
data: [], |
|||
barWidth: 16, // 设置柱子宽度 |
|||
itemStyle: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: "#3ca267" }, // 从顶部开始 |
|||
{ offset: 1, color: "#82cca0" }, // 到底部结束 |
|||
]), |
|||
}, |
|||
}, |
|||
{ |
|||
name: "不满意", |
|||
type: "bar", |
|||
data: [], |
|||
barWidth: 16, // 设置柱子宽度 |
|||
itemStyle: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: "#edb42d" }, // 从顶部开始 |
|||
{ offset: 1, color: "#ffd981" }, // 到底部结束 |
|||
]), |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
satisfactionCategory: [], //类目 |
|||
satisfactionCategoryName: [], |
|||
score: [], //得分 |
|||
|
|||
synthesisScore: "", |
|||
synthesisScoreBtLastMonth: "", |
|||
synthesisState: false, |
|||
|
|||
formData: { |
|||
period: "", |
|||
agencyId: "", |
|||
}, |
|||
orgOptions: [], |
|||
selectedOptions: "", |
|||
}; |
|||
}, |
|||
props: { |
|||
communityId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
period: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
satisfaction_category: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}, |
|||
created() {}, |
|||
async mounted() { |
|||
this.formData.period = this.period; |
|||
this.formData.agencyId = this.communityId; |
|||
this.initEcharts(); |
|||
await this.getCharts(this.communityId); |
|||
await this.getOrgTreeList(); |
|||
}, |
|||
methods: { |
|||
async getCharts() { |
|||
let url = "/governance/satisfaction/communitySelfInsp/stats/synthesis"; |
|||
const { formData } = this; |
|||
const { data, code, msg } = await requestGet(url, { |
|||
...formData, |
|||
}); |
|||
if (code == 0) { |
|||
this.score = []; |
|||
this.option.series.forEach((series) => (series.data = [])); |
|||
this.option.xAxis.data = []; |
|||
this.satisfactionCategory = []; |
|||
this.synthesisScore = data.synthesisScore; |
|||
this.synthesisScoreBtLastMonth = data.synthesisScoreBtLastMonth; |
|||
this.synthesisState = this.synthesisScoreBtLastMonth >= 0; |
|||
if (this.synthesisScoreBtLastMonth < 0) { |
|||
this.synthesisScoreBtLastMonth = Math.abs( |
|||
this.synthesisScoreBtLastMonth |
|||
); |
|||
} |
|||
this.personQty = data.personQty; |
|||
|
|||
const allowedCategories = this.satisfaction_category.map( |
|||
(item) => item.value |
|||
); |
|||
for (const item of data.categoryDatas) { |
|||
if (allowedCategories.includes(item.satisfactionCategory)) { |
|||
this.option.series[0].data.push(item.veryGoodQty); |
|||
this.option.series[1].data.push(item.goodQty); |
|||
this.option.series[2].data.push(item.badQty); |
|||
this.option.xAxis.data.push(item.satisfactionCategoryName); |
|||
this.satisfactionCategory.push(item.satisfactionCategory); |
|||
this.score.push({ |
|||
score: item.score, |
|||
satisfactionCategoryName: item.satisfactionCategoryName, |
|||
imgUrl: require(`@/assets/img/satisfaction/${item.satisfactionCategory}.png`), |
|||
scoreDiffBtLastMonth: item.scoreDiffBtLastMonth, |
|||
state: item.scoreDiffBtLastMonth >= 0, |
|||
}); |
|||
if (item.scoreDiffBtLastMonth < 0) { |
|||
item.scoreDiffBtLastMonth = Math.abs(item.scoreDiffBtLastMonth); |
|||
} |
|||
} |
|||
} |
|||
this.myChart.setOption(this.option); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
initEcharts() { |
|||
this.myChart = echarts.init(document.getElementById("myCharts")); |
|||
this.myChart.setOption(this.option); |
|||
let than = this; |
|||
this.myChart.on("click", function (params) { |
|||
than.handelClickChart(params.name, params.seriesName); |
|||
}); |
|||
}, |
|||
handelClickChart(name, seriesName) { |
|||
this.$emit("handelClickChart", name, seriesName); |
|||
}, |
|||
getOrgTreeList() { |
|||
this.$http |
|||
.post("/gov/org/customeragency/agencygridtree", {}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
let rowData = res.data.subAgencyList.map((item) => ({ |
|||
agencyId: item.agencyId, |
|||
agencyName: item.agencyName, |
|||
subAgencyList: null, |
|||
})); |
|||
res.data.subAgencyList = rowData; |
|||
this.orgOptions = [res.data]; |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
|
|||
handleChangeCascader(val) { |
|||
this.formData.agencyId = val[1]; |
|||
this.getCharts(); |
|||
}, |
|||
handleChangePicker() { |
|||
this.getCharts(); |
|||
}, |
|||
}, |
|||
components: {}, |
|||
computed: {}, |
|||
watch: {}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.cascader { |
|||
margin-left: 10px; |
|||
} |
|||
.content_box { |
|||
display: flex; |
|||
height: 160px; |
|||
margin-top: 10px; |
|||
padding: 0 10px; |
|||
box-sizing: border-box; |
|||
.left { |
|||
background: #f7faff; |
|||
margin-right: 10px; |
|||
min-width: 300px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 5px; |
|||
padding: 10px; |
|||
box-sizing: border-box; |
|||
img { |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
|
|||
img { |
|||
width: 50px; |
|||
height: 50px; |
|||
margin-right: 15px; |
|||
} |
|||
|
|||
.left_right, |
|||
.right_right { |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex: 1; |
|||
:nth-child(1) { |
|||
font-size: 18px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
} |
|||
|
|||
:nth-child(2) { |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
color: #666666; |
|||
} |
|||
} |
|||
.right_box { |
|||
img { |
|||
margin: 0; |
|||
width: 10px; |
|||
height: 14px; |
|||
} |
|||
} |
|||
.right { |
|||
flex: 1; |
|||
display: grid; |
|||
grid-template-columns: repeat(4, 1fr); |
|||
|
|||
.box { |
|||
height: 75px; |
|||
margin: 0 10px 10px 0; |
|||
|
|||
.card { |
|||
background: #f7faff; |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
border-radius: 5px; |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
#myCharts { |
|||
width: 1200px; |
|||
height: 400px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue