Skip to content

bdc / bdcsjsb-web

Go to a project
Toggle navigation
Toggle navigation pinning
76f02081 by renchao@pashanhoo.com
Options

feat:配置修改

1 parent 0348f007
Inline Side-by-side
Showing 10 changed files with 386 additions and 410 deletions
{
"TITLE": "汉中市数据上报系统",
"CODE": "BDCSJSB",
"AREARMAP": "610702",
"XZQ": "汉中市",
"SERVERAPI": "/bdcsjsb",
"calcHeight": 160,
"echartTextColor": "#4A4A4A",
"MANAGEMENTAPI": "http://192.168.2.38:8090/management",
"ip": "http://192.168.2.38:8027"
}
\ No newline at end of file
{
"TITLE": "玉树州数据上报系统",
"CODE": "BDCSJSB",
"AREARMAP": "632701",
"XZQ": "玉树州",
"SERVERAPI": "/bdcsjsb",
"calcHeight": 160,
"echartTextColor": "#4A4A4A",
"MANAGEMENTAPI": "http://192.168.2.38:8090/management",
"ip": "http://192.168.2.38:8027"
}
\ No newline at end of file
......@@ -4,8 +4,6 @@
"AREARMAP": "610702",
"XZQ": "汉中市",
"SERVERAPI": "/bdcsjsb",
"calcHeight": 160,
"echartTextColor": "#4A4A4A",
"MANAGEMENTAPI": "http://192.168.2.38:8090/management",
"ip": "http://192.168.2.38"
}
\ No newline at end of file
......
......@@ -131,7 +131,7 @@
bottom: "-1%",
left: "center",
textStyle: {
color: this.BASE_API.echartTextColor,
color: "#4A4A4A",
},
},
tooltip: {
......@@ -232,7 +232,7 @@
top: 20,
textStyle: {
show: true,
color: this.BASE_API.echartTextColor,
color: "#4A4A4A",
fontSize: "16",
},
},
......@@ -244,7 +244,7 @@
interval: 0,
textStyle: {
show: true,
color: this.BASE_API.echartTextColor,
color: "#4A4A4A",
fontSize: "16",
},
},
......@@ -261,7 +261,7 @@
axisLabel: {
textStyle: {
show: true,
color: this.BASE_API.echartTextColor,
color: "#4A4A4A",
fontSize: "16",
},
},
......
......@@ -52,256 +52,256 @@
</template>
<script>
import { mapGetters } from "vuex";
import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
import business from "@/api/business";
export default {
name: "jktj",
data () {
return {
// 开始日期限制
pickerOptionsStart: {
disabledDate: (time) => {
if (this.form.endTime) {
return time.getTime() > new Date(this.form.endTime).getTime();
}
import { mapGetters } from "vuex";
import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
import business from "@/api/business";
export default {
name: "jktj",
data () {
return {
// 开始日期限制
pickerOptionsStart: {
disabledDate: (time) => {
if (this.form.endTime) {
return time.getTime() > new Date(this.form.endTime).getTime();
}
},
},
},
// 结束日期限制
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.form.startTime) {
return time.getTime() < new Date(this.form.startTime).getTime();
}
// 结束日期限制
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.form.startTime) {
return time.getTime() < new Date(this.form.startTime).getTime();
}
},
},
},
recTypeArr: [],
chartData: [],
// 搜索表单
form: {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
qxdm: "",
},
interval: 50
};
},
mounted () {
// 查询成功率
this.getSuucessRate();
},
computed: {
...mapGetters(["dicData"]),
},
methods: {
endTimeChange (val) {
this.form.endTime = timeFormat(new Date(val), true)
},
async getSuucessRate () {
this.recTypeArr = [];
this.chartData = [];
let { result: res } = await business.getSuucessRate(
this.form.startTime,
this.form.endTime,
this.form.qxdm
);
this.chartData = res;
let maxData = Math.max.apply(Math, this.chartData.map(item => { return item.failure }))
this.interval = Math.ceil(maxData / 10)
//行政区代码过滤
res.length > 0 &&
res.forEach((item) => {
this.recTypeArr.push(item.recTypeName);
});
this.$nextTick(() => {
// 初始化图表
this.chartData.length && this.echartInit();
});
},
// 重置
resetForm () {
this.form = {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
qxdm: "",
recTypeArr: [],
chartData: [],
// 搜索表单
form: {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
qxdm: "",
},
interval: 50
};
},
mounted () {
// 查询成功率
this.getSuucessRate();
},
echartInit () {
let _this = this;
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
color: ["#13E5FF", "#C99E68", "#E873B2", "#ffaf48"],
tooltip: {
trigger: "axis",
formatter: '{b}<br/>{a0}：{c0}个<br/>{a1}：{c1}个<br/>{a2}：{c2}%',
axisPointer: {
type: "cross",
crossStyle: {
color: this.BASE_API.echartTextColor,
computed: {
...mapGetters(["dicData"]),
},
methods: {
endTimeChange (val) {
this.form.endTime = timeFormat(new Date(val), true)
},
async getSuucessRate () {
this.recTypeArr = [];
this.chartData = [];
let { result: res } = await business.getSuucessRate(
this.form.startTime,
this.form.endTime,
this.form.qxdm
);
this.chartData = res;
let maxData = Math.max.apply(Math, this.chartData.map(item => { return item.failure }))
this.interval = Math.ceil(maxData / 10)
//行政区代码过滤
res.length > 0 &&
res.forEach((item) => {
this.recTypeArr.push(item.recTypeName);
});
this.$nextTick(() => {
// 初始化图表
this.chartData.length && this.echartInit();
});
},
// 重置
resetForm () {
this.form = {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
qxdm: "",
};
this.getSuucessRate();
},
echartInit () {
let _this = this;
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
color: ["#13E5FF", "#C99E68", "#E873B2", "#ffaf48"],
tooltip: {
trigger: "axis",
formatter: '{b}<br/>{a0}：{c0}个<br/>{a1}：{c1}个<br/>{a2}：{c2}%',
axisPointer: {
type: "cross",
crossStyle: {
color: "#4A4A4A",
},
},
},
},
legend: {
data: ["成功", "失败", "成功率"],
top: '16',
textStyle: {
show: true,
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
},
label: {
color: 'inherit',
},
xAxis: [
{
type: "category",
data: _this.recTypeArr,
axisPointer: {
type: "shadow",
legend: {
data: ["成功", "失败", "成功率"],
top: '16',
textStyle: {
show: true,
color: "#4A4A4A",
fontSize: "16",
},
axisLabel: {
textStyle: {
show: true,
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
label: {
color: 'inherit',
},
xAxis: [
{
type: "category",
data: _this.recTypeArr,
axisPointer: {
type: "shadow",
},
formatter: function (val) {
let c = document.createElement("canvas");
const ctx = c.getContext("2d");
const arr = val.split("");
arr
.map((item) => ctx.measureText(item).width)
.reduce((pre, next, index) => {
const nLen = pre + next;
if (nLen > 40) {
arr[index - 1] += "...";
return next;
} else {
return nLen;
}
axisLabel: {
textStyle: {
show: true,
color: "#4A4A4A",
fontSize: "16",
},
formatter: function (val) {
let c = document.createElement("canvas");
const ctx = c.getContext("2d");
const arr = val.split("");
arr
.map((item) => ctx.measureText(item).width)
.reduce((pre, next, index) => {
const nLen = pre + next;
if (nLen > 40) {
arr[index - 1] += "...";
return next;
} else {
return nLen;
}
});
c = null;
let ind = arr.findIndex((i) => {
return i.indexOf("...") > -1;
});
c = null;
let ind = arr.findIndex((i) => {
return i.indexOf("...") > -1;
});
let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr;
return newArr.join("");
let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr;
return newArr.join("");
},
},
},
},
],
yAxis: [
{
type: "value",
name: "数量/个",
nameTextStyle: {
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
// interval: this.interval,
axisLabel: {
formatter: "{value}",
textStyle: {
show: true,
color: this.BASE_API.echartTextColor,
],
yAxis: [
{
type: "value",
name: "数量/个",
nameTextStyle: {
color: "#4A4A4A",
fontSize: "16",
},
// interval: this.interval,
axisLabel: {
formatter: "{value}",
textStyle: {
show: true,
color: "#4A4A4A",
fontSize: "16",
},
},
},
},
{
type: "value",
name: "成功率",
nameTextStyle: {
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
splitNumber: 2,
axisLabel: {
formatter: "{value} %",
textStyle: {
show: true,
color: this.BASE_API.echartTextColor,
{
type: "value",
name: "成功率",
nameTextStyle: {
color: "#4A4A4A",
fontSize: "16",
},
splitNumber: 2,
axisLabel: {
formatter: "{value} %",
textStyle: {
show: true,
color: "#4A4A4A",
fontSize: "16",
},
},
},
},
],
series: [
{
name: "成功",
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
],
series: [
{
name: "成功",
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
},
barMaxWidth: '60',
data: this.chartData.map((item) => {
return item.success;
}),
},
barMaxWidth: '60',
data: this.chartData.map((item) => {
return item.success;
}),
},
{
name: "失败",
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
{
name: "失败",
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
},
barMaxWidth: '60',
data: this.chartData.map((item) => {
return item.failure;
}),
},
barMaxWidth: '60',
data: this.chartData.map((item) => {
return item.failure;
}),
},
{
name: "成功率",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
{
name: "成功率",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
},
type: "line",
barMaxWidth: '60',
yAxisIndex: 1,
data: this.chartData.map((item) => {
return item.rate;
}),
},
type: "line",
barMaxWidth: '60',
yAxisIndex: 1,
data: this.chartData.map((item) => {
return item.rate;
}),
},
],
});
],
});
},
},
},
};
};
</script>
<style scoped lang="scss">
.jktjDetail {
flex-direction: column;
.jktjDetail {
flex-direction: column;
.rows {
margin-left: 100px;
}
.rows {
margin-left: 100px;
}
.center {
line-height: 50vh;
text-align: center;
color: #b6b5b5;
.center {
line-height: 50vh;
text-align: center;
color: #b6b5b5;
}
}
}
</style>
......
......@@ -38,7 +38,7 @@
</div>
<!-- 列表区域 -->
<div class="from-clues-content complex-header">
<lb-table ref="table" :header-cell-style="headerStyle1" :calcHeight="BASE_API.calcHeight" :pagination="false"
<lb-table ref="table" :header-cell-style="headerStyle1" :calcHeight="160" :pagination="false"
:column="tableData.columns" :data="tableData.data">
</lb-table>
......
......@@ -39,7 +39,7 @@
</div>
<!-- 列表区域 -->
<div class="from-clues-content complex-header">
<lb-table ref="table" :pagination="false" :calcHeight="BASE_API.calcHeight" :column="tableData.columns" :data="tableData.data">
<lb-table ref="table" :pagination="false" :calcHeight="160" :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-05-11 10:11:15
* @LastEditTime: 2023-06-09 15:16:47
* @FilePath: \bdcjg-web\src\views\statistics\registerBookQuality\index.vue
* @Description: 接入质量评价表
*
......@@ -43,7 +43,7 @@
</div>
<!-- 列表区域 -->
<div class="from-clues-content complex-header">
<lb-table ref="table" :pagination="false" :border="true" :calcHeight="BASE_API.calcHeight"
<lb-table ref="table" :pagination="false" :border="true" :calcHeight="160"
: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"
......
......@@ -51,184 +51,184 @@
</div>
</template>
<script>
import { mapGetters } from "vuex";
import efficient from "@/api/efficient";
import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
export default {
name: "jktj",
data () {
return {
// 开始日期限制
pickerOptionsStart: {
disabledDate: (time) => {
if (this.form.endTime) {
return time.getTime() > new Date(this.form.endTime).getTime();
}
import { mapGetters } from "vuex";
import efficient from "@/api/efficient";
import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
export default {
name: "jktj",
data () {
return {
// 开始日期限制
pickerOptionsStart: {
disabledDate: (time) => {
if (this.form.endTime) {
return time.getTime() > new Date(this.form.endTime).getTime();
}
},
},
},
// 结束日期限制
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.form.startTime) {
return time.getTime() < new Date(this.form.startTime).getTime();
}
// 结束日期限制
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.form.startTime) {
return time.getTime() < new Date(this.form.startTime).getTime();
}
},
},
},
// 搜索表单
valueTime: "",
// 搜索表单
form: {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
qxdm: "",
},
chartData: []
};
},
mounted () {
// 查询业务量
this.getProcessCounts();
},
computed: {
...mapGetters(["dicData"]),
},
methods: {
endTimeChange (val) {
this.form.endTime = timeFormat(new Date(val), true)
},
async getProcessCounts () {
this.chartData = [];
let { result: res } = await efficient.getProcessCounts(
this.form.startTime,
this.form.endTime,
this.form.qxdm
);
//获取图表配置项需要的数据
this.chartData = res;
this.$nextTick(() => {
// 初始化图表
this.chartData.length && this.echartInit(this.chartData)
});
},
// 重置
resetForm () {
this.form = {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
qxdm: ""
// 搜索表单
valueTime: "",
// 搜索表单
form: {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
qxdm: "",
},
chartData: []
};
},
mounted () {
// 查询业务量
this.getProcessCounts();
},
//图表渲染
echartInit (chartArr) {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
color: ["#13E5FF"],
tooltip: {
show: true,
trigger: "axis",
textStyle: {
fontSize: 16, // 字体大小
computed: {
...mapGetters(["dicData"]),
},
methods: {
endTimeChange (val) {
this.form.endTime = timeFormat(new Date(val), true)
},
async getProcessCounts () {
this.chartData = [];
let { result: res } = await efficient.getProcessCounts(
this.form.startTime,
this.form.endTime,
this.form.qxdm
);
//获取图表配置项需要的数据
this.chartData = res;
this.$nextTick(() => {
// 初始化图表
this.chartData.length && this.echartInit(this.chartData)
});
},
// 重置
resetForm () {
this.form = {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
qxdm: ""
};
this.getProcessCounts();
},
//图表渲染
echartInit (chartArr) {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
color: ["#13E5FF"],
tooltip: {
show: true,
trigger: "axis",
textStyle: {
fontSize: 16, // 字体大小
},
},
},
grid: {
top: 120,
bottom: 100,
},
label: {
color: 'inherit',
},
xAxis: [
{
type: "category",
data: chartArr.map(item => item.recTypeName),
axisLabel: {
interval: 0,
rotate: 40,
formatter: function (val) {
let c = document.createElement("canvas");
const ctx = c.getContext("2d");
const arr = val.split("");
arr
.map((item) => ctx.measureText(item).width)
.reduce((pre, next, index) => {
const nLen = pre + next;
if (nLen > 60) {
arr[index - 1] += "...";
return next;
} else {
return nLen;
}
grid: {
top: 120,
bottom: 100,
},
label: {
color: 'inherit',
},
xAxis: [
{
type: "category",
data: chartArr.map(item => item.recTypeName),
axisLabel: {
interval: 0,
rotate: 40,
formatter: function (val) {
let c = document.createElement("canvas");
const ctx = c.getContext("2d");
const arr = val.split("");
arr
.map((item) => ctx.measureText(item).width)
.reduce((pre, next, index) => {
const nLen = pre + next;
if (nLen > 60) {
arr[index - 1] += "...";
return next;
} else {
return nLen;
}
});
c = null;
let ind = arr.findIndex((i) => {
return i.indexOf("...") > -1;
});
c = null;
let ind = arr.findIndex((i) => {
return i.indexOf("...") > -1;
});
let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr;
return newArr.join("");
},
textStyle: {
show: true,
color: this.BASE_API.echartTextColor,
fontSize: "16",
let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr;
return newArr.join("");
},
textStyle: {
show: true,
color: "#4A4A4A",
fontSize: "16",
},
},
},
},
],
yAxis: [
{
type: "value",
name: "数量/个",
nameTextStyle: {
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
axisLabel: {
textStyle: {
show: true,
color: this.BASE_API.echartTextColor,
],
yAxis: [
{
type: "value",
name: "数量/个",
nameTextStyle: {
color: "#4A4A4A",
fontSize: "16",
},
axisLabel: {
textStyle: {
show: true,
color: "#4A4A4A",
fontSize: "16",
},
},
},
},
],
],
series: [
{
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
series: [
{
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
},
barMaxWidth: '60',
data: chartArr.map(item => item.counts),
},
barMaxWidth: '60',
data: chartArr.map(item => item.counts),
},
],
});
],
});
},
},
},
};
};
</script>
<style scoped lang="scss">
.jktjDetail {
flex-direction: column;
.jktjDetail {
flex-direction: column;
.rows {
margin-left: 100px;
}
.rows {
margin-left: 100px;
}
.center {
line-height: 50vh;
text-align: center;
color: #b6b5b5;
.center {
line-height: 50vh;
text-align: center;
color: #b6b5b5;
}
}
}
</style>
......
......@@ -38,7 +38,7 @@
</el-form>
</div>
<div class="from-clues-content">
<lb-table :pagination="false" @size-change="handleSizeChange" :calcHeight="BASE_API.calcHeight"
<lb-table :pagination="false" @size-change="handleSizeChange" :calcHeight="160"
@p-current-change="handleCurrentChange" :column="tableData.columns" :data="listdata"
row-key="dictid">
</lb-table>
......