Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
12e854f0 by renchao@pashanhoo.com
Options

style:图表的设置

1 parent bb6ca1ce
Inline Side-by-side
Showing 13 changed files with 72 additions and 129 deletions
......@@ -31,5 +31,6 @@ npm install --registry=https://registry.npm.taobao.org
"CODE": "BDCJGPT", {"BDCSBPT":上报: "BDCJGPT":监管}
"SERVERAPI": "/bdcsjsb",
"calcHeight": 200, {上报:160 监管:200}
"echartTextColor": "#FFFFFF", {上报:"#4A4A4A" 监管:"#FFFFFF"}
"MANAGEMENTAPI": "http://192.168.2.38:8090/management"
}
\ No newline at end of file
......
{
"TITLE": "汉中市数据上报系统",
"THEME": "sb",
"CODE": "BDCSBPT",
"CODE": "BDCJGPT",
"SERVERAPI": "/bdcsjsb",
"calcHeight": 160,
"echartTextColor": "#FFFFFF",
"MANAGEMENTAPI": "http://192.168.2.38:8090/management"
}
\ No newline at end of file
......
......@@ -16,13 +16,3 @@ export default {
}
}
</script>
\ No newline at end of file
<style lang="scss" scoped>
.hasTagsView {
.app-main {
overflow-x: auto;
box-sizing: border-box;
background-color: #EDF1F7;
box-sizing: border-box;
}
}
</style>
\ No newline at end of file
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-22 10:23:46
* @LastEditTime: 2023-03-28 10:12:27
-->
<template>
<section>
<transition name="fade-transform" mode="out-in">
<router-view />
</transition>
</section>
</template>
<script>
export default {
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-23 09:21:00
* @LastEditTime: 2023-03-28 10:14:20
-->
<template>
<div class="app-wrapper">
<navbar />
<div class="main-container">
<sidebar class="sidebar-container" />
<div class="app-main">
<div class="app-content">
<tags-view v-if="needTagsView" />
<app-main />
</div>
......@@ -40,17 +40,6 @@ export default {
}
}
</script>
<style lang="scss" scoped>
.app-main {
height: calc(100vh - 74px);
overflow-x: hidden;
box-sizing: border-box;
flex: 1;
width: 100%;
background: #EAEBF0;
padding: 10px;
}
</style>
<style lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/sbSidebar.scss";
......@@ -83,4 +72,13 @@ export default {
width: 100%;
transition: width 0.28s;
}
.app-content {
overflow-x: hidden;
box-sizing: border-box;
flex: 1;
width: 100%;
background: #EAEBF0;
padding: 10px;
}
</style>
......
......@@ -190,6 +190,12 @@
}
}
.echarts-box {
display: flex;
justify-content: center;
height: calc(100vh - 260px);
}
.complex-header {
.el-table--border th.el-table__cell {
border-bottom: 1px solid #458ACF !important;
......@@ -1080,12 +1086,15 @@
.informationbase {
margin: 0.1875rem 1.0417rem;
overflow-y: auto;
.form-wrapper {
padding: 0px 120px 0px;
.el-form-item {
/deep/.el-form-item__label {
color: #ffffff;
}
::v-deep .el-input .el-input__inner {
padding: 0 8px;
height: 40px;
......@@ -1093,13 +1102,14 @@
border: 1px solid #6bc1fc;
}
}
.el-form-item--small.el-form-item {
margin-bottom: 16px;
}
}
.bottom-wrapper {
padding: 0px 120px 0px;
text-align: center;
}
}
\ No newline at end of file
......
......@@ -9,7 +9,7 @@
.from-clues {
height: 100%;
// height: 100%;
width: 100%;
min-width: 1280px;
box-sizing: border-box;
......@@ -19,7 +19,6 @@
width: 100%;
padding: 7px 15px 15px 15px;
box-sizing: border-box;
background-size: 100% 100%;
background: #FFFFFF;
border-radius: 4px;
}
......@@ -30,7 +29,6 @@
margin-top: 10px;
background: #FFFFFF;
border-radius: 4px;
background-size: 100% 100%;
padding: 15px;
}
......@@ -57,6 +55,12 @@
}
}
.echarts-box {
display: flex;
justify-content: center;
height: calc(100vh - 230px);
}
/* --------------进度条美化---------------- */
::-webkit-scrollbar {
width: 7px;
......
<template>
<!-- 监控日志 -->
<div class="jktjDetail form-clues">
<div class="jktjDetail from-clues">
<!-- 头部搜索 -->
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="100px">
<el-form-item v-if="BASE_API.THEME == 'jg'">
<Breadcrumb />
</el-form-item>
<el-row>
<el-row class="mb-5">
<el-col :span="4">
<el-form-item label="开始日期" prop="startTime" class="d-flex">
<el-date-picker type="date" :clearable="false" class="width100" placeholder="开始日期"
......@@ -31,11 +31,11 @@
</el-form>
</div>
<!-- 表格 -->
<div class="form-clues-content echarts-box" v-if="pieChartsData.length">
<div id="myChart" class="chart"></div>
<div id="myChart-bar" class="chart-bar"></div>
<div class="from-clues-content echarts-box" v-if="pieChartsData.length">
<div id="myChart" class="chart" style="height:100%;width:100%;"></div>
<div id="myChart-bar" class="chart-bar" style="height:100%;width:100%;"></div>
</div>
<div class="form-clues-content echarts-box center" v-else>暂无数据</div>
<div class="from-clues-content center" v-else>暂无数据</div>
</div>
</template>
<script>
......@@ -123,10 +123,10 @@ export default {
// 绘制图表
myChart.setOption({
legend: {
bottom: "2%",
bottom: "-1%",
left: "center",
textStyle: {
color: "#fff",
color: this.BASE_API.echartTextColor,
},
},
tooltip: {
......@@ -141,7 +141,7 @@ export default {
name: "各业务类型办理数量",
type: "pie",
radius: [0, 250],
center: ["50%", "45%"],
center: ["50%", "32%"],
roseType: "area",
itemStyle: {
borderRadius: 8,
......@@ -227,7 +227,7 @@ export default {
top: 20,
textStyle: {
show: true,
color: "#fff",
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
},
......@@ -239,7 +239,7 @@ export default {
interval: 0,
textStyle: {
show: true,
color: "#fff",
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
},
......@@ -250,13 +250,13 @@ export default {
type: "value",
name: "单位：天",
nameTextStyle: {
color: "#fff",
color: this.BASE_APIechartTextColor,
fontSize: "16",
},
axisLabel: {
textStyle: {
show: true,
color: "#fff",
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
},
......@@ -322,8 +322,6 @@ export default {
</script>
<style scoped lang="scss">
.jktjDetail {
height: 100%;
display: flex;
flex-direction: column;
.rows {
......@@ -333,26 +331,6 @@ export default {
.center {
line-height: 50vh;
text-align: center;
}
.echarts-box {
display: flex;
justify-content: center;
.chart {
width: 40%;
height: 100%;
float: left;
}
.chart-bar {
width: 60%;
}
}
.form-clues-content {
flex: 1;
height: 100%;
color: #b6b5b5;
}
}
......
<template>
<!-- 监控日志 -->
<div class="jktjDetail form-clues">
<div class="jktjDetail from-clues">
<!-- 头部搜索 -->
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item v-if="BASE_API.THEME=='jg'">
<el-form-item v-if="BASE_API.THEME == 'jg'">
<Breadcrumb />
</el-form-item>
<el-row>
<el-row class="mb-5">
<el-col :span="4">
<el-form-item label="行政区" class="d-flex">
<el-select v-model="form.qxdm" class="width100" clearable placeholder="行政区">
......@@ -39,10 +39,10 @@
</el-form>
</div>
<!-- 图表 -->
<div class="form-clues-content echarts-box" v-if="chartData.length">
<div id="myChart" class="chart"></div>
<div class="from-clues-content echarts-box" v-if="chartData.length">
<div id="myChart" class="chart" style="height:100%;width:100%;"></div>
</div>
<div class="form-clues-content echarts-box center" v-else>暂无数据</div>
<div class="from-clues-content echarts-box center" v-else>暂无数据</div>
</div>
</template>
......@@ -136,7 +136,7 @@ export default {
axisPointer: {
type: "cross",
crossStyle: {
color: "#fff",
color: this.BASE_API.echartTextColor,
},
},
},
......@@ -145,7 +145,7 @@ export default {
top: '16',
textStyle: {
show: true,
color: "#fff",
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
},
......@@ -162,7 +162,7 @@ export default {
axisLabel: {
textStyle: {
show: true,
color: "#fff",
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
formatter: function (val) {
......@@ -195,7 +195,7 @@ export default {
type: "value",
name: "数量/个",
nameTextStyle: {
color: "#fff",
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
// interval: this.interval,
......@@ -203,7 +203,7 @@ export default {
formatter: "{value}",
textStyle: {
show: true,
color: "#fff",
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
},
......@@ -212,7 +212,7 @@ export default {
type: "value",
name: "成功率",
nameTextStyle: {
color: "#fff",
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
splitNumber: 2,
......@@ -220,7 +220,7 @@ export default {
formatter: "{value} %",
textStyle: {
show: true,
color: "#fff",
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
},
......@@ -287,8 +287,6 @@ export default {
</script>
<style scoped lang="scss">
.jktjDetail {
height: 100%;
display: flex;
flex-direction: column;
.rows {
......@@ -300,21 +298,5 @@ export default {
text-align: center;
color: #b6b5b5;
}
.echarts-box {
display: flex;
justify-content: center;
height: 500px;
.chart {
width: 100%;
height: 100%;
}
}
.form-clues-content {
flex: 1;
height: 100%;
}
}
</style>
......
<template>
<!-- 监控日志 -->
<div class="jktjDetail form-clues">
<div class="jktjDetail from-clues">
<!-- 头部搜索 -->
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="100px">
<el-form-item v-if="BASE_API.THEME == 'jg'">
<Breadcrumb />
</el-form-item>
<el-row>
<el-row class="mb-5">
<el-col :span="4">
<el-form-item label="行政区" class="d-flex">
<el-select v-model="form.qxdm" class="width100" clearable placeholder="行政区">
......@@ -39,13 +39,12 @@
</el-form>
</div>
<!-- 图表 -->
<div class="form-clues-content echarts-box" v-if="chartData.length">
<div id="myChart" class="chart"></div>
<div class="from-clues-content echarts-box" v-if="chartData.length">
<div id="myChart" class="chart" style="height:100%;width:100%;"></div>
</div>
<div class="form-clues-content echarts-box center" v-else>暂无数据</div>
<div class="from-clues-content echarts-box center" v-else>暂无数据</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import efficient from "@/api/efficient";
......@@ -168,7 +167,7 @@ export default {
},
textStyle: {
show: true,
color: "#fff",
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
},
......@@ -179,13 +178,13 @@ export default {
type: "value",
name: "数量/个",
nameTextStyle: {
color: "#fff",
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
axisLabel: {
textStyle: {
show: true,
color: "#fff",
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
},
......@@ -215,8 +214,6 @@ export default {
</script>
<style scoped lang="scss">
.jktjDetail {
height: 100%;
display: flex;
flex-direction: column;
.rows {
......@@ -228,21 +225,5 @@ export default {
text-align: center;
color: #b6b5b5;
}
.echarts-box {
display: flex;
justify-content: center;
height: 500px;
.chart {
width: 100%;
height: 100%;
}
}
.form-clues-content {
flex: 1;
height: 100%;
}
}
</style>
......
......@@ -33,7 +33,7 @@
</div>
<!-- 列表区域 -->
<div class="from-clues-content complex-header">
<lb-table ref="table" :header-cell-style="headerStyle1" :calcHeight="200" :pagination="false"
<lb-table ref="table" :header-cell-style="headerStyle1" :calcHeight="BASE_API.calcHeight" :pagination="false"
:column="tableData.columns" :data="tableData.data">
</lb-table>
......
......@@ -34,7 +34,7 @@
</div>
<!-- 列表区域 -->
<div class="from-clues-content complex-header">
<lb-table ref="table" :pagination="false" :calcHeight="200" :column="tableData.columns" :data="tableData.data">
<lb-table ref="table" :pagination="false" :calcHeight="BASE_API.calcHeight" :column="tableData.columns" :data="tableData.data">
</lb-table>
<down-lb-table ref="table" v-show="false" :id="'mytable'" :downExcel="true" :pagination="false"
:column="tableData.columns" :data="tableData.data" :downTitle="downTitle">
......
......@@ -2,7 +2,7 @@
* @Author: yangwei
* @Date: 2023-02-17 16:32:50
* @LastEditors: Please set LastEditors
* @LastEditTime: 2023-03-27 14:58:51
* @LastEditTime: 2023-03-28 10:24:52
* @FilePath: \bdcjg-web\src\views\statistics\registerBookQuality\index.vue
* @Description:
*
......@@ -43,8 +43,8 @@
</div>
<!-- 列表区域 -->
<div class="from-clues-content complex-header">
<lb-table ref="table" :pagination="false" :border="true" :calcHeight="200" :header-cell-style="headerStyle"
:column="tableData.columns" :data="tableData.data">
<lb-table ref="table" :pagination="false" :border="true" :calcHeight="BASE_API.calcHeight"
:header-cell-style="headerStyle" :column="tableData.columns" :data="tableData.data">
</lb-table>
<down-lb-table ref="table" v-show="false" :id="'mytable'" :header-cell-style="headerStyle1" :downExcel="true"
:pagination="false" :column="tableData.columns" :data="tableData.data" :downTitle="downTitle">
......