williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

雷达分页

Browse Source
This commit is contained in:
熊丽君
2022-01-22 09:05:38 +08:00
parent def5cf6d2f
commit 4640afd5e7
17 changed files with 2145 additions and 1596 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/main.js
View File

@ -5,7 +5,7 @@ import Cookies from 'js-cookie'
import Element from 'element-ui'
import './assets/styles/element-variables.scss'
import 'echarts-liquidfill';
import 'echarts-liquidfill'
import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css
@ -17,19 +17,19 @@ import plugins from './plugins' // plugins
import './assets/icons' // icon
import './permission' // permission control
import { getDicts } from "@/api/system/dict/data";
import { getConfigKey } from "@/api/system/config";
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
import { getDicts } from '@/api/system/dict/data'
import { getConfigKey } from '@/api/system/config'
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from '@/utils/ruoyi'
// 分页组件
import Pagination from "@/components/Pagination";
import Pagination from '@/components/Pagination'
// 自定义表格工具组件
import RightToolbar from "@/components/RightToolbar"
import RightToolbar from '@/components/RightToolbar'
// 富文本组件
import Editor from "@/components/Editor"
import Editor from '@/components/Editor'
// 文件上传组件
import FileUpload from "@/components/FileUpload"
import FileUpload from '@/components/FileUpload'
// 图片上传组件
import ImageUpload from "@/components/ImageUpload"
import ImageUpload from '@/components/ImageUpload'
// 字典标签组件
import DictTag from '@/components/DictTag'
// 头部标签组件
@ -37,6 +37,7 @@ import VueMeta from 'vue-meta'
// 字典数据组件
import DictData from '@/components/DictData'
import Bus from '@/utils/eventBus'
import { handleMillion } from '@/utils/index'
// 全局方法挂载
Vue.prototype.getDicts = getDicts
@ -48,14 +49,15 @@ Vue.prototype.selectDictLabel = selectDictLabel
Vue.prototype.selectDictLabels = selectDictLabels
Vue.prototype.handleTree = handleTree
Vue.prototype.page_size = 2
Vue.prototype.handleMillion = handleMillion
import request from '@/utils/request'
Vue.prototype.request = request;
Vue.prototype.dataZoomEnd = (titLength,defaultLength = 7) => {
if(titLength <= defaultLength) {
return 100;
}
return ((defaultLength / (titLength + 1)) *100).toFixed(0);
Vue.prototype.request = request
Vue.prototype.dataZoomEnd = (titLength, defaultLength = 7) => {
if (titLength <= defaultLength) {
return 100
}
return ((defaultLength / (titLength + 1)) * 100).toFixed(0)
}
// 全局组件挂载
@ -66,7 +68,7 @@ Vue.component('Editor', Editor)
Vue.component('FileUpload', FileUpload)
Vue.component('ImageUpload', ImageUpload)
Vue.use(Bus);
Vue.use(Bus)
Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)
@ -82,14 +84,14 @@ DictData.install()
*/
Vue.use(Element, {
size: Cookies.get('size') || 'medium' // set element-ui default size
size: Cookies.get('size') || 'medium', // set element-ui default size
})
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: h => h(App)
el: '#app',
router,
store,
render: h => h(App),
})

451
src/utils/index.js
View File

@ -4,15 +4,15 @@ import { parseTime } from './ruoyi'
* 表格时间格式化
*/
export function formatDate(cellValue) {
if (cellValue == null || cellValue == "") return "";
var date = new Date(cellValue)
var year = date.getFullYear()
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
if (cellValue == null || cellValue == '') return ''
var date = new Date(cellValue)
var year = date.getFullYear()
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
}
/**
@ -21,41 +21,31 @@ export function formatDate(cellValue) {
* @returns {string}
*/
export function formatTime(time, option) {
if (('' + time).length === 10) {
time = parseInt(time) * 1000
} else {
time = +time
}
const d = new Date(time)
const now = Date.now()
if (('' + time).length === 10) {
time = parseInt(time) * 1000
} else {
time = +time
}
const d = new Date(time)
const now = Date.now()
const diff = (now - d) / 1000
const diff = (now - d) / 1000
if (diff < 30) {
return '刚刚'
} else if (diff < 3600) {
// less 1 hour
return Math.ceil(diff / 60) + '分钟前'
} else if (diff < 3600 * 24) {
return Math.ceil(diff / 3600) + '小时前'
} else if (diff < 3600 * 24 * 2) {
return '1天前'
}
if (option) {
return parseTime(time, option)
} else {
return (
d.getMonth() +
1 +
'月' +
d.getDate() +
'日' +
d.getHours() +
'时' +
d.getMinutes() +
'分'
)
}
if (diff < 30) {
return '刚刚'
} else if (diff < 3600) {
// less 1 hour
return Math.ceil(diff / 60) + '分钟前'
} else if (diff < 3600 * 24) {
return Math.ceil(diff / 3600) + '小时前'
} else if (diff < 3600 * 24 * 2) {
return '1天前'
}
if (option) {
return parseTime(time, option)
} else {
return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
}
}
/**
@ -63,18 +53,18 @@ export function formatTime(time, option) {
* @returns {Object}
*/
export function getQueryObject(url) {
url = url == null ? window.location.href : url
const search = url.substring(url.lastIndexOf('?') + 1)
const obj = {}
const reg = /([^?&=]+)=([^?&=]*)/g
search.replace(reg, (rs, $1, $2) => {
const name = decodeURIComponent($1)
let val = decodeURIComponent($2)
val = String(val)
obj[name] = val
return rs
})
return obj
url = url == null ? window.location.href : url
const search = url.substring(url.lastIndexOf('?') + 1)
const obj = {}
const reg = /([^?&=]+)=([^?&=]*)/g
search.replace(reg, (rs, $1, $2) => {
const name = decodeURIComponent($1)
let val = decodeURIComponent($2)
val = String(val)
obj[name] = val
return rs
})
return obj
}
/**
@ -82,15 +72,15 @@ export function getQueryObject(url) {
* @returns {number} output value
*/
export function byteLength(str) {
// returns the byte length of an utf8 string
let s = str.length
for (var i = str.length - 1; i >= 0; i--) {
const code = str.charCodeAt(i)
if (code > 0x7f && code <= 0x7ff) s++
else if (code > 0x7ff && code <= 0xffff) s += 2
if (code >= 0xDC00 && code <= 0xDFFF) i--
}
return s
// returns the byte length of an utf8 string
let s = str.length
for (var i = str.length - 1; i >= 0; i--) {
const code = str.charCodeAt(i)
if (code > 0x7f && code <= 0x7ff) s++
else if (code > 0x7ff && code <= 0xffff) s += 2
if (code >= 0xdc00 && code <= 0xdfff) i--
}
return s
}
/**
@ -98,13 +88,13 @@ export function byteLength(str) {
* @returns {Array}
*/
export function cleanArray(actual) {
const newArray = []
for (let i = 0; i < actual.length; i++) {
if (actual[i]) {
newArray.push(actual[i])
}
}
return newArray
const newArray = []
for (let i = 0; i < actual.length; i++) {
if (actual[i]) {
newArray.push(actual[i])
}
}
return newArray
}
/**
@ -112,13 +102,13 @@ export function cleanArray(actual) {
* @returns {Array}
*/
export function param(json) {
if (!json) return ''
return cleanArray(
Object.keys(json).map(key => {
if (json[key] === undefined) return ''
return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
})
).join('&')
if (!json) return ''
return cleanArray(
Object.keys(json).map(key => {
if (json[key] === undefined) return ''
return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
})
).join('&')
}
/**
@ -126,21 +116,21 @@ export function param(json) {
* @returns {Object}
*/
export function param2Obj(url) {
const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
if (!search) {
return {}
}
const obj = {}
const searchArr = search.split('&')
searchArr.forEach(v => {
const index = v.indexOf('=')
if (index !== -1) {
const name = v.substring(0, index)
const val = v.substring(index + 1, v.length)
obj[name] = val
}
})
return obj
const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
if (!search) {
return {}
}
const obj = {}
const searchArr = search.split('&')
searchArr.forEach(v => {
const index = v.indexOf('=')
if (index !== -1) {
const name = v.substring(0, index)
const val = v.substring(index + 1, v.length)
obj[name] = val
}
})
return obj
}
/**
@ -148,9 +138,9 @@ export function param2Obj(url) {
* @returns {string}
*/
export function html2Text(val) {
const div = document.createElement('div')
div.innerHTML = val
return div.textContent || div.innerText
const div = document.createElement('div')
div.innerHTML = val
return div.textContent || div.innerText
}
/**
@ -160,21 +150,21 @@ export function html2Text(val) {
* @returns {Object}
*/
export function objectMerge(target, source) {
if (typeof target !== 'object') {
target = {}
}
if (Array.isArray(source)) {
return source.slice()
}
Object.keys(source).forEach(property => {
const sourceProperty = source[property]
if (typeof sourceProperty === 'object') {
target[property] = objectMerge(target[property], sourceProperty)
} else {
target[property] = sourceProperty
}
})
return target
if (typeof target !== 'object') {
target = {}
}
if (Array.isArray(source)) {
return source.slice()
}
Object.keys(source).forEach(property => {
const sourceProperty = source[property]
if (typeof sourceProperty === 'object') {
target[property] = objectMerge(target[property], sourceProperty)
} else {
target[property] = sourceProperty
}
})
return target
}
/**
@ -182,19 +172,17 @@ export function objectMerge(target, source) {
* @param {string} className
*/
export function toggleClass(element, className) {
if (!element || !className) {
return
}
let classString = element.className
const nameIndex = classString.indexOf(className)
if (nameIndex === -1) {
classString += '' + className
} else {
classString =
classString.substr(0, nameIndex) +
classString.substr(nameIndex + className.length)
}
element.className = classString
if (!element || !className) {
return
}
let classString = element.className
const nameIndex = classString.indexOf(className)
if (nameIndex === -1) {
classString += '' + className
} else {
classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length)
}
element.className = classString
}
/**
@ -202,11 +190,11 @@ export function toggleClass(element, className) {
* @returns {Date}
*/
export function getTime(type) {
if (type === 'start') {
return new Date().getTime() - 3600 * 1000 * 24 * 90
} else {
return new Date(new Date().toDateString())
}
if (type === 'start') {
return new Date().getTime() - 3600 * 1000 * 24 * 90
} else {
return new Date(new Date().toDateString())
}
}
/**
@ -216,38 +204,38 @@ export function getTime(type) {
* @return {*}
*/
export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result
let timeout, args, context, timestamp, result
const later = function() {
// 据上一次触发时间间隔
const last = +new Date() - timestamp
const later = function () {
// 据上一次触发时间间隔
const last = +new Date() - timestamp
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last)
} else {
timeout = null
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args)
if (!timeout) context = args = null
}
}
}
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last)
} else {
timeout = null
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args)
if (!timeout) context = args = null
}
}
}
return function(...args) {
context = this
timestamp = +new Date()
const callNow = immediate && !timeout
// 如果延时不存在，重新设定延时
if (!timeout) timeout = setTimeout(later, wait)
if (callNow) {
result = func.apply(context, args)
context = args = null
}
return function (...args) {
context = this
timestamp = +new Date()
const callNow = immediate && !timeout
// 如果延时不存在，重新设定延时
if (!timeout) timeout = setTimeout(later, wait)
if (callNow) {
result = func.apply(context, args)
context = args = null
}
return result
}
return result
}
}
/**
@ -258,18 +246,18 @@ export function debounce(func, wait, immediate) {
* @returns {Object}
*/
export function deepClone(source) {
if (!source && typeof source !== 'object') {
throw new Error('error arguments', 'deepClone')
}
const targetObj = source.constructor === Array ? [] : {}
Object.keys(source).forEach(keys => {
if (source[keys] && typeof source[keys] === 'object') {
targetObj[keys] = deepClone(source[keys])
} else {
targetObj[keys] = source[keys]
}
})
return targetObj
if (!source && typeof source !== 'object') {
throw new Error('error arguments', 'deepClone')
}
const targetObj = source.constructor === Array ? [] : {}
Object.keys(source).forEach(keys => {
if (source[keys] && typeof source[keys] === 'object') {
targetObj[keys] = deepClone(source[keys])
} else {
targetObj[keys] = source[keys]
}
})
return targetObj
}
/**
@ -277,16 +265,16 @@ export function deepClone(source) {
* @returns {Array}
*/
export function uniqueArr(arr) {
return Array.from(new Set(arr))
return Array.from(new Set(arr))
}
/**
* @returns {string}
*/
export function createUniqueString() {
const timestamp = +new Date() + ''
const randomNum = parseInt((1 + Math.random()) * 65536) + ''
return (+(randomNum + timestamp)).toString(32)
const timestamp = +new Date() + ''
const randomNum = parseInt((1 + Math.random()) * 65536) + ''
return (+(randomNum + timestamp)).toString(32)
}
/**
@ -296,7 +284,7 @@ export function createUniqueString() {
* @returns {boolean}
*/
export function hasClass(ele, cls) {
return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
}
/**
@ -305,7 +293,7 @@ export function hasClass(ele, cls) {
* @param {string} cls
*/
export function addClass(ele, cls) {
if (!hasClass(ele, cls)) ele.className += ' ' + cls
if (!hasClass(ele, cls)) ele.className += ' ' + cls
}
/**
@ -314,77 +302,82 @@ export function addClass(ele, cls) {
* @param {string} cls
*/
export function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
ele.className = ele.className.replace(reg, ' ')
}
if (hasClass(ele, cls)) {
const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
ele.className = ele.className.replace(reg, ' ')
}
}
export function makeMap(str, expectsLowerCase) {
const map = Object.create(null)
const list = str.split(',')
for (let i = 0; i < list.length; i++) {
map[list[i]] = true
}
return expectsLowerCase
? val => map[val.toLowerCase()]
: val => map[val]
const map = Object.create(null)
const list = str.split(',')
for (let i = 0; i < list.length; i++) {
map[list[i]] = true
}
return expectsLowerCase ? val => map[val.toLowerCase()] : val => map[val]
}
export const exportDefault = 'export default '
export const beautifierConf = {
html: {
indent_size: '2',
indent_char: ' ',
max_preserve_newlines: '-1',
preserve_newlines: false,
keep_array_indentation: false,
break_chained_methods: false,
indent_scripts: 'separate',
brace_style: 'end-expand',
space_before_conditional: true,
unescape_strings: false,
jslint_happy: false,
end_with_newline: true,
wrap_line_length: '110',
indent_inner_html: true,
comma_first: false,
e4x: true,
indent_empty_lines: true
},
js: {
indent_size: '2',
indent_char: ' ',
max_preserve_newlines: '-1',
preserve_newlines: false,
keep_array_indentation: false,
break_chained_methods: false,
indent_scripts: 'normal',
brace_style: 'end-expand',
space_before_conditional: true,
unescape_strings: false,
jslint_happy: true,
end_with_newline: true,
wrap_line_length: '110',
indent_inner_html: true,
comma_first: false,
e4x: true,
indent_empty_lines: true
}
html: {
indent_size: '2',
indent_char: ' ',
max_preserve_newlines: '-1',
preserve_newlines: false,
keep_array_indentation: false,
break_chained_methods: false,
indent_scripts: 'separate',
brace_style: 'end-expand',
space_before_conditional: true,
unescape_strings: false,
jslint_happy: false,
end_with_newline: true,
wrap_line_length: '110',
indent_inner_html: true,
comma_first: false,
e4x: true,
indent_empty_lines: true,
},
js: {
indent_size: '2',
indent_char: ' ',
max_preserve_newlines: '-1',
preserve_newlines: false,
keep_array_indentation: false,
break_chained_methods: false,
indent_scripts: 'normal',
brace_style: 'end-expand',
space_before_conditional: true,
unescape_strings: false,
jslint_happy: true,
end_with_newline: true,
wrap_line_length: '110',
indent_inner_html: true,
comma_first: false,
e4x: true,
indent_empty_lines: true,
},
}
// 首字母大小
export function titleCase(str) {
return str.replace(/( |^)[a-z]/g, L => L.toUpperCase())
return str.replace(/( |^)[a-z]/g, L => L.toUpperCase())
}
// 下划转驼峰
export function camelCase(str) {
return str.replace(/-[a-z]/g, str1 => str1.substr(-1).toUpperCase())
return str.replace(/-[a-z]/g, str1 => str1.substr(-1).toUpperCase())
}
export function isNumberStr(str) {
return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
}
export function handleMillion(val) {
if (val == 0 || val == '0') return val
if (val && typeof (val - 0) == 'number') {
return (val / 10000).toFixed(2)
}
return val
}

37
src/views/bigScreen/drivingCabin/center.vue
View File

@ -1,7 +1,18 @@
<template>
<div>
<container3>
<img class="img" :src="val.bigPic" style="width: 100%; height: 100%" />
<img
v-if="val.bigPic && val.bigPic.length"
class="img"
:src="val.bigPic"
style="width: 100%; height: 100%"
/>
<img
v-else
class="img"
src="./conter.png"
style="width: 100%; height: 100%"
/>
<rocketTit class="tit">全年目标</rocketTit>
<div class="data">
<div class="data-item">
@ -11,9 +22,9 @@
>
</div>
<div class="box">
<i>{{ val.completedIncome }}/</i
><i class="num">{{ val.targetIncome }}</i
><span class="num2">万</span>
<i>{{ handleMillion(val.completedIncome) }}/</i
><i class="num">{{ handleMillion(val.targetIncome) }}</i
><span class="num2">亿</span>
</div>
<div style="width: 100%">
<progressBar
@ -28,9 +39,9 @@
>
</div>
<div class="box">
<i>{{ val.completedProfit }}/</i
><i class="num">{{ val.targetProfit }}</i
><span class="num2">万</span>
<i>{{ handleMillion(val.completedProfit) }}/</i
><i class="num">{{ handleMillion(val.targetProfit) }}</i
><span class="num2">亿</span>
</div>
<div style="width: 100%">
<progressBar
@ -45,9 +56,9 @@
>
</div>
<div class="box">
<i>{{ val.completedChargeQuantity }}/</i
><i class="num">{{ val.targetChargeQuantity }}</i
><span class="num2">万件</span>
<i>{{ handleMillion(val.completedChargeQuantity) }}/</i
><i class="num">{{ handleMillion(val.targetChargeQuantity) }}</i
><span class="num2">亿件</span>
</div>
<div style="width: 100%">
<progressBar
@ -64,9 +75,9 @@
>
</div>
<div class="box">
<i>{{ val.completedDeliveryQuantity }}/</i
><i class="num">{{ val.targetDeliveryQuantity }}</i
><span class="num2">万件</span>
<i>{{ handleMillion(val.completedDeliveryQuantity) }}/</i
><i class="num">{{ handleMillion(val.targetDeliveryQuantity) }}</i
><span class="num2">亿件</span>
</div>
<div style="width: 100%">
<progressBar

133
src/views/bigScreen/drivingCabin/center2.vue
View File

@ -1,140 +1,155 @@
<template>
<div>
<container4 title="今日动态">
<vue-seamless-scroll ref="seamlessScroll" :data="listData" class="warp" :class-option="{
openWatch: true,
singleHeight: 35
}">
<container4 title="动态信息">
<vue-seamless-scroll
ref="seamlessScroll"
:data="listData"
class="warp"
:class-option="{
openWatch: true,
singleHeight: 35,
}"
>
<ul class="item">
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/1.png">今日收入</el-col>
<el-col :span="5">{{val.income}}万</el-col>
<el-col :span="10"
><img src="./img/center2/1.png" />本月收入</el-col
>
<el-col :span="5">{{ month.income }}万</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/2.png">今日支出</el-col>
<el-col :span="5">{{val.expenditure}}万</el-col>
<el-col :span="10"
><img src="./img/center2/2.png" />本月支出</el-col
>
<el-col :span="5">{{ month.expenditure }}万</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/3.png">今日新签合同</el-col>
<el-col :span="5">{{val.newContract}}份</el-col>
<el-col :span="10"
><img src="./img/center2/3.png" />本月新签合同</el-col
>
<el-col :span="5">{{ month.newContract }}份</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/4.png">今日安全问题</el-col>
<el-col :span="5">{{val.safetyProblem}}个</el-col>
<el-col :span="10"
><img src="./img/center2/4.png" />本月安全问题</el-col
>
<el-col :span="5">{{ month.safetyProblem }}个</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/5.png">今日质量问题</el-col>
<el-col :span="5">{{val.qualityProblem}}个</el-col>
<el-col :span="10"
><img src="./img/center2/5.png" />本月质量问题</el-col
>
<el-col :span="5">{{ month.qualityProblem }}个</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/6.png">今日设备数</el-col>
<el-col :span="5">{{val.operatingEquipment}}台</el-col>
<el-col :span="7">运行率：{{val.equipmentRate}}%</el-col>
<el-col :span="10"
><img src="./img/center2/6.png" />今日设备数</el-col
>
<el-col :span="5">{{ today.operatingEquipment }}台</el-col>
<el-col :span="7">运行率：{{ today.equipmentRate }}%</el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/7.png">今日职工数</el-col>
<el-col :span="5">{{val.totalWorker}}人</el-col>
<el-col :span="7">出勤率：{{val.workerRate}}%</el-col>
<el-col :span="10"
><img src="./img/center2/7.png" />今日职工数</el-col
>
<el-col :span="5">{{ today.totalWorker }}人</el-col>
<el-col :span="7">出勤率：{{ today.workerRate }}%</el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/8.png">今日生产任务</el-col>
<el-col :span="5">{{val.totalTask}}个</el-col>
<el-col :span="7">完成率：{{val.taskRate}}%</el-col>
<el-col :span="10"
><img src="./img/center2/8.png" />今日生产任务</el-col
>
<el-col :span="5">{{ today.totalTask }}个</el-col>
<el-col :span="7">完成率：{{ today.taskRate }}%</el-col>
</el-row>
</li>
</ul>
</vue-seamless-scroll>
</container4>
</div>
</template>
<script>
import container4 from "./components/container4/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import vueSeamlessScroll from 'vue-seamless-scroll'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
import vueSeamlessScroll from "vue-seamless-scroll";
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";
import request from '@/utils/request'
import request from "@/utils/request";
export default {
mixins: [resize],
name: 'left1',
name: "left1",
components: {
container4,
rocketTit,
vueSeamlessScroll
vueSeamlessScroll,
},
data () {
data() {
return {
listData: [1, 2, 3, 4, 5, 6, 7, 8],
val: {
attendanceWorker: "0",
completeTask: "0",
equipmentRate: "0",
month: {
expenditure: "0",
id: 1,
income: "0",
newContract: "0",
operatingEquipment: "0",
qualityProblem: "0",
safetyProblem: "0",
},
today: {
equipmentRate: "0",
operatingEquipment: "0",
taskRate: "0",
todayDate: "0",
totalEquipment: "0",
totalTask: "0",
totalWorker: "0",
workerRate: "0",
}
}
},
};
},
mounted () {
mounted() {
this.$nextTick(() => {
this.getData()
})
},
beforeDestroy () {
this.getData();
});
},
beforeDestroy() {},
methods: {
getData() {
request({
url: '/hx/cockpitOverview/todayDynamics',
method: 'get',
}).then(res=> {
url: "/hx/cockpitOverview/todayDynamics",
method: "get",
}).then((res) => {
console.log(res);
if (200 == res.code) {
if(res.data[0] != undefined) {
this.val = res.data[0];
}
this.month = res.data.month;
this.today = res.data.today;
this.$refs.seamlessScroll.reset();
} else {
this.$message.error(res.msg);
}
})
}
}
}
});
},
},
};
</script>
<style lang="scss" scoped>

174
src/views/bigScreen/drivingCabin/index.vue
View File

@ -1,27 +1,27 @@
<template>
<div class="drivingCabin">
<div class="left1">
<left1></left1>
</div>
<div class="left2">
<left2></left2>
</div>
<!-- <div class="bg1"></div> -->
<div class="drivingCabin">
<div class="left1">
<left1></left1>
</div>
<div class="left2">
<left2></left2>
</div>
<!-- <div class="bg1"></div> -->
<div class="center1">
<center1></center1>
</div>
<div class="center2">
<center2></center2>
</div>
<div class="right1">
<right1></right1>
</div>
<div class="center1">
<center1></center1>
</div>
<div class="center2">
<center2></center2>
</div>
<div class="right1">
<right1></right1>
</div>
<div class="right2">
<right2></right2>
</div>
<!-- <div class="right1">
<div class="right2">
<right2></right2>
</div>
<!-- <div class="right1">
<right1></right1>
</div>
<div class="right2">
@ -33,98 +33,98 @@
<div class="bottom2">
<bottom2></bottom2>
</div> -->
</div>
</div>
</template>
<script>
import scalseBox from '../components/scaleBox.vue'
import bigScreenHead from '../components/bigScreenHead/index.vue'
import rocketTit from '../components/rocketTit/index.vue'
import container1 from '../components/container1/index.vue'
import scalseBox from "../components/scaleBox.vue";
import bigScreenHead from "../components/bigScreenHead/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import container1 from "../components/container1/index.vue";
import left1 from './left1.vue'
import left2 from './left2.vue'
import center1 from './center.vue'
import center2 from './center2.vue'
import right1 from './right1.vue'
import right2 from './right2.vue'
import bottom1 from './bottom1.vue'
import bottom2 from './bottom2.vue'
import left1 from "./left1.vue";
import left2 from "./left2.vue";
import center1 from "./center.vue";
import center2 from "./center2.vue";
import right1 from "./right1.vue";
import right2 from "./right2.vue";
import bottom1 from "./bottom1.vue";
import bottom2 from "./bottom2.vue";
export default {
name: 'DrivingCabin',
components: {
scalseBox,
bigScreenHead,
rocketTit,
container1,
left1,
left2,
center1,
right1,
right2,
bottom1,
bottom2,
center2,
},
}
name: "DrivingCabin",
components: {
scalseBox,
bigScreenHead,
rocketTit,
container1,
left1,
left2,
center1,
right1,
right2,
bottom1,
bottom2,
center2,
},
};
</script>
<style lang="scss" scoped>
.drivingCabin {
position: relative;
width: 100%;
// background-image: url("../img/bg.png");
background-size: cover;
.bg1 {
position: absolute;
bottom: 0;
left: 0;
width: 1920px;
height: 485px;
background-image: url('../img/bg-1.png');
background-size: cover;
}
position: relative;
width: 100%;
// background-image: url("../img/bg.png");
background-size: cover;
.bg1 {
position: absolute;
bottom: 0;
left: 0;
width: 1920px;
height: 485px;
background-image: url("../img/bg-1.png");
background-size: cover;
}
}
.left1 {
position: absolute;
top: 3px;
left: 24px;
position: absolute;
top: 3px;
left: 24px;
}
.left2 {
position: absolute;
top: 605px;
left: 24px;
position: absolute;
top: 605px;
left: 24px;
}
.center1 {
position: absolute;
top: 3px;
left: 578px;
position: absolute;
top: 3px;
left: 578px;
}
.center2 {
position: absolute;
top: 605px;
left: 710px;
position: absolute;
top: 605px;
left: 710px;
}
.right1 {
position: absolute;
top: 3px;
right: 24px;
position: absolute;
top: 3px;
right: 24px;
}
.right2 {
position: absolute;
top: 605px;
right: 24px;
position: absolute;
top: 605px;
right: 24px;
}
.bottom1 {
position: absolute;
bottom: 16px;
left: 24px;
position: absolute;
bottom: 16px;
left: 24px;
}
.bottom2 {
position: absolute;
bottom: 16px;
right: 24px;
position: absolute;
bottom: 16px;
right: 24px;
}
</style>

7
src/views/bigScreen/drivingCabin/left1.vue
View File

@ -110,13 +110,18 @@ export default {
data: titData,
orient: "vertical",
// left: '60%',
right: "2%",
right: "10%",
y: "center",
textStyle: {
//图例文字的样式
color: "#fff",
fontSize: 16,
},
pageTextStyle: {
color: "#fff",
},
pageIconColor: "#fff",
pageIconInactiveColor: "#ccc",
// formatter: value => {
// return value + calcAverageValue(this.data, value)
// },

162
src/views/bigScreen/management/index.vue
View File

@ -1,27 +1,27 @@
<template>
<div class="management">
<div class="left1">
<left1></left1>
</div>
<div class="left2">
<left2></left2>
</div>
<!-- <div class="bg1"></div> -->
<div class="management">
<div class="left1">
<left1></left1>
</div>
<div class="left2">
<left2></left2>
</div>
<!-- <div class="bg1"></div> -->
<div class="center1">
<center1></center1>
</div>
<!-- <div class="center2">
<div class="center1">
<center1></center1>
</div>
<!-- <div class="center2">
<center2></center2>
</div> -->
<div class="right1">
<right1></right1>
</div>
<div class="right1">
<right1></right1>
</div>
<div class="right2">
<right2></right2>
</div>
<!-- <div class="right1">
<div class="right2">
<right2></right2>
</div>
<!-- <div class="right1">
<right1></right1>
</div>
<div class="right2">
@ -33,94 +33,94 @@
<div class="bottom2">
<bottom2></bottom2>
</div> -->
</div>
</div>
</template>
<script>
import scalseBox from '../components/scaleBox.vue'
import bigScreenHead from '../components/bigScreenHead/index.vue'
import rocketTit from '../components/rocketTit/index.vue'
import container1 from '../components/container1/index.vue'
import scalseBox from "../components/scaleBox.vue";
import bigScreenHead from "../components/bigScreenHead/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import container1 from "../components/container1/index.vue";
import left1 from './left1.vue'
import left2 from './left2.vue'
import center1 from './center.vue'
import center2 from './center2.vue'
import right1 from './right1.vue'
import right2 from './right2.vue'
import left1 from "./left1.vue";
import left2 from "./left2.vue";
import center1 from "./center.vue";
import center2 from "./center2.vue";
import right1 from "./right1.vue";
import right2 from "./right2.vue";
export default {
name: 'Management',
components: {
scalseBox,
bigScreenHead,
rocketTit,
container1,
left1,
left2,
center1,
right1,
right2,
center2,
},
}
name: "Management",
components: {
scalseBox,
bigScreenHead,
rocketTit,
container1,
left1,
left2,
center1,
right1,
right2,
center2,
},
};
</script>
<style lang="scss" scoped>
.management {
position: relative;
width: 100%;
// background-image: url("../img/bg.png");
background-size: cover;
.bg1 {
position: absolute;
bottom: 0;
left: 0;
width: 1920px;
height: 485px;
background-image: url('../img/bg-1.png');
background-size: cover;
}
position: relative;
width: 100%;
// background-image: url("../img/bg.png");
background-size: cover;
.bg1 {
position: absolute;
bottom: 0;
left: 0;
width: 1920px;
height: 485px;
background-image: url("../img/bg-1.png");
background-size: cover;
}
}
.left1 {
position: absolute;
top: 3px;
left: 24px;
position: absolute;
top: 3px;
left: 24px;
}
.left2 {
position: absolute;
top: 605px;
left: 24px;
position: absolute;
top: 605px;
left: 24px;
}
.center1 {
position: absolute;
top: 3px;
left: 578px;
position: absolute;
top: 3px;
left: 578px;
}
.center2 {
position: absolute;
top: 605px;
left: 710px;
position: absolute;
top: 605px;
left: 710px;
}
.right1 {
position: absolute;
top: 3px;
right: 24px;
position: absolute;
top: 3px;
right: 24px;
}
.right2 {
position: absolute;
top: 605px;
right: 24px;
position: absolute;
top: 605px;
right: 24px;
}
.bottom1 {
position: absolute;
bottom: 16px;
left: 24px;
position: absolute;
bottom: 16px;
left: 24px;
}
.bottom2 {
position: absolute;
bottom: 16px;
right: 24px;
position: absolute;
bottom: 16px;
right: 24px;
}
</style>

623
src/views/bigScreen/management/left1.vue
View File

@ -1,11 +1,30 @@
<template>
<div>
<container2 title="战略指标">
<el-pagination
small
slot="datePicker"
layout="prev, pager, next"
background
:total="total"
:page-size="2"
:current-page.sync="currentPage1"
@current-change="handleCurrentChange"
>
</el-pagination>
<div style="height: 100%; width: 100%" ref="chart"></div>
</container2>
<container2 title="综合指标" style="margin-top: 10px">
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['完成率', '明细']"></bigScreenTabs>
<el-row style="height: 100%; width: 100%; padding: 0 0 5px 15px" :gutter="10" v-if="index == 0">
<bigScreenTabs
slot="datePicker"
v-model="index"
:titleArr="['完成率', '明细']"
></bigScreenTabs>
<el-row
style="height: 100%; width: 100%; padding: 0 0 5px 15px"
:gutter="10"
v-if="index == 0"
>
<el-col style="height: 100%" :span="16">
<div style="height: 100%; width: 100%" ref="chart2"></div>
</el-col>
@ -16,7 +35,10 @@
<span style="font-size: 25px; margin-right: 3px">·</span>
<span>0进展指标</span>
</div>
<div style="text-align: center"><span class="num">{{zeroTotal}}</span> <span style="fong-size: 14px">个</span></div>
<div style="text-align: center">
<span class="num">{{ zeroTotal }}</span>
<span style="fong-size: 14px">个</span>
</div>
</div>
<div>
<div class="box">
@ -26,14 +48,22 @@
<div style="padding: 5px 30px 10px">
<progressBar :percentage="rate" />
</div>
<div style="text-align: center"><span class="num">{{rate}}%</span></div>
<div style="text-align: center">
<span class="num">{{ rate }}%</span>
</div>
</div>
</section>
</el-col>
</el-row>
<el-row v-else style="height: 100%; width: 100%; padding: 0 10px 0 20px">
<el-col :span="24" style="margin-bottom: 1px">
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
<el-row
style="
height: 42px;
line-height: 42px;
background: rgba(0, 255, 255, 0.3);
"
>
<el-col style="text-align: center" :span="3">序号</el-col>
<el-col style="text-align: center" :span="5">项目名称</el-col>
<el-col style="text-align: center" :span="5">部门</el-col>
@ -41,23 +71,58 @@
<el-col style="text-align: center" :span="4">完成情况</el-col>
</el-row>
</el-col>
<vue-seamless-scroll ref="seamlessScroll" :data="listData" class="warp-scroll" :class-option="{
singleHeight: 43,
}" style="height: 168px">
<vue-seamless-scroll
ref="seamlessScroll"
:data="listData"
class="warp-scroll"
:class-option="{
singleHeight: 43,
}"
style="height: 168px"
>
<ul class="item">
<li v-for="item in scrollList" :key="item.id">
<el-row>
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
<el-col style="text-align: center" :title="item.projectName" :span="5">{{ item.projectName }}</el-col>
<el-col style="text-align: center" :title="item.deptName" :span="5"> {{item.deptName}}</el-col>
<el-col style="text-align: center" :span="7">{{item.todayDate}}</el-col>
<el-col style="text-align: center" :span="3">{{
item.id
}}</el-col>
<el-col
style="text-align: center"
:title="item.projectName"
:span="5"
>{{ item.projectName }}</el-col
>
<el-col
style="text-align: center"
:title="item.deptName"
:span="5"
>
{{ item.deptName }}</el-col
>
<el-col style="text-align: center" :span="7">{{
item.todayDate
}}</el-col>
<el-col style="text-align: center" :span="4">
<section class="box">
<span v-if="item.completedStatus == '已完成'" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
<span v-else-if="item.completedStatus == '未完成'" style="color: #f64f58; font-size: 25px; margin-right: 3px">·</span>
<span v-else style="color: #fa8c16; font-size: 25px; margin-right: 3px">·</span>
<span
v-if="item.completedStatus == '已完成'"
style="color: #6fd1b4; font-size: 25px; margin-right: 3px"
>·</span
>
<span
v-else-if="item.completedStatus == '未完成'"
style="color: #f64f58; font-size: 25px; margin-right: 3px"
>·</span
>
<span
v-else
style="color: #fa8c16; font-size: 25px; margin-right: 3px"
>·</span
>
<span v-if="item.completedStatus == '已完成'">已完成</span>
<span v-else-if="item.completedStatus == '未完成'">未完成</span>
<span v-else-if="item.completedStatus == '未完成'"
>未完成</span
>
<span v-else>进行中</span>
</section>
</el-col>
@ -71,19 +136,19 @@
</template>
<script>
import rocketTit from '../components/rocketTit/index.vue'
import container2 from './components/container2/index.vue'
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
import progressBar from '@/views/bigScreen/components/progress/index.vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
import colorList from '@/utils/colorPalette'
import rocketTit from "../components/rocketTit/index.vue";
import container2 from "./components/container2/index.vue";
import bigScreenTabs from "../components/bigScreenTabs/index.vue";
import progressBar from "@/views/bigScreen/components/progress/index.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import colorList from "@/utils/colorPalette";
// import {Liquid} from '@antv/g2plot';
// import resize from '../../dashboard/mixins/resize'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
export default {
// mixins: [resize],
name: 'left1',
name: "left1",
components: {
rocketTit,
container2,
@ -91,253 +156,271 @@ export default {
progressBar,
vueSeamlessScroll,
},
data () {
data() {
return {
currentPage1: 1,
dataList: [],
total: 0,
index: 0,
chart: null,
chart2: null,
listData: [1, 2, 3, 4, 5, 6, 7, 8],
zeroTotal: 0,
rate: 0,
scrollList: [
],
scrollList: [],
colorList,
}
};
},
mounted () {
mounted() {
this.$nextTick(() => {
this.initChart()
this.initLine()
})
this.initChart();
this.initLine();
});
},
beforeDestroy () { },
beforeDestroy() {},
watch: {
index (newVal, oldVal) {
index(newVal, oldVal) {
if (newVal == 0) {
this.$nextTick(() => {
this.initLine()
})
this.initLine();
});
} else {
this.$nextTick(() => {
this.getData()
})
this.getData();
});
}
},
},
methods: {
initChart () {
initChart() {
this.request({
url: '/hx/operating/getHxStrategyIndexPic',
method: 'get',
}).then(res => {
url: "/hx/operating/getHxStrategyIndexPic",
method: "get",
}).then((res) => {
if (200 == res.code) {
let list = [];
if (res.data.length > 2) {
list = res.data.splice(0, 2);
if (res.data.length % 2 == 0) {
this.total = res.data.length;
this.dataList = res.data;
} else {
list = res.data;
this.total = res.data.length - 1;
res.data.splice(this.total);
this.dataList = res.data;
this.setData(this.dataList.slice(0, 2));
}
this.chart = echarts.init(this.$refs.chart, 'macarons')
let arr1 = [
...(list[0].value.map(e => parseInt(e.startNumber))),
...(list[0].value.map(e => parseInt(e.endNumber))),
...(list[0].value.map(e => parseInt(e.yearTarget))),
];
let max0 = Math.max.apply(null, arr1);
let arr2 = [
...(list[1].value.map(e => parseInt(e.startNumber))),
...(list[1].value.map(e => parseInt(e.endNumber))),
...(list[1].value.map(e => parseInt(e.yearTarget))),
];
let max1 = Math.max.apply(null, arr2);
this.chart.setOption({
title: [
{
text: list[0].key,
left: '19%',
bottom: 5,
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontWeight: '600',
fontFamily: 'sans-serif',
fontSize: 18,
},
},
{
text: list[1].key,
left: '65%',
bottom: 5,
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontWeight: '600',
fontFamily: 'sans-serif',
fontSize: 18,
},
},
],
tooltip: {
trigger: 'axis',
},
legend: {
left: 'center',
data: ['初期', '当年目标', '末期'],
textStyle: {
color: '#fff',
},
},
color: ['#5AD8A6', '#F6D97E', '#5B8FF9'],
radar: [
{
indicator: [
...list[0].value.map((e, index) => {
if (index == 0) {
// return { name: e.indexName, axisLabel: { show: true }, color: '#fff' };
return {
name: e.indexName,
max: max0,
axisLabel: { show: true }, color: '#fff'
}
}
return {
name: e.indexName,
// max: Math.max(...list[0].value.map(e => e.startNumber),...list[0].value.map(e => e.indexName),...list[0].value.map(e => e.endNumber) )
}
}),
// { name: '登陆频次', max: 6500, axisLabel: { show: true }, color: '#fff' },
],
center: ['25.5%', '50%'],
radius: 50,
name: {
// (圆外的标签)雷达图每个指示器名称的配置项。
textStyle: {
color: '#fff',
},
},
// 最大值
axisLabel: {
color: '#fff',
},
},
{
indicator: [
...list[1].value.map((e, index) => {
if (index == 0) {
// return { name: e.indexName, axisLabel: { show: true }, color: '#fff' };
return {
name: e.indexName,
max: max1,
axisLabel: { show: true }, color: '#fff'
}
}
return {
name: e.indexName,
max: max1,
// max: Math.max(...list[0].value.map(e => e.startNumber),...list[0].value.map(e => e.indexName),...list[0].value.map(e => e.endNumber) )
}
}),
// { name: '登陆频次', max: 6500, axisLabel: { show: true } },
// { name: '指标二', max: 16000 },
// { name: '指标三', max: 30000 },
// { name: '指标四', max: 38000 },
// { name: '指标五', max: 52000 },
// { name: '指标七', max: 25000 },
],
radius: 50,
center: ['75%', '50%'],
// 最大值
name: {
// (圆外的标签)雷达图每个指示器名称的配置项。
textStyle: {
color: '#fff',
},
},
axisLabel: {
color: '#fff',
},
},
],
series: [
{
type: 'radar',
data: [
{
value: list[0].value.map(e => e.startNumber),
name: '初期',
label: {
normal: {
// show: true,
color: '#fff',
},
},
},
{
value: list[0].value.map(e => e.yearTarget),
name: '当年目标',
},
{
value: list[0].value.map(e => e.endNumber),
name: '末期',
},
],
},
{
type: 'radar',
radarIndex: 1,
data: [
{
value: list[1].value.map(e => e.startNumber),
name: '初期',
},
{
value: list[1].value.map(e => e.yearTarget),
name: '当年目标',
},
{
value: list[1].value.map(e => e.endNumber),
name: '末期',
},
],
},
],
})
// if (res.data.length > 2) {
// list = res.data.splice(0, 2);
// } else {
// list = res.data;
// }
}
});
},
initLine () {
handleCurrentChange(val) {
this.currentPage1 = val;
const data = this.dataList.slice(val * 2 - 2, val * 2);
this.setData(data);
},
setData(list) {
this.chart = echarts.init(this.$refs.chart, "macarons");
let arr1 = [
...list[0].value.map((e) => parseInt(e.startNumber)),
...list[0].value.map((e) => parseInt(e.endNumber)),
...list[0].value.map((e) => parseInt(e.yearTarget)),
];
let max0 = Math.max.apply(null, arr1);
let arr2 = [
...list[1].value.map((e) => parseInt(e.startNumber)),
...list[1].value.map((e) => parseInt(e.endNumber)),
...list[1].value.map((e) => parseInt(e.yearTarget)),
];
let max1 = Math.max.apply(null, arr2);
this.setEchars(list, max0, max1);
},
setEchars(list, max0, max1) {
this.chart.setOption({
title: [
{
text: list[0].key,
left: "19%",
bottom: 5,
textStyle: {
color: "#fff",
fontStyle: "normal",
fontWeight: "600",
fontFamily: "sans-serif",
fontSize: 18,
},
},
{
text: list[1].key,
left: "65%",
bottom: 5,
textStyle: {
color: "#fff",
fontStyle: "normal",
fontWeight: "600",
fontFamily: "sans-serif",
fontSize: 18,
},
},
],
tooltip: {
trigger: "axis",
},
legend: {
left: "center",
data: ["初期", "当年目标", "末期"],
textStyle: {
color: "#fff",
},
},
color: ["#5AD8A6", "#F6D97E", "#5B8FF9"],
radar: [
{
indicator: [
...list[0].value.map((e, index) => {
if (index == 0) {
// return { name: e.indexName, axisLabel: { show: true }, color: '#fff' };
return {
name: e.indexName,
max: max0,
axisLabel: { show: true },
color: "#fff",
};
}
return {
name: e.indexName,
// max: Math.max(...list[0].value.map(e => e.startNumber),...list[0].value.map(e => e.indexName),...list[0].value.map(e => e.endNumber) )
};
}),
// { name: '登陆频次', max: 6500, axisLabel: { show: true }, color: '#fff' },
],
center: ["25.5%", "50%"],
radius: 50,
name: {
// (圆外的标签)雷达图每个指示器名称的配置项。
textStyle: {
color: "#fff",
},
},
// 最大值
axisLabel: {
color: "#fff",
},
},
{
indicator: [
...list[1].value.map((e, index) => {
if (index == 0) {
// return { name: e.indexName, axisLabel: { show: true }, color: '#fff' };
return {
name: e.indexName,
max: max1,
axisLabel: { show: true },
color: "#fff",
};
}
return {
name: e.indexName,
max: max1,
// max: Math.max(...list[0].value.map(e => e.startNumber),...list[0].value.map(e => e.indexName),...list[0].value.map(e => e.endNumber) )
};
}),
// { name: '登陆频次', max: 6500, axisLabel: { show: true } },
// { name: '指标二', max: 16000 },
// { name: '指标三', max: 30000 },
// { name: '指标四', max: 38000 },
// { name: '指标五', max: 52000 },
// { name: '指标七', max: 25000 },
],
radius: 50,
center: ["75%", "50%"],
// 最大值
name: {
// (圆外的标签)雷达图每个指示器名称的配置项。
textStyle: {
color: "#fff",
},
},
axisLabel: {
color: "#fff",
},
},
],
series: [
{
type: "radar",
data: [
{
value: list[0].value.map((e) => e.startNumber),
name: "初期",
label: {
normal: {
// show: true,
color: "#fff",
},
},
},
{
value: list[0].value.map((e) => e.yearTarget),
name: "当年目标",
},
{
value: list[0].value.map((e) => e.endNumber),
name: "末期",
},
],
},
{
type: "radar",
radarIndex: 1,
data: [
{
value: list[1].value.map((e) => e.startNumber),
name: "初期",
},
{
value: list[1].value.map((e) => e.yearTarget),
name: "当年目标",
},
{
value: list[1].value.map((e) => e.endNumber),
name: "末期",
},
],
},
],
});
},
initLine() {
this.request({
url: '/hx/operating/getHxSynthesizeIndexPic',
method: 'get',
params: { type: 1 }
}).then(res => {
url: "/hx/operating/getHxSynthesizeIndexPic",
method: "get",
params: { type: 1 },
}).then((res) => {
if (200 == res.code) {
let { list, zeroTotal, rate } = res.data;
this.rate = parseInt(rate);
this.zeroTotal = zeroTotal;
this.chart2 = echarts.init(this.$refs.chart2)
this.chart2 = echarts.init(this.$refs.chart2);
this.chart2.setOption({
legend: {
data: ['实际', '完成率'],
data: ["实际", "完成率"],
textStyle: {
color: '#fff',
color: "#fff",
},
},
grid: {
left: '3%',
right: '6%',
bottom: '3%',
left: "3%",
right: "6%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: 'category',
data: list.map(e => e.dept),
type: "category",
data: list.map((e) => e.dept),
// data: [
// '2021-01',
// '2021-02',
@ -353,24 +436,24 @@ export default {
// '2021-12',
// ],
axisPointer: {
type: 'shadow',
type: "shadow",
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
color: "rgb(255, 255, 255)",
},
},
},
],
yAxis: [
{
type: 'value',
name: '件',
type: "value",
name: "件",
min: 0,
// max: 250,
// interval: 50,
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
splitLine: {
show: false, //不显示网格线
@ -380,15 +463,15 @@ export default {
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
color: "rgb(255, 255, 255)",
},
},
},
{
type: 'value',
type: "value",
min: 0,
axisLabel: {
formatter: '{value} %',
formatter: "{value} %",
},
splitLine: {
show: false, //不显示网格线
@ -398,72 +481,88 @@ export default {
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
color: "rgb(255, 255, 255)",
},
},
},
],
grid: {
containLabel: true,
width: '99%',
width: "99%",
left: 0,
top: 50,
bottom: 50,
},
dataZoom: {
type: 'slider',
type: "slider",
start: 0,
end: this.dataZoomEnd(list.length, 5),
},
series: [
{
name: '实际',
type: 'bar',
name: "实际",
type: "bar",
barWidth: 20,
data: list.map(e => e.completeTotal),
data: list.map((e) => e.completeTotal),
// data: [75.6, 82.2, 26.4, 28.7, 70.7, 50.7, 60.7, 70.7, 80.7, 48.7, 18.8],
itemStyle: {
color: '#F6D97E',
color: "#F6D97E",
},
},
{
name: '完成率',
type: 'line',
name: "完成率",
type: "line",
yAxisIndex: 1,
smooth: false,
data: list.map(e => (e.completeTotal / e.total) * 100),
data: list.map((e) => (e.completeTotal / e.total) * 100),
// data: [80, 70, 80, 70, 80, 70, 80, 70, 80, 70, 80, 70],
itemStyle: {
color: '#F64F58',
color: "#F64F58",
},
symbol: 'none',
symbol: "none",
},
],
})
});
} else {
this.$message.error(res.msg);
}
})
});
},
getData () {
getData() {
this.request({
url: '/hx/operating/getHxSynthesizeIndexPic',
method: 'get',
params: { type: 2 }
}).then(res=> {
if(200 == res.code) {
url: "/hx/operating/getHxSynthesizeIndexPic",
method: "get",
params: { type: 2 },
}).then((res) => {
if (200 == res.code) {
this.scrollList = res.data.list;
this.$refs.seamlessScroll.reset();
}
})
});
},
},
}
};
</script>
<style lang="scss" scoped>
::v-deep.el-pagination button {
color: #fff !important;
background-color: unset !important;
}
::v-deep.el-pagination button:disabled {
color: #ccc !important;
}
::v-deep.el-pagination.is-background .el-pager li {
color: rgba(255, 255, 255, 0.65);
background: rgba(145, 213, 254, 0.2) !important;
&:hover {
color: #fff;
}
}
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
background: linear-gradient(270deg, #3661a8 0%, #8bb1ed 100%) !important;
}
.warp-scroll {
height: 126px;
width: 100%;

437
src/views/bigScreen/management/left2.vue
View File

@ -1,18 +1,32 @@
<template>
<div>
<container3 title="军用产业">
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['总厂情况', '合同信息', '本月情况']"></bigScreenTabs>
<bigScreenTabs
slot="datePicker"
v-model="index"
:titleArr="['总厂情况', '合同信息', '本月情况']"
></bigScreenTabs>
<div style="height: 100%" v-if="index == 0">
<div style="display: flex; position: relative">
<div style="display: flex; justify-content: center; align-items: center">
<span style="font-size: 25px">·</span><span>收入</span>
<i style="font-size: 24px; font-weight: bold; color: #91d5fe">{{total.realIncome}}/<i
style="font-size: 18px">{{total.targetIncome}}</i></i> 万
<div style="margin-left: 15px">
<span style="font-size: 25px">·</span>收入
<i style="font-size: 24px; font-weight: bold; color: #91d5fe"
>{{ handleMillion(total.realIncome) }}/<i
style="font-size: 18px"
>{{ handleMillion(total.targetIncome) }}</i
></i
>
亿
</div>
<div style="margin-left: 30px">
<span style="font-size: 25px">·</span>利润
<i style="font-size: 24px; font-weight: bold; color: #91d5fe">{{total.realProfit}}/<i
style="font-size: 18px">{{total.targetProfit}}</i></i> 万
<i style="font-size: 24px; font-weight: bold; color: #91d5fe"
>{{ handleMillion(total.realProfit) }}/<i
style="font-size: 18px"
>{{ handleMillion(total.targetProfit) }}</i
></i
>
亿
</div>
</div>
<div style="display: flex; height: calc(100% - 33px)">
@ -29,20 +43,31 @@
<img src="./img/left2/2.png" alt="" />
</div>
<div style="margin: 5px 0 10px; color: #ccc">签订总数</div>
<div style="font-size: 30px">{{totalAndAmount.total}}</div>
<div style="font-size: 30px">{{ totalAndAmount.total }}</div>
</div>
<div class="_item">
<div>
<img src="./img/left2/3.png" alt="" />
</div>
<div style="margin: 5px 0 10px; color: #ccc">金额</div>
<div><span style="font-size: 30px">{{totalAndAmount.amount}}</span><span style="color: #ccc">w</span></div>
<div>
<span style="font-size: 30px">{{
handleMillion(totalAndAmount.amount)
}}</span
><span style="color: #ccc">亿</span>
</div>
</div>
</div>
</el-col>
<el-col :span="19" style="height: 100%">
<div style="height: 100%; padding-right: 30px">
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
<el-row
style="
height: 42px;
line-height: 42px;
background: rgba(0, 255, 255, 0.3);
"
>
<el-col style="text-align: center" :span="3">序号</el-col>
<el-col style="text-align: center" :span="5">合同名称</el-col>
<el-col style="text-align: center" :span="3">数量</el-col>
@ -50,32 +75,88 @@
<el-col style="text-align: center" :span="3">生产情况</el-col>
<el-col style="text-align: center" :span="3">结算情况</el-col>
</el-row>
<vue-seamless-scroll :data="listData" class="warp-scroll" :class-option="{
singleHeight: 43,
}">
<vue-seamless-scroll
:data="scrollList"
class="warp-scroll"
:class-option="{
singleHeight: 43,
}"
>
<ul class="item">
<li v-for="item in scrollList" :key="item.id">
<el-row>
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
<el-col style="text-align: center" :title="item.contractName" :span="5">{{ item.contractName }}</el-col>
<el-col style="text-align: center" :title="item.planQuantity" :span="3">{{ item.planQuantity }}</el-col>
<el-col style="text-align: center" :span="5">{{ item.contractAmount }}</el-col>
<el-col style="text-align: center" :span="3">{{
item.id
}}</el-col>
<el-col
style="text-align: center"
:title="item.contractName"
:span="5"
>{{ item.contractName }}</el-col
>
<el-col
style="text-align: center"
:title="item.planQuantity"
:span="3"
>{{ item.planQuantity }}</el-col
>
<el-col style="text-align: center" :span="5">{{
item.contractAmount
}}</el-col>
<el-col style="text-align: center" :span="3">
<section class="box">
<span v-if="item.productionStatus == '进行中'" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
<span v-else-if="item.productionStatus == '未完成'"
style="color: #f64f58; font-size: 25px; margin-right: 3px">·</span>
<span v-else style="font-size: 25px; margin-right: 3px">·</span>
<span>{{item.productionStatus}}</span>
<span
v-if="item.productionStatus == '进行中'"
style="
color: #6fd1b4;
font-size: 25px;
margin-right: 3px;
"
>·</span
>
<span
v-else-if="item.productionStatus == '未完成'"
style="
color: #f64f58;
font-size: 25px;
margin-right: 3px;
"
>·</span
>
<span
v-else
style="font-size: 25px; margin-right: 3px"
>·</span
>
<span>{{ item.productionStatus }}</span>
</section>
</el-col>
<el-col style="text-align: center" :span="3">
<section class="box">
<span v-if="item.settlementStatus == '已结算'" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
<span v-else-if="item.settlementStatus == '未结算'"
style="color: #f64f58; font-size: 25px; margin-right: 3px">·</span>
<span v-else style="font-size: 25px; margin-right: 3px">·</span>
<span>{{item.settlementStatus}}</span>
<span
v-if="item.settlementStatus == '已结算'"
style="
color: #6fd1b4;
font-size: 25px;
margin-right: 3px;
"
>·</span
>
<span
v-else-if="item.settlementStatus == '未结算'"
style="
color: #f64f58;
font-size: 25px;
margin-right: 3px;
"
>·</span
>
<span
v-else
style="font-size: 25px; margin-right: 3px"
>·</span
>
<span>{{ item.settlementStatus }}</span>
</section>
</el-col>
</el-row>
@ -94,20 +175,20 @@
</template>
<script>
import scalseBox from '../components/scaleBox.vue'
import bigScreenHead from '../components/bigScreenHead/index.vue'
import rocketTit from '../components/rocketTit/index.vue'
import container3 from './components/container3/index.vue'
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
import colorList from '@/utils/colorPalette'
import scalseBox from "../components/scaleBox.vue";
import bigScreenHead from "../components/bigScreenHead/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import container3 from "./components/container3/index.vue";
import bigScreenTabs from "../components/bigScreenTabs/index.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import colorList from "@/utils/colorPalette";
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";
export default {
mixins: [resize],
name: 'left2',
name: "left2",
components: {
scalseBox,
bigScreenHead,
@ -116,7 +197,7 @@ export default {
bigScreenTabs,
vueSeamlessScroll,
},
data () {
data() {
return {
index: 0,
chart: null,
@ -146,37 +227,37 @@ export default {
},
{
id: 2,
name: 'Mason Herrera',
name: "Mason Herrera",
number: 92,
money: 1227,
money: 4570,
status: 3,
},
],
}
};
},
watch: {
index (newVal, oldVal) {
index(newVal, oldVal) {
if (newVal == 0) {
if (this.chart3) {
this.chart3.dispose()
this.chart3 = null
this.chart3.dispose();
this.chart3 = null;
}
this.$nextTick(() => {
this.initChart()
})
this.initChart();
});
} else if (newVal == 2) {
if (this.chart) {
this.chart.dispose()
this.chart = null
this.chart.dispose();
this.chart = null;
}
this.$nextTick(() => {
this.initChart3()
})
this.initChart3();
});
} else {
this.$nextTick(() => {
this.getData()
})
this.getData();
});
// this.chart1.dispose()
// this.chart2.dispose()
// this.chart3.dispose()
@ -186,54 +267,54 @@ export default {
}
},
},
mounted () {
mounted() {
this.$nextTick(() => {
this.initChart()
})
this.initChart();
});
},
beforeDestroy () {
beforeDestroy() {
if (!this.chart) {
return
return;
}
this.chart.dispose()
this.chart = null
this.chart.dispose();
this.chart = null;
},
methods: {
getData () {
getData() {
this.request({
url: '/hx/operating/getMilitaryIndustryPic',
method: 'get',
params: { type: 2 }
}).then(res => {
url: "/hx/operating/getMilitaryIndustryPic",
method: "get",
params: { type: 2 },
}).then((res) => {
if (200 == res.code) {
this.scrollList = res.data.list;
this.$refs.seamlessScroll.reset();
}
})
});
},
initChart () {
initChart() {
this.request({
url: '/hx/operating/getMilitaryIndustryPic',
method: 'get',
url: "/hx/operating/getMilitaryIndustryPic",
method: "get",
// (type=1总厂情况-2=合同信息-3本月情况)
params: { type: 1 }
}).then(res => {
params: { type: 1 },
}).then((res) => {
if (200 == res.code) {
let { total, modelTotal, list } = res.data;
this.total = total;
this.chart = echarts.init(this.$refs.chart)
this.chart = echarts.init(this.$refs.chart);
this.initChart2(modelTotal);
this.chart.setOption({
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'shadow',
type: "shadow",
},
},
legend: {
data: ['利润', '收入', '收入完成率', '利润完成率'],
data: ["利润", "收入", "收入完成率", "利润完成率"],
textStyle: {
color: '#fff', //legend字体颜色
color: "#fff", //legend字体颜色
},
},
grid: {
@ -244,51 +325,51 @@ export default {
containLabel: true,
},
dataZoom: {
type: 'slider',
type: "slider",
start: 0,
textStyle: {
color: '#fff',
color: "#fff",
},
},
xAxis: [
{
type: 'category',
data: list.map(e => e.month),
type: "category",
data: list.map((e) => e.month),
// data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
color: "rgb(255, 255, 255)",
},
},
},
],
yAxis: [
{
name: '个',
name: "个",
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'],
color: ["rgba(255, 255, 255,.5)"],
},
},
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
color: "rgb(255, 255, 255)",
},
},
},
{
type: 'value',
type: "value",
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value} %',
formatter: "{value} %",
},
splitLine: {
show: false, //不显示网格线
@ -298,84 +379,84 @@ export default {
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
color: "rgb(255, 255, 255)",
},
},
},
],
series: [
{
name: '收入',
type: 'bar',
name: "收入",
type: "bar",
emphasis: {
focus: 'series',
focus: "series",
},
z: '-1',
barGap: '-100%',
z: "-1",
barGap: "-100%",
itemStyle: {
color: '#53C19D',
color: "#53C19D",
},
barWidth: 30,
data: list.map(e => e.realIncome)
data: list.map((e) => e.realIncome),
// data: [100, 232, 201, 154, 190, 330, 410],
},
{
name: '利润',
type: 'bar',
name: "利润",
type: "bar",
emphasis: {
focus: 'series',
focus: "series",
},
itemStyle: {
color: '#8BB1ED',
color: "#8BB1ED",
},
barWidth: 30,
data: list.map(e => e.realProfit)
data: list.map((e) => e.realProfit),
},
{
name: '收入完成率',
type: 'line',
name: "收入完成率",
type: "line",
smooth: false,
yAxisIndex: 1,
data: list.map(e => e.realIncome / e.targetIncome * 100),
data: list.map((e) => (e.realIncome / e.targetIncome) * 100),
// data: [500, 550, 700, 520, 650, 520, 550],
itemStyle: {
color: '#53C19D',
color: "#53C19D",
},
symbol: 'none',
symbol: "none",
},
{
name: '利润完成率',
type: 'line',
name: "利润完成率",
type: "line",
smooth: false,
itemStyle: {
color: '#8BB1ED',
color: "#8BB1ED",
},
yAxisIndex: 1,
data: list.map(e => e.realProfit / e.targetProfit * 100),
symbol: 'none',
data: list.map((e) => (e.realProfit / e.targetProfit) * 100),
symbol: "none",
},
],
})
});
} else {
this.$message.error(res.msg);
}
})
});
},
initChart2 (modelTotal) {
this.chart2 = echarts.init(this.$refs.chart2)
initChart2(modelTotal) {
this.chart2 = echarts.init(this.$refs.chart2);
this.chart2.setOption({
tooltip: {
trigger: 'item',
trigger: "item",
},
title: {
text: '型号情况',
text: "型号情况",
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontWeight: '600',
fontFamily: 'sans-serif',
color: "#fff",
fontStyle: "normal",
fontWeight: "600",
fontFamily: "sans-serif",
fontSize: 18,
},
},
@ -388,26 +469,26 @@ export default {
// },
series: [
{
name: '名称',
type: 'pie',
center: ['40%', '50%'],
radius: [0, '45%'],
name: "名称",
type: "pie",
center: ["40%", "50%"],
radius: [0, "45%"],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
position: "center",
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold',
fontSize: "40",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: modelTotal.map(e => {
data: modelTotal.map((e) => {
return { value: e.realIncome, name: e.model };
}),
// data: [
@ -419,74 +500,73 @@ export default {
// ],
itemStyle: {
opacity: 0.7,
color: '#55C5A2',
color: "#55C5A2",
borderWidth: 3,
borderColor: '#fff',
borderColor: "#fff",
},
label: {
show: true,
position: 'inner',
position: "inner",
formatter: "{b}",
textStyle: {
color: '#fff'
}
}
color: "#fff",
},
},
// color: blueColorList,
},
{
name: '名称',
type: 'pie',
radius: ['45%', '80%'],
center: ['40%', '50%'],
name: "名称",
type: "pie",
radius: ["45%", "80%"],
center: ["40%", "50%"],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
position: "center",
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold',
fontSize: "40",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: modelTotal.map(e => {
data: modelTotal.map((e) => {
return { value: e.realProfit, name: e.model };
}),
itemStyle: {
opacity: 0.7,
color: '#7EA7FC',
color: "#7EA7FC",
borderWidth: 3,
borderColor: '#fff',
borderColor: "#fff",
},
label: {
show: true,
position: 'inner',
position: "inner",
formatter: "{b}",
textStyle: {
color: '#fff'
}
}
color: "#fff",
},
},
// color: greenColorList,
},
],
})
});
},
initChart3 () {
initChart3() {
this.request({
url: '/hx/operating/getMilitaryIndustryPic',
method: 'get',
url: "/hx/operating/getMilitaryIndustryPic",
method: "get",
// (type=1总厂情况-2=合同信息-3本月情况)
params: { type: 3 }
}).then(res => {
params: { type: 3 },
}).then((res) => {
if (200 == res.code) {
let { list } = res.data;
this.chart3 = echarts.init(this.$refs.chart3)
this.chart3 = echarts.init(this.$refs.chart3);
this.chart3.setOption({
tooltip: {
// trigger: 'axis',
@ -500,12 +580,12 @@ export default {
bottom: 40,
},
dataZoom: {
type: 'slider',
type: "slider",
start: 0,
end: this.dataZoomEnd(list.length, 11),
},
xAxis: {
data: list.map(e => e.deptName),
data: list.map((e) => e.deptName),
// data: [
// '部门一',
// '部门一',
@ -522,11 +602,11 @@ export default {
// ],
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
color: "rgb(255, 255, 255)",
},
},
},
color: ['#ccc', 'red'],
color: ["#ccc", "red"],
yAxis: [
{
min: 0,
@ -535,56 +615,53 @@ export default {
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'],
color: ["rgba(255, 255, 255,.5)"],
},
},
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
color: "rgb(255, 255, 255)",
},
},
},
],
series: [
{
name: '完成率',
type: 'bar',
z: '-1',
barGap: '-100%',
name: "完成率",
type: "bar",
z: "-1",
barGap: "-100%",
barWidth: 30,
itemStyle: {
color: 'rgba(69, 209, 204, .2)',
color: "rgba(69, 209, 204, .2)",
},
data: list.map(e => e.forecastIncome),
data: list.map((e) => e.forecastIncome),
// data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
},
{
name: '数量',
type: 'bar',
name: "数量",
type: "bar",
barWidth: 30,
position: [0, 0],
itemStyle: {
color: 'rgba(69, 209, 204, 1)',
color: "rgba(69, 209, 204, 1)",
},
data: list.map(e => e.actualIncome),
data: list.map((e) => e.actualIncome),
// data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
},
],
})
});
}
})
});
this.setOptions3()
},
setOptions3 () {
this.setOptions3();
},
setOptions3() {},
},
}
};
</script>
<style lang="scss" scoped>

480
src/views/bigScreen/management/right2.vue
View File

@ -1,26 +1,51 @@
<template>
<div>
<container3 title="民用产业">
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['总厂情况', '合同及产品生产信息', '本月情况']"></bigScreenTabs>
<bigScreenTabs
slot="datePicker"
v-model="index"
:titleArr="['总厂情况', '合同及产品生产信息', '本月情况']"
></bigScreenTabs>
<div style="display: flex; height: 100%" v-if="index == 0">
<div style="height: 100%; width: 13%; display: flex; flex-direction: column; justify-content: space-evenly">
<div
style="
height: 100%;
width: 15%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
"
>
<div class="tag">
<div class="title">收入</div>
<i style="font-size: 24px; font-weight: bold; color: #91d5fe">{{total.realIncome}}/<i
style="font-size: 18px">{{total.targetIncome}}</i></i> 万
<i style="font-size: 24px; font-weight: bold; color: #91d5fe"
>{{ handleMillion(total.realIncome) }}/<i
style="font-size: 18px"
>{{ handleMillion(total.targetIncome) }}</i
></i
>
亿
</div>
<div class="tag">
<div class="title">利润</div>
<i style="font-size: 24px; font-weight: bold; color: #91d5fe">{{total.realProfit}}/<i
style="font-size: 18px">{{total.targetProfit}}</i></i> 万
<i style="font-size: 24px; font-weight: bold; color: #91d5fe"
>{{ handleMillion(total.realProfit) }}/<i
style="font-size: 18px"
>{{ handleMillion(total.targetProfit) }}</i
></i
>
亿
</div>
<div class="tag">
<div class="title">新签合同额</div>
<i style="font-size: 24px; font-weight: bold; color: #91d5fe">{{total.newContractAmount}}<i style="font-size: 18px"></i></i>
万
<i style="font-size: 24px; font-weight: bold; color: #91d5fe"
>{{ handleMillion(total.newContractAmount)
}}<i style="font-size: 18px"></i
></i>
亿
</div>
</div>
<div style="height: 100%; width: 87%" ref="chart"></div>
<div style="height: 100%; width: 85%" ref="chart"></div>
</div>
<div style="height: 100%" v-else-if="index == 1">
<el-row :gutter="20" style="height: 100%">
@ -31,14 +56,19 @@
<img src="./img/right2/2.png" alt="" />
</div>
<div style="margin: 5px 0 10px; color: #ccc">签订总数</div>
<div style="font-size: 30px">{{totalAndAmount.total}}</div>
<div style="font-size: 30px">{{ totalAndAmount.total }}</div>
</div>
<div class="_item">
<div>
<img src="./img/right2/3.png" alt="" />
</div>
<div style="margin: 5px 0 10px; color: #ccc">金额</div>
<div><span style="font-size: 30px">{{totalAndAmount.amount}}</span><span style="color: #ccc">w</span></div>
<div>
<span style="font-size: 30px">{{
handleMillion(totalAndAmount.amount)
}}</span
><span style="color: #ccc">亿</span>
</div>
</div>
</div>
</el-col>
@ -58,19 +88,19 @@
</template>
<script>
import scalseBox from '../components/scaleBox.vue'
import bigScreenHead from '../components/bigScreenHead/index.vue'
import rocketTit from '../components/rocketTit/index.vue'
import container3 from './components/container3/index.vue'
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
import colorList from '@/utils/colorPalette'
import scalseBox from "../components/scaleBox.vue";
import bigScreenHead from "../components/bigScreenHead/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import container3 from "./components/container3/index.vue";
import bigScreenTabs from "../components/bigScreenTabs/index.vue";
import colorList from "@/utils/colorPalette";
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";
export default {
mixins: [resize],
name: 'right2',
name: "right2",
components: {
scalseBox,
bigScreenHead,
@ -78,7 +108,7 @@ export default {
container3,
bigScreenTabs,
},
data () {
data() {
return {
index: 0,
chart: null,
@ -94,61 +124,63 @@ export default {
},
totalAndAmount: {
amount: 0,
total: 0
}
}
total: 0,
},
};
},
mounted () {
mounted() {
this.$nextTick(() => {
this.initChart()
})
this.initChart();
});
},
watch: {
index (newVal, oldVal) {
index(newVal, oldVal) {
if (newVal == 0) {
this.$nextTick(() => {
this.initChart()
})
this.initChart();
});
} else if (newVal == 1) {
this.$nextTick(() => {
this.initChart2()
})
this.initChart2();
});
} else {
this.$nextTick(() => {
this.initChart4()
})
this.initChart4();
});
}
},
},
beforeDestroy () {
beforeDestroy() {
if (!this.chart) {
return
return;
}
this.chart.dispose()
this.chart = null
this.chart.dispose();
this.chart = null;
},
methods: {
initChart () {
initChart() {
this.request({
url: '/hx/operating/getCivilIndustryPic',
method: 'get',
params: { type: 1 }
}).then(res => {
url: "/hx/operating/getCivilIndustryPic",
method: "get",
params: { type: 1 },
}).then((res) => {
if (200 == res.code) {
let { total, list } = res.data;
this.total = total;
this.chart = echarts.init(this.$refs.chart)
if (total) {
this.total = total;
}
this.chart = echarts.init(this.$refs.chart);
this.chart.setOption({
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'shadow',
type: "shadow",
},
},
legend: {
data: ['利润', '收入', '收入完成率', '利润完成率'],
data: ["利润", "收入", "收入完成率", "利润完成率"],
textStyle: {
color: '#fff', //legend字体颜色
color: "#fff", //legend字体颜色
},
},
grid: {
@ -159,49 +191,49 @@ export default {
containLabel: true,
},
dataZoom: {
type: 'slider',
type: "slider",
start: 0,
end: this.dataZoomEnd(list.length, 7),
textStyle: {
color: '#fff',
color: "#fff",
},
},
xAxis: [
{
type: 'category',
data: list.map(e => e.month),
type: "category",
data: list.map((e) => e.month),
// data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
color: "rgb(255, 255, 255)",
},
},
},
],
yAxis: [
{
name: '个',
name: "个",
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'],
color: ["rgba(255, 255, 255,.5)"],
},
},
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
color: "rgb(255, 255, 255)",
},
},
},
{
type: 'value',
type: "value",
axisLabel: {
formatter: '{value} %',
formatter: "{value} %",
},
splitLine: {
show: false, //不显示网格线
@ -211,120 +243,136 @@ export default {
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
color: "rgb(255, 255, 255)",
},
},
},
],
series: [
{
name: '收入',
type: 'bar',
name: "收入",
type: "bar",
emphasis: {
focus: 'series',
focus: "series",
},
z: '-1',
barGap: '-100%',
z: "-1",
barGap: "-100%",
itemStyle: {
color: '#53C19D',
color: "#53C19D",
},
barWidth: 30,
data: list.map(e => e.realIncome)
data: list.map((e) => e.realIncome),
// data: [100, 232, 201, 154, 190, 330, 410],
},
{
name: '利润',
type: 'bar',
name: "利润",
type: "bar",
emphasis: {
focus: 'series',
focus: "series",
},
itemStyle: {
color: '#8BB1ED',
color: "#8BB1ED",
},
barWidth: 30,
data: list.map(e => e.realProfit)
data: list.map((e) => e.realProfit),
},
{
name: '收入完成率',
type: 'line',
name: "收入完成率",
type: "line",
smooth: false,
yAxisIndex: 1,
data: list.map(e => e.realIncome / e.targetIncome * 100),
data: list.map((e) => (e.realIncome / e.targetIncome) * 100),
// data: [500, 550, 700, 520, 650, 520, 550],
itemStyle: {
color: '#53C19D',
color: "#53C19D",
},
symbol: 'none',
symbol: "none",
},
{
name: '利润完成率',
type: 'line',
name: "利润完成率",
type: "line",
smooth: false,
itemStyle: {
color: '#8BB1ED',
color: "#8BB1ED",
},
yAxisIndex: 1,
data: list.map(e => e.realProfit / e.targetProfit * 100),
symbol: 'none',
data: list.map((e) => (e.realProfit / e.targetProfit) * 100),
symbol: "none",
},
],
})
});
}
})
});
},
initChart2 () {
initChart2() {
this.request({
url: '/hx/operating/getCivilIndustryPic',
method: 'get',
params: { type: 2 }
}).then(res => {
url: "/hx/operating/getCivilIndustryPic",
method: "get",
params: { type: 2 },
}).then((res) => {
if (200 == res.code) {
let { totalAndAmount, list, categoryTotal, monthList } = res.data;
this.totalAndAmount = totalAndAmount;
// to do 数据格式不对
// console.log(list.map(e=>(e.filter(e=> e.category == '其他')[0].realQuantity)))
// console.log(list.filter(e => e.category == '其他').map(e => e.realQuantity))
// to do 数据格式不对
// console.log(list.map(e=>(e.filter(e=> e.category == '其他')[0].realQuantity)))
// console.log(list.filter(e => e.category == '其他').map(e => e.realQuantity))
this.initChart3(categoryTotal);
this.chart2 = echarts.init(this.$refs.chart2)
let newArray = [];
for (let i = 0; i < list.length; i++) {
const item = list[i];
newArray.push([]);
for (let j = 0; j < item.length; j++) {
const item2 = item[j];
if (item2.realQuantity) {
item2["completionRate"] = (
item2.realQuantity / item2.planQuantity
).toFixed(4);
newArray[i].push(item2);
}
}
}
console.log(newArray);
this.chart2 = echarts.init(this.$refs.chart2);
this.chart2.setOption({
legend: {
// data: ['利润', '利润预测', '利润目标完成率'],
// left: 0,
textStyle: {
color: '#fff',
color: "#fff",
},
},
grid: {
left: '3%',
right: '6%',
bottom: '3%',
left: "3%",
right: "6%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: 'category',
type: "category",
data: monthList,
axisPointer: {
type: 'shadow',
type: "shadow",
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
color: "rgb(255, 255, 255)",
},
},
},
],
yAxis: [
{
type: 'value',
name: '',
type: "value",
name: "",
min: 0,
// max: 250,
// interval: 50,
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
splitLine: {
show: false, //不显示网格线
@ -334,17 +382,17 @@ export default {
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
color: "rgb(255, 255, 255)",
},
},
},
{
type: 'value',
type: "value",
min: 0,
max: 100,
// interval: 5,
axisLabel: {
formatter: '{value} %',
formatter: "{value} %",
},
splitLine: {
show: false, //不显示网格线
@ -354,145 +402,152 @@ export default {
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
color: "rgb(255, 255, 255)",
},
},
},
],
grid: {
containLabel: true,
width: '99%',
width: "99%",
left: 0,
top: 50,
bottom: 50,
},
dataZoom: {
type: 'slider',
type: "slider",
start: 0,
end: 30,
end: this.dataZoomEnd(monthList.length, 4),
},
series: [
{
name: '稀土',
type: 'bar',
data: list.map(e=>(e.filter(e=> e.category == '稀土')[0].realQuantity)),
// barWidth: 20,
// barGap: '0',
// data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
name: "稀土",
type: "bar",
data: list.map(
(e) => e.filter((e) => e.category == "稀土")[0].realQuantity
),
itemStyle: {
color: '#E3F5C2',
color: "#E3F5C2",
},
},
{
name: '绝热',
type: 'bar',
// barWidth: 20,
data: list.map(e=>(e.filter(e=> e.category == '绝热')[0].realQuantity)),
// data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
name: "隔热",
type: "bar",
data: list.map(
(e) => e.filter((e) => e.category == "隔热")[0].realQuantity
),
itemStyle: {
color: '#45D1CC',
color: "#45D1CC",
},
},
{
name: '其他',
type: 'bar',
// barWidth: 20,
// barGap: '0',
data: list.map(e=>(e.filter(e=> e.category == '其他')[0].realQuantity)),
// data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
name: "其他",
type: "bar",
data: list.map(
(e) => e.filter((e) => e.category == "其他")[0].realQuantity
),
itemStyle: {
color: '#61C1FB',
color: "#61C1FB",
},
},
{
name: '完成率',
type: 'line',
name: "稀土完成率",
type: "line",
yAxisIndex: 1,
smooth: false,
data: [12.0, 12.2, 13.3, 14.5, 16.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
data: [
12.0, 12.2, 13.3, 14.5, 16.3, 10.2, 20.3, 23.4, 23.0, 16.5,
12.0, 6.2,
],
itemStyle: {
normal: {
color: '#E3F5C2',
color: "#E3F5C2",
},
},
symbol: 'none',
symbol: "none",
},
{
name: '',
type: 'line',
name: "隔热完成率",
type: "line",
yAxisIndex: 1,
smooth: false,
data: [14.0, 14.2, 16.3, 18.5, 12.3, 20.2, 40.3, 43.4, 43.0, 26.5, 22.0, 12.2],
data: [
14.0, 14.2, 16.3, 18.5, 12.3, 20.2, 40.3, 43.4, 43.0, 26.5,
22.0, 12.2,
],
itemStyle: {
normal: {
color: '#45D1CC',
color: "#45D1CC",
},
},
symbol: 'none',
symbol: "none",
},
{
name: '',
type: 'line',
name: "其他完成率",
type: "line",
yAxisIndex: 1,
smooth: false,
data: [22.0, 22.2, 32.3, 42.5, 26.3, 50.2, 30.3, 43.4, 43.0, 56.5, 42.0, 56.2],
data: [
22.0, 22.2, 32.3, 42.5, 26.3, 50.2, 30.3, 43.4, 43.0, 56.5,
42.0, 56.2,
],
itemStyle: {
normal: {
color: '#61C1FB',
color: "#61C1FB",
},
},
symbol: 'none',
symbol: "none",
},
],
})
});
}
})
});
},
initChart3 (categoryTotal) {
this.chart3 = echarts.init(this.$refs.chart3)
initChart3(categoryTotal) {
this.chart3 = echarts.init(this.$refs.chart3);
this.chart3.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)',
position: 'inner',
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
position: "inner",
},
series: [
{
name: '合同金额',
type: 'pie',
center: ['45%', '50%'],
radius: ['60%', '80%'],
name: "合同金额",
type: "pie",
center: ["45%", "50%"],
radius: ["60%", "80%"],
avoidLabelOverlap: false,
hoverAnimation: false, // hover 效果
label: {
show: false,
position: 'center',
position: "center",
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold',
fontSize: "40",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: categoryTotal.map(e => {
return { value: e.amount, name: e.category + '合同' }
data: categoryTotal.map((e) => {
return { value: e.amount, name: e.category + "合同" };
}),
itemStyle: {
emphasis: {
shadowBlur: 1,
shadowOffsetX: 0,
shadowColor: '#fff',
shadowColor: "#fff",
},
normal: {
label: {
show: true,
formatter: '{b}',
position: 'inner',
formatter: "{b}",
position: "inner",
},
labelLine: {
show: true,
@ -500,31 +555,31 @@ export default {
},
},
// color: colorList,
color: ['#5B8FF9', '#5AD8A6', '#5D7092'],
color: ["#5B8FF9", "#5AD8A6", "#5D7092"],
},
{
name: '合同数量',
type: 'pie',
radius: ['35%', '55%'],
center: ['45%', '50%'],
name: "合同数量",
type: "pie",
radius: ["35%", "55%"],
center: ["45%", "50%"],
avoidLabelOverlap: false,
hoverAnimation: false, // hover 效果
label: {
show: false,
position: 'center',
position: "center",
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold',
fontSize: "40",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: categoryTotal.map(e => {
return { value: e.total, name: e.category + '合同' }
data: categoryTotal.map((e) => {
return { value: e.total, name: e.category + "合同" };
}),
// data: [
// { value: 4, name: '合同1' },
@ -535,13 +590,13 @@ export default {
emphasis: {
shadowBlur: 1,
shadowOffsetX: 0,
shadowColor: '#fff',
shadowColor: "#fff",
},
normal: {
label: {
show: true,
formatter: '{b}',
position: 'inner',
formatter: "{b}",
position: "inner",
},
labelLine: {
show: true,
@ -549,30 +604,29 @@ export default {
},
},
// color: colorList,
color: ['#5B8FF9', '#5AD8A6', '#5D7092'],
color: ["#5B8FF9", "#5AD8A6", "#5D7092"],
},
],
})
});
},
initChart4 () {
initChart4() {
this.request({
url: '/hx/operating/getCivilIndustryPic',
method: 'get',
params: { type: 3 }
}).then(res => {
url: "/hx/operating/getCivilIndustryPic",
method: "get",
params: { type: 3 },
}).then((res) => {
if (200 == res.code) {
let { list } = res.data;
this.chart4 = echarts.init(this.$refs.chart4);
this.setOptions4(list)
this.setOptions4(list);
}
})
});
},
setOptions4 (list) {
setOptions4(list) {
this.chart4.setOption({
tooltip: {
trigger: 'axis',
trigger: "axis",
// formatter: '{a1}<br/>{b1}：{c1}',
},
grid: {
@ -583,22 +637,22 @@ export default {
bottom: 50,
},
dataZoom: {
type: 'slider',
type: "slider",
start: 0,
end: this.dataZoomEnd(list.length, 7),
textStyle: {
color: '#fff',
color: "#fff",
},
},
xAxis: {
data: list.map(e => e.deptName),
data: list.map((e) => e.deptName),
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
color: "rgb(255, 255, 255)",
},
},
},
color: ['#ccc', 'red'],
color: ["#ccc", "red"],
yAxis: [
{
min: 0,
@ -609,48 +663,48 @@ export default {
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'],
color: ["rgba(255, 255, 255,.5)"],
},
},
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
color: "rgb(255, 255, 255)",
},
},
},
],
series: [
{
name: '预测',
type: 'bar',
z: '-1',
barGap: '-100%',
name: "预测",
type: "bar",
z: "-1",
barGap: "-100%",
barWidth: 30,
itemStyle: {
color: 'rgba(246, 217, 126, .2)',
color: "rgba(246, 217, 126, .2)",
},
data: list.map(e => e.forecastIncome),
data: list.map((e) => e.forecastIncome),
// data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
},
{
name: '数量',
type: 'bar',
name: "数量",
type: "bar",
barWidth: 30,
position: [0, 0],
itemStyle: {
color: 'rgba(246, 217, 126, 1)',
color: "rgba(246, 217, 126, 1)",
},
data: list.map(e => e.realIncome),
data: list.map((e) => e.realIncome),
// data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
},
],
})
});
},
},
}
};
</script>
<style lang="scss" scoped>

501
src/views/bigScreen/qualityManage/center2.vue
View File

@ -1,256 +1,285 @@
<template>
<div>
<center2 title="关键参数SPC分析">
<el-select v-model="value" slot="datePicker" size="mini" placeholder="请选择" @change="handleValue">
<el-option v-for="item in selectData" :key="item" :label="item" :value="item"> </el-option>
</el-select>
<div style="height: 100%; width: 100%" ref="chart"></div>
</center2>
</div>
<div>
<center2 title="关键参数SPC分析">
<el-select
v-model="value"
slot="datePicker"
size="mini"
placeholder="请选择"
@change="handleValue"
>
<el-option
v-for="item in selectData"
:key="item"
:label="item"
:value="item"
>
</el-option>
</el-select>
<div style="height: 100%; width: 100%" ref="chart"></div>
</center2>
</div>
</template>
<script>
import center2 from './components/center2/index.vue'
import rocketTit from '../components/rocketTit/index.vue'
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
import colorList from '@/utils/colorPalette'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
import center2 from "./components/center2/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import bigScreenTabs from "../components/bigScreenTabs/index.vue";
import colorList from "@/utils/colorPalette";
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";
export default {
mixins: [resize],
name: 'left1',
components: {
center2,
rocketTit,
bigScreenTabs,
},
data() {
return {
value: '',
selectData: [],
chart: null,
}
},
mounted() {
this.$nextTick(() => {
this.getSelectData()
})
},
beforeDestroy() {},
methods: {
handleValue(e) {
this.initChart()
},
getSelectData() {
this.request({
url: '/hx/qualityAssurance/getHxAllSpcCategory',
method: 'get',
}).then(({ data }) => {
if (!data.length) return console.log('暂无分类')
this.selectData = data
this.value = data[0]
this.initChart()
})
},
initChart() {
this.request({
url: '/hx/qualityAssurance/getHxSpcPic',
method: 'get',
params: {
category: this.value,
},
}).then(({ data }) => {
this.chart = echarts.init(this.$refs.chart)
this.setOptions(data)
})
},
setOptions(resData) {
let productName = []
let realValue = []
for (let i = 0; i < resData.product.length; i++) {
const item = resData.product[i]
productName.push(item.productName)
realValue.push(item.realValue)
}
this.chart.setOption({
tooltip: {
trigger: 'axis',
},
legend: {
textStyle: {
color: '#fff',
},
},
xAxis: [
{
type: 'category',
data: productName,
axisPointer: {
type: 'shadow',
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
],
yAxis: {
type: 'value',
name: '',
min: 0,
// max: 250,
// interval: 50,
axisLabel: {
formatter: '{value}',
},
splitLine: {
show: false, //不显示网格线
},
splitArea: {
show: false, //不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
grid: {
containLabel: true,
left: 0,
right: 20,
top: 30,
bottom: 50,
},
dataZoom: {
type: 'slider',
start: 0,
end: this.dataZoomEnd(productName.length, 7),
},
series: [
{
name: '实际',
data: realValue,
type: 'line',
symbol: 'none',
markLine: {
symbol: 'none', //去掉警戒线最后面的箭头
label: {
position: 'end', //三个值“start”,"middle","end" 开始 中点 结束
},
silent: true,
data: [
{
lineStyle: {
type: 'dotted', // type: 'solid' //'dotted'虚线 'solid'实线
color: colorList[0],
},
label: { show: true, position: 'middle', formatter: '上限' + resData.spc.upperLimit },
yAxis: resData.spc.upperLimit,
},
{
lineStyle: {
type: 'dotted', // type: 'solid' //'dotted'虚线 'solid'实线
color: colorList[1],
},
label: { show: true, position: 'middle', formatter: '中心线' + resData.spc.centerLine },
yAxis: resData.spc.centerLine,
},
{
lineStyle: {
type: 'dotted', // type: 'solid' //'dotted'虚线 'solid'实线
color: colorList[2],
},
label: { show: true, position: 'middle', formatter: '下限' + resData.spc.lowerLimit },
yAxis: resData.spc.lowerLimit,
},
],
},
},
],
})
},
},
}
mixins: [resize],
name: "left1",
components: {
center2,
rocketTit,
bigScreenTabs,
},
data() {
return {
value: "",
selectData: [],
chart: null,
};
},
mounted() {
this.$nextTick(() => {
this.getSelectData();
});
},
beforeDestroy() {},
methods: {
handleValue(e) {
this.initChart();
},
getSelectData() {
this.request({
url: "/hx/qualityAssurance/getHxAllSpcCategory",
method: "get",
}).then(({ data }) => {
if (!data.length) return console.log("暂无分类");
this.selectData = data;
this.value = data[0];
this.initChart();
});
},
initChart() {
this.request({
url: "/hx/qualityAssurance/getHxSpcPic",
method: "get",
params: {
category: this.value,
},
}).then(({ data }) => {
this.chart = echarts.init(this.$refs.chart);
this.setOptions(data);
});
},
setOptions(resData) {
let productName = [];
let realValue = [];
for (let i = 0; i < resData.product.length; i++) {
const item = resData.product[i];
productName.push(item.productName);
realValue.push(item.realValue);
}
this.chart.setOption({
tooltip: {
trigger: "axis",
},
color: ["#c23531", ...colorList],
legend: {
textStyle: {
color: "#fff",
},
data: ["实际", "上限", "中心线", "下限"],
},
xAxis: [
{
type: "category",
data: productName,
axisPointer: {
type: "shadow",
},
axisLine: {
lineStyle: {
color: "rgb(255, 255, 255)",
},
},
},
],
yAxis: {
type: "value",
name: "",
min: 0,
// max: 250,
// interval: 50,
axisLabel: {
formatter: "{value}",
},
splitLine: {
show: false, //不显示网格线
},
splitArea: {
show: false, //不显示网格区域
},
axisLine: {
lineStyle: {
color: "rgb(255, 255, 255)",
},
},
},
grid: {
containLabel: true,
left: 0,
right: 50,
top: 30,
bottom: 50,
},
dataZoom: {
type: "slider",
start: 0,
end: this.dataZoomEnd(productName.length, 7),
},
series: [
{
name: "实际",
data: realValue,
type: "line",
symbol: "none",
},
{
name: "上限",
type: "line",
markLine: {
symbol: "none",
label: {
color: "#fff",
},
data: [
{
name: "上限",
yAxis: resData.spc.upperLimit,
},
],
},
},
{
name: "中心线",
type: "line",
markLine: {
symbol: "none",
label: {
color: "#fff",
},
data: [
{
name: "中心线",
yAxis: resData.spc.centerLine,
},
],
},
},
{
name: "下限",
type: "line",
markLine: {
symbol: "none",
label: {
color: "#fff",
},
data: [
{
name: "下限",
yAxis: resData.spc.lowerLimit,
},
],
},
},
],
});
},
},
};
</script>
<style lang="scss" scoped>
.tit {
padding: 16px 24px;
padding: 16px 24px;
}
.img {
position: absolute;
top: 0;
left: 0;
z-index: -1;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.warp-scroll {
height: 215px;
width: 100%;
margin: 0 auto;
overflow: hidden;
ul {
list-style: none;
padding: 0;
margin: 0 auto;
li,
a {
display: block;
display: flex;
justify-content: space-between;
font-size: 15px;
}
li {
display: block;
height: 42px;
line-height: 42px;
background: #2a437d;
opacity: 0.6;
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
margin-bottom: 1px;
img {
vertical-align: sub;
margin-right: 5px;
}
}
}
height: 215px;
width: 100%;
margin: 0 auto;
overflow: hidden;
ul {
list-style: none;
padding: 0;
margin: 0 auto;
li,
a {
display: block;
display: flex;
justify-content: space-between;
font-size: 15px;
}
li {
display: block;
height: 42px;
line-height: 42px;
background: #2a437d;
opacity: 0.6;
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
margin-bottom: 1px;
img {
vertical-align: sub;
margin-right: 5px;
}
}
}
}
.box {
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}
.warp {
height: 280px;
width: 440px;
margin: 0 auto;
overflow: hidden;
ul {
list-style: none;
padding: 0;
margin: 0 auto;
li,
a {
display: block;
display: flex;
justify-content: space-between;
font-size: 15px;
}
li {
display: block;
height: 30px;
line-height: 30px;
background: rgba(2, 18, 63, 0.33);
padding-left: 20px;
margin: 5px 0;
img {
vertical-align: sub;
margin-right: 5px;
}
}
}
height: 280px;
width: 440px;
margin: 0 auto;
overflow: hidden;
ul {
list-style: none;
padding: 0;
margin: 0 auto;
li,
a {
display: block;
display: flex;
justify-content: space-between;
font-size: 15px;
}
li {
display: block;
height: 30px;
line-height: 30px;
background: rgba(2, 18, 63, 0.33);
padding-left: 20px;
margin: 5px 0;
img {
vertical-align: sub;
margin-right: 5px;
}
}
}
}
</style>

14
src/views/bigScreen/securityManage/center.vue
View File

@ -15,7 +15,7 @@
/>
<section v-for="(v, index) in points" :key="index">
<div
v-if="v.level == '一级'"
v-if="v.level == 'Ⅰ级'"
class="con_right"
:style="{ top: v.ordinate + '%', left: v.abscissa + '%' }"
>
@ -28,7 +28,7 @@
</div>
</div>
<div
v-if="v.level == '二级'"
v-if="v.level == 'Ⅱ级'"
class="con_right con_two"
:style="{ top: v.ordinate + '%', left: v.abscissa + '%' }"
>
@ -41,7 +41,7 @@
</div>
</div>
<div
v-if="v.level == '三级'"
v-if="v.level == 'Ⅲ级'"
class="con_right con_three"
:style="{ top: v.ordinate + '%', left: v.abscissa + '%' }"
>
@ -78,7 +78,7 @@
<div class="data">
<div class="data-item">
<div>
<span style="font-weight: bold">一级危险点/危险源数量</span>
<span style="font-weight: bold">一级危险点/危险源</span>
</div>
<div class="box">
<i
@ -90,7 +90,7 @@
</div>
<div class="data-item">
<div>
<span style="font-weight: bold">二级危险点/危险源数量</span>
<span style="font-weight: bold">二级危险点/危险源</span>
</div>
<div class="box">
<i
@ -102,7 +102,7 @@
</div>
<div class="data-item">
<div>
<span style="font-weight: bold">三级危险点/危险源数量</span>
<span style="font-weight: bold">三级危险点/重大危险源</span>
</div>
<div class="box">
<i
@ -113,7 +113,7 @@
</div>
</div>
<div class="data-item">
<div><span style="font-weight: bold">四级危险源数量</span></div>
<div><span style="font-weight: bold">四级重大危险源</span></div>
<div class="box">
<i>{{ getItem(sourceLevelCount, "四级").COUNTNUMBER }}</i
><span class="num2">个</span>

18
src/views/bigScreen/securityManage/left1.vue
View File

@ -86,12 +86,15 @@
<el-col style="text-align: center" :span="3">{{
item.id
}}</el-col>
<el-col style="text-align: center" :title="item.pointName" :span="7">{{
item.pointName
}}</el-col>
<el-col
style="text-align: center"
:title="item.pointName"
:span="7"
>{{ item.pointName }}</el-col
>
<el-col style="text-align: center" :span="7">
<el-tag
v-if="item.level == '一级'"
v-if="item.level == 'Ⅰ级'"
style="background-color: unset"
type="danger"
effect="plain"
@ -99,7 +102,7 @@
{{ item.level }}</el-tag
>
<el-tag
v-else-if="item.level == '二级'"
v-else-if="item.level == 'Ⅱ级'"
style="background-color: unset"
type="warning"
effect="plain"
@ -107,12 +110,15 @@
{{ item.level }}</el-tag
>
<el-tag
v-else
v-else-if="item.level == 'Ⅲ级'"
style="background-color: unset"
effect="plain"
>
{{ item.level }}</el-tag
>
<el-tag v-else type="danger" effect="dark">
{{ item.level }}</el-tag
>
</el-col>
<el-col style="text-align: center" :span="7">
<section class="box">

353
src/views/chartList/page1/center2.vue
View File

@ -1,178 +1,205 @@
<template>
<el-row :gutter="20">
<!--用户数据-->
<el-col :span="24" :xs="24">
<el-row :gutter="10" class="mb8 fr">
<el-col :span="1.5">
<el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport">导入</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
:loading="exportLoading"
@click="importTemplate"
>导出模板</el-button
>
</el-col>
</el-row>
<el-row :gutter="20">
<!--用户数据-->
<el-col :span="24" :xs="24">
<el-row :gutter="10" class="mb8 fr">
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
>导入</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
:loading="exportLoading"
@click="importTemplate"
>导出模板</el-button
>
</el-col>
</el-row>
<el-table v-loading="loading" :data="userList">
<el-table-column label="序号" align="center" prop="id" width="80" />
<el-table-column label="日期" align="center" prop="todayDate" />
<el-table-column label="收入" align="center" prop="income" />
<el-table-column label="支出" align="center" prop="expenditure" />
<el-table-column label="新签合同" align="center" prop="newContract" />
<el-table-column label="安全问题" align="center" prop="safetyProblem" />
<el-table-column label="质量问题" align="center" prop="qualityProblem" />
<el-table-column label="设备数" align="center" prop="totalEquipment" />
<el-table-column label="职工数" align="center" prop="totalWorker" />
<el-table-column label="生产任务" align="center" prop="completeTask" />
<el-table-column label="运行率" align="center" prop="equipmentRate" />
<el-table-column label="出勤率" align="center" prop="workerRate" />
<el-table-column label="完成率" align="center" prop="taskRate" />
</el-table>
<el-table v-loading="loading" :data="userList">
<el-table-column label="序号" align="center" prop="id" width="80" />
<el-table-column label="今日日期" align="center" prop="todayDate" />
<el-table-column
label="今日运行设备数"
align="center"
prop="operatingEquipment"
/>
<el-table-column
label="今日总设备数"
align="center"
prop="totalEquipment"
/>
<el-table-column
label="今日出勤员工数"
align="center"
prop="attendanceWorker"
/>
<el-table-column
label="今日总员工数"
align="center"
prop="totalWorker"
/>
<el-table-column
label="今日完成任务数"
align="center"
prop="completeTask"
/>
<el-table-column label="今日总任务数" align="center" prop="totalTask" />
</el-table>
<pagination
v-show="total > 0"
:total="total"
:autoScroll="false"
:pageSizes="[2, 5, 10, 20]"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
<!-- 用户导入对话框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">
<!-- <div class="el-upload__tip" slot="tip">
<pagination
v-show="total > 0"
:total="total"
:autoScroll="false"
:pageSizes="[2, 5, 10, 20]"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
<!-- 用户导入对话框 -->
<el-dialog
:title="upload.title"
:visible.sync="upload.open"
width="400px"
append-to-body
>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">
<!-- <div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
</div> -->
<span>仅允许导入xls、xlsx格式文件。</span>
<!-- <el-link
<span>仅允许导入xls、xlsx格式文件。</span>
<!-- <el-link
type="primary"
:underline="false"
style="font-size: 12px; vertical-align: baseline"
@click="importTemplate"
>下载模板</el-link
> -->
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
</el-row>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
</el-row>
</template>
<script>
import { centerTwoList, centerTwoImportTemplate } from './indexApi'
import { getToken } from '@/utils/auth'
import { centerTwoList, centerTwoImportTemplate } from "./indexApi";
import { getToken } from "@/utils/auth";
export default {
data() {
return {
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: this.page_size,
},
// 用户信息
userList: [],
// 总条数
total: 0,
// 用户导入参数
upload: {
// 是否显示弹出层（用户导入）
open: false,
// 弹出层标题（用户导入）
title: '',
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: 'Bearer ' + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + '/hx/todayDynamic/importData',
},
}
},
methods: {
/** 查询用户列表 */
getList() {
this.loading = true
centerTwoList(this.queryParams).then(res => {
this.userList = res.rows
this.total = res.total
this.loading = false
})
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams
this.$modal
.confirm('是否确认导出所有用户数据项？')
.then(() => {
this.exportLoading = true
return exportUser(queryParams)
})
.then(response => {
this.$download.name(response.msg)
this.exportLoading = false
})
.catch(() => {})
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = '数据导入'
this.upload.open = true
},
/** 下载模板操作 */
importTemplate() {
centerTwoImportTemplate().then(response => {
this.$download.name(response.msg)
})
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false
this.upload.isUploading = false
this.$refs.upload.clearFiles()
this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
this.getList()
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit()
},
},
created() {
this.getList()
},
}
data() {
return {
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: this.page_size,
},
// 用户信息
userList: [],
// 总条数
total: 0,
// 用户导入参数
upload: {
// 是否显示弹出层（用户导入）
open: false,
// 弹出层标题（用户导入）
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/hx/todayDynamic/importData",
},
};
},
methods: {
/** 查询用户列表 */
getList() {
this.loading = true;
centerTwoList(this.queryParams).then((res) => {
this.userList = res.rows;
this.total = res.total;
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$modal
.confirm("是否确认导出所有用户数据项？")
.then(() => {
this.exportLoading = true;
return exportUser(queryParams);
})
.then((response) => {
this.$download.name(response.msg);
this.exportLoading = false;
})
.catch(() => {});
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = "数据导入";
this.upload.open = true;
},
/** 下载模板操作 */
importTemplate() {
centerTwoImportTemplate().then((response) => {
this.$download.name(response.msg);
});
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
this.getList();
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
},
created() {
this.getList();
},
};
</script>

197
src/views/chartList/page1/center3.vue Normal file
View File

@ -0,0 +1,197 @@
<template>
<el-row :gutter="20">
<!--用户数据-->
<el-col :span="24" :xs="24">
<el-row :gutter="10" class="mb8 fr">
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
>导入</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
:loading="exportLoading"
@click="importTemplate"
>导出模板</el-button
>
</el-col>
</el-row>
<el-table v-loading="loading" :data="userList">
<el-table-column label="序号" align="center" prop="id" width="80" />
<el-table-column label="月份" align="center" prop="month" />
<el-table-column label="本月收入" align="center" prop="income" />
<el-table-column label="本月支出" align="center" prop="expenditure" />
<el-table-column
label="本月新签合同数"
align="center"
prop="newContract"
/>
<el-table-column
label="本月安全问题数"
align="center"
prop="safetyProblem"
/>
<el-table-column
label="本月质量问题"
align="center"
prop="qualityProblem"
/>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:autoScroll="false"
:pageSizes="[2, 5, 10, 20]"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
<!-- 用户导入对话框 -->
<el-dialog
:title="upload.title"
:visible.sync="upload.open"
width="400px"
append-to-body
>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">
<!-- <div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
</div> -->
<span>仅允许导入xls、xlsx格式文件。</span>
<!-- <el-link
type="primary"
:underline="false"
style="font-size: 12px; vertical-align: baseline"
@click="importTemplate"
>下载模板</el-link
> -->
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
</el-row>
</template>
<script>
import { centerThreeList, centerThreeImportTemplate } from "./indexApi";
import { getToken } from "@/utils/auth";
export default {
data() {
return {
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: this.page_size,
},
// 用户信息
userList: [],
// 总条数
total: 0,
// 用户导入参数
upload: {
// 是否显示弹出层（用户导入）
open: false,
// 弹出层标题（用户导入）
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url:
process.env.VUE_APP_BASE_API + "/business/hxMonthDynamic/importData",
},
};
},
methods: {
/** 查询用户列表 */
getList() {
this.loading = true;
centerThreeList(this.queryParams).then((res) => {
this.userList = res.rows;
this.total = res.total;
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$modal
.confirm("是否确认导出所有用户数据项？")
.then(() => {
this.exportLoading = true;
return exportUser(queryParams);
})
.then((response) => {
this.$download.name(response.msg);
this.exportLoading = false;
})
.catch(() => {});
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = "数据导入";
this.upload.open = true;
},
/** 下载模板操作 */
importTemplate() {
centerThreeImportTemplate().then((response) => {
this.$download.name(response.msg);
});
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
this.getList();
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
},
created() {
this.getList();
},
};
</script>

96
src/views/chartList/page1/index.vue
View File

@ -1,49 +1,69 @@
<template>
<div class="app-container">
<el-divider content-position="left"><span class="text-bold-18">经营责任书完成概况</span></el-divider>
<left1 />
<el-divider content-position="left"><span class="text-bold-18">收入、利润概况</span></el-divider>
<left2 />
<el-divider content-position="left"><span class="text-bold-18">全年目标</span></el-divider>
<center1 />
<el-divider content-position="left"><span class="text-bold-18">今日动态</span></el-divider>
<center2 />
<el-divider content-position="left"><span class="text-bold-18">生产责任令完成概况</span></el-divider>
<right1 />
<el-divider content-position="left"><span class="text-bold-18">交付产品完成概况</span></el-divider>
<right2 />
<el-divider content-position="left"><span class="text-bold-18">装药量概况</span></el-divider>
<right3 />
</div>
<div class="app-container">
<el-divider content-position="left"
><span class="text-bold-18">经营责任书完成概况</span></el-divider
>
<left1 />
<el-divider content-position="left"
><span class="text-bold-18">收入、利润概况</span></el-divider
>
<left2 />
<el-divider content-position="left"
><span class="text-bold-18">全年目标</span></el-divider
>
<center1 />
<el-divider content-position="left"
><span class="text-bold-18">今日动态</span></el-divider
>
<center2 />
<el-divider content-position="left"
><span class="text-bold-18">本月动态</span></el-divider
>
<center3 />
<el-divider content-position="left"
><span class="text-bold-18">生产责任令完成概况</span></el-divider
>
<right1 />
<el-divider content-position="left"
><span class="text-bold-18">交付产品完成概况</span></el-divider
>
<right2 />
<el-divider content-position="left"
><span class="text-bold-18">装药量概况</span></el-divider
>
<right3 />
</div>
</template>
<script>
import left1 from './left1.vue'
import left2 from './left2.vue' // 包括 left2 和 left3 只有一个接口
import center1 from './center1.vue'
import center2 from './center2.vue'
import right1 from './right1.vue'
import right2 from './right2.vue'
import right3 from './right3.vue'
import left1 from "./left1.vue";
import left2 from "./left2.vue"; // 包括 left2 和 left3 只有一个接口
import center1 from "./center1.vue";
import center2 from "./center2.vue";
import center3 from "./center3.vue";
import right1 from "./right1.vue";
import right2 from "./right2.vue";
import right3 from "./right3.vue";
export default {
components: {
left1,
left2,
center1,
center2,
right1,
right2,
right3,
},
}
components: {
left1,
left2,
center1,
center2,
center3,
right1,
right2,
right3,
},
};
</script>
<style lang="scss" scoped>
.app-container {
.el-divider:nth-child(n + 2) {
margin-top: 50px;
}
.el-divider:nth-child(n + 2) {
margin-top: 50px;
}
}
.text-bold-18 {
font-size: 18px;
font-weight: bold;
font-size: 18px;
font-weight: bold;
}
</style>

14
src/views/chartList/page1/indexApi.js
View File

@ -58,6 +58,20 @@ export function centerTwoImportTemplate() {
url: '/hx/todayDynamic/importTemplate',
})
}
/** --------------- center3 --------------- */
// 本月动态列表
export function centerThreeList(params) {
return request({
url: '/business/hxMonthDynamic/list',
params,
})
}
// 导出模板
export function centerThreeImportTemplate() {
return request({
url: '/business/hxMonthDynamic/importTemplate',
})
}
/** --------------- right1 --------------- */
// 生产责任令
export function rightOneList(params) {