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

447
src/utils/index.js
View File

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

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

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

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

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

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

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

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

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

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

@ -1,11 +1,30 @@
<template> <template>
<div> <div>
<container2 title="战略指标"> <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> <div style="height: 100%; width: 100%" ref="chart"></div>
</container2> </container2>
<container2 title="综合指标" style="margin-top: 10px"> <container2 title="综合指标" style="margin-top: 10px">
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['完成率', '明细']"></bigScreenTabs> <bigScreenTabs
<el-row style="height: 100%; width: 100%; padding: 0 0 5px 15px" :gutter="10" v-if="index == 0"> 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"> <el-col style="height: 100%" :span="16">
<div style="height: 100%; width: 100%" ref="chart2"></div> <div style="height: 100%; width: 100%" ref="chart2"></div>
</el-col> </el-col>
@ -16,7 +35,10 @@
<span style="font-size: 25px; margin-right: 3px">·</span> <span style="font-size: 25px; margin-right: 3px">·</span>
<span>0进展指标</span> <span>0进展指标</span>
</div> </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> <div>
<div class="box"> <div class="box">
@ -26,14 +48,22 @@
<div style="padding: 5px 30px 10px"> <div style="padding: 5px 30px 10px">
<progressBar :percentage="rate" /> <progressBar :percentage="rate" />
</div> </div>
<div style="text-align: center"><span class="num">{{rate}}%</span></div> <div style="text-align: center">
<span class="num">{{ rate }}%</span>
</div>
</div> </div>
</section> </section>
</el-col> </el-col>
</el-row> </el-row>
<el-row v-else style="height: 100%; width: 100%; padding: 0 10px 0 20px"> <el-row v-else style="height: 100%; width: 100%; padding: 0 10px 0 20px">
<el-col :span="24" style="margin-bottom: 1px"> <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="3">序号</el-col>
<el-col style="text-align: center" :span="5">项目名称</el-col> <el-col style="text-align: center" :span="5">项目名称</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-col style="text-align: center" :span="4">完成情况</el-col>
</el-row> </el-row>
</el-col> </el-col>
<vue-seamless-scroll ref="seamlessScroll" :data="listData" class="warp-scroll" :class-option="{ <vue-seamless-scroll
singleHeight: 43, ref="seamlessScroll"
}" style="height: 168px"> :data="listData"
class="warp-scroll"
:class-option="{
singleHeight: 43,
}"
style="height: 168px"
>
<ul class="item"> <ul class="item">
<li v-for="item in scrollList" :key="item.id"> <li v-for="item in scrollList" :key="item.id">
<el-row> <el-row>
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col> <el-col style="text-align: center" :span="3">{{
<el-col style="text-align: center" :title="item.projectName" :span="5">{{ item.projectName }}</el-col> item.id
<el-col style="text-align: center" :title="item.deptName" :span="5"> {{item.deptName}}</el-col> }}</el-col>
<el-col style="text-align: center" :span="7">{{item.todayDate}}</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"> <el-col style="text-align: center" :span="4">
<section class="box"> <section class="box">
<span v-if="item.completedStatus == '已完成'" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span> <span
<span v-else-if="item.completedStatus == '未完成'" style="color: #f64f58; font-size: 25px; margin-right: 3px">·</span> v-if="item.completedStatus == '已完成'"
<span v-else style="color: #fa8c16; font-size: 25px; margin-right: 3px">·</span> 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-if="item.completedStatus == '已完成'">已完成</span>
<span v-else-if="item.completedStatus == '未完成'">未完成</span> <span v-else-if="item.completedStatus == '未完成'"
>未完成</span
>
<span v-else>进行中</span> <span v-else>进行中</span>
</section> </section>
</el-col> </el-col>
@ -71,19 +136,19 @@
</template> </template>
<script> <script>
import rocketTit from '../components/rocketTit/index.vue' import rocketTit from "../components/rocketTit/index.vue";
import container2 from './components/container2/index.vue' import container2 from "./components/container2/index.vue";
import bigScreenTabs from '../components/bigScreenTabs/index.vue' import bigScreenTabs from "../components/bigScreenTabs/index.vue";
import progressBar from '@/views/bigScreen/components/progress/index.vue' import progressBar from "@/views/bigScreen/components/progress/index.vue";
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from "vue-seamless-scroll";
import colorList from '@/utils/colorPalette' import colorList from "@/utils/colorPalette";
// import {Liquid} from '@antv/g2plot'; // import {Liquid} from '@antv/g2plot';
// import resize from '../../dashboard/mixins/resize' // import resize from '../../dashboard/mixins/resize'
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
export default { export default {
// mixins: [resize], // mixins: [resize],
name: 'left1', name: "left1",
components: { components: {
rocketTit, rocketTit,
container2, container2,
@ -91,253 +156,271 @@ export default {
progressBar, progressBar,
vueSeamlessScroll, vueSeamlessScroll,
}, },
data () { data() {
return { return {
currentPage1: 1,
dataList: [],
total: 0,
index: 0, index: 0,
chart: null, chart: null,
chart2: null, chart2: null,
listData: [1, 2, 3, 4, 5, 6, 7, 8], listData: [1, 2, 3, 4, 5, 6, 7, 8],
zeroTotal: 0, zeroTotal: 0,
rate: 0, rate: 0,
scrollList: [ scrollList: [],
],
colorList, colorList,
} };
}, },
mounted () { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart();
this.initLine() this.initLine();
}) });
}, },
beforeDestroy () { }, beforeDestroy() {},
watch: { watch: {
index (newVal, oldVal) { index(newVal, oldVal) {
if (newVal == 0) { if (newVal == 0) {
this.$nextTick(() => { this.$nextTick(() => {
this.initLine() this.initLine();
}) });
} else { } else {
this.$nextTick(() => { this.$nextTick(() => {
this.getData() this.getData();
}) });
} }
}, },
}, },
methods: { methods: {
initChart () { initChart() {
this.request({ this.request({
url: '/hx/operating/getHxStrategyIndexPic', url: "/hx/operating/getHxStrategyIndexPic",
method: 'get', method: "get",
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
let list = []; if (res.data.length % 2 == 0) {
if (res.data.length > 2) { this.total = res.data.length;
list = res.data.splice(0, 2); this.dataList = res.data;
} else { } 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') // if (res.data.length > 2) {
let arr1 = [ // list = res.data.splice(0, 2);
...(list[0].value.map(e => parseInt(e.startNumber))), // } else {
...(list[0].value.map(e => parseInt(e.endNumber))), // list = res.data;
...(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: '末期',
},
],
},
],
})
} }
}); });
}, },
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({ this.request({
url: '/hx/operating/getHxSynthesizeIndexPic', url: "/hx/operating/getHxSynthesizeIndexPic",
method: 'get', method: "get",
params: { type: 1 } params: { type: 1 },
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
let { list, zeroTotal, rate } = res.data; let { list, zeroTotal, rate } = res.data;
this.rate = parseInt(rate); this.rate = parseInt(rate);
this.zeroTotal = zeroTotal; this.zeroTotal = zeroTotal;
this.chart2 = echarts.init(this.$refs.chart2) this.chart2 = echarts.init(this.$refs.chart2);
this.chart2.setOption({ this.chart2.setOption({
legend: { legend: {
data: ['实际', '完成率'], data: ["实际", "完成率"],
textStyle: { textStyle: {
color: '#fff', color: "#fff",
}, },
}, },
grid: { grid: {
left: '3%', left: "3%",
right: '6%', right: "6%",
bottom: '3%', bottom: "3%",
containLabel: true, containLabel: true,
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: "category",
data: list.map(e => e.dept), data: list.map((e) => e.dept),
// data: [ // data: [
// '2021-01', // '2021-01',
// '2021-02', // '2021-02',
@ -353,24 +436,24 @@ export default {
// '2021-12', // '2021-12',
// ], // ],
axisPointer: { axisPointer: {
type: 'shadow', type: "shadow",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
yAxis: [ yAxis: [
{ {
type: 'value', type: "value",
name: '件', name: "件",
min: 0, min: 0,
// max: 250, // max: 250,
// interval: 50, // interval: 50,
axisLabel: { axisLabel: {
formatter: '{value}', formatter: "{value}",
}, },
splitLine: { splitLine: {
show: false, //不显示网格线 show: false, //不显示网格线
@ -380,15 +463,15 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
{ {
type: 'value', type: "value",
min: 0, min: 0,
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: "{value} %",
}, },
splitLine: { splitLine: {
show: false, //不显示网格线 show: false, //不显示网格线
@ -398,72 +481,88 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
grid: { grid: {
containLabel: true, containLabel: true,
width: '99%', width: "99%",
left: 0, left: 0,
top: 50, top: 50,
bottom: 50, bottom: 50,
}, },
dataZoom: { dataZoom: {
type: 'slider', type: "slider",
start: 0, start: 0,
end: this.dataZoomEnd(list.length, 5), end: this.dataZoomEnd(list.length, 5),
}, },
series: [ series: [
{ {
name: '实际', name: "实际",
type: 'bar', type: "bar",
barWidth: 20, 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], // data: [75.6, 82.2, 26.4, 28.7, 70.7, 50.7, 60.7, 70.7, 80.7, 48.7, 18.8],
itemStyle: { itemStyle: {
color: '#F6D97E', color: "#F6D97E",
}, },
}, },
{ {
name: '完成率', name: "完成率",
type: 'line', type: "line",
yAxisIndex: 1, yAxisIndex: 1,
smooth: false, 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], // data: [80, 70, 80, 70, 80, 70, 80, 70, 80, 70, 80, 70],
itemStyle: { itemStyle: {
color: '#F64F58', color: "#F64F58",
}, },
symbol: 'none', symbol: "none",
}, },
], ],
}) });
} else { } else {
this.$message.error(res.msg); this.$message.error(res.msg);
} }
}) });
}, },
getData () { getData() {
this.request({ this.request({
url: '/hx/operating/getHxSynthesizeIndexPic', url: "/hx/operating/getHxSynthesizeIndexPic",
method: 'get', method: "get",
params: { type: 2 } params: { type: 2 },
}).then(res=> { }).then((res) => {
if(200 == res.code) { if (200 == res.code) {
this.scrollList = res.data.list; this.scrollList = res.data.list;
this.$refs.seamlessScroll.reset(); this.$refs.seamlessScroll.reset();
} }
}) });
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <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 { .warp-scroll {
height: 126px; height: 126px;
width: 100%; width: 100%;

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

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

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

@ -1,26 +1,51 @@
<template> <template>
<div> <div>
<container3 title="民用产业"> <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="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="tag">
<div class="title">收入</div> <div class="title">收入</div>
<i style="font-size: 24px; font-weight: bold; color: #91d5fe">{{total.realIncome}}/<i <i style="font-size: 24px; font-weight: bold; color: #91d5fe"
style="font-size: 18px">{{total.targetIncome}}</i></i> 万 >{{ handleMillion(total.realIncome) }}/<i
style="font-size: 18px"
>{{ handleMillion(total.targetIncome) }}</i
></i
>
亿
</div> </div>
<div class="tag"> <div class="tag">
<div class="title">利润</div> <div class="title">利润</div>
<i style="font-size: 24px; font-weight: bold; color: #91d5fe">{{total.realProfit}}/<i <i style="font-size: 24px; font-weight: bold; color: #91d5fe"
style="font-size: 18px">{{total.targetProfit}}</i></i> 万 >{{ handleMillion(total.realProfit) }}/<i
style="font-size: 18px"
>{{ handleMillion(total.targetProfit) }}</i
></i
>
亿
</div> </div>
<div class="tag"> <div class="tag">
<div class="title">新签合同额</div> <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> </div>
<div style="height: 100%; width: 87%" ref="chart"></div> <div style="height: 100%; width: 85%" ref="chart"></div>
</div> </div>
<div style="height: 100%" v-else-if="index == 1"> <div style="height: 100%" v-else-if="index == 1">
<el-row :gutter="20" style="height: 100%"> <el-row :gutter="20" style="height: 100%">
@ -31,14 +56,19 @@
<img src="./img/right2/2.png" alt="" /> <img src="./img/right2/2.png" alt="" />
</div> </div>
<div style="margin: 5px 0 10px; color: #ccc">签订总数</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>
<div class="_item"> <div class="_item">
<div> <div>
<img src="./img/right2/3.png" alt="" /> <img src="./img/right2/3.png" alt="" />
</div> </div>
<div style="margin: 5px 0 10px; color: #ccc">金额</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>
</div> </div>
</el-col> </el-col>
@ -58,19 +88,19 @@
</template> </template>
<script> <script>
import scalseBox from '../components/scaleBox.vue' import scalseBox from "../components/scaleBox.vue";
import bigScreenHead from '../components/bigScreenHead/index.vue' import bigScreenHead from "../components/bigScreenHead/index.vue";
import rocketTit from '../components/rocketTit/index.vue' import rocketTit from "../components/rocketTit/index.vue";
import container3 from './components/container3/index.vue' import container3 from "./components/container3/index.vue";
import bigScreenTabs from '../components/bigScreenTabs/index.vue' import bigScreenTabs from "../components/bigScreenTabs/index.vue";
import colorList from '@/utils/colorPalette' import colorList from "@/utils/colorPalette";
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from '../../dashboard/mixins/resize' import resize from "../../dashboard/mixins/resize";
export default { export default {
mixins: [resize], mixins: [resize],
name: 'right2', name: "right2",
components: { components: {
scalseBox, scalseBox,
bigScreenHead, bigScreenHead,
@ -78,7 +108,7 @@ export default {
container3, container3,
bigScreenTabs, bigScreenTabs,
}, },
data () { data() {
return { return {
index: 0, index: 0,
chart: null, chart: null,
@ -94,61 +124,63 @@ export default {
}, },
totalAndAmount: { totalAndAmount: {
amount: 0, amount: 0,
total: 0 total: 0,
} },
} };
}, },
mounted () { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart();
}) });
}, },
watch: { watch: {
index (newVal, oldVal) { index(newVal, oldVal) {
if (newVal == 0) { if (newVal == 0) {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart();
}) });
} else if (newVal == 1) { } else if (newVal == 1) {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart2() this.initChart2();
}) });
} else { } else {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart4() this.initChart4();
}) });
} }
}, },
}, },
beforeDestroy () { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
return return;
} }
this.chart.dispose() this.chart.dispose();
this.chart = null this.chart = null;
}, },
methods: { methods: {
initChart () { initChart() {
this.request({ this.request({
url: '/hx/operating/getCivilIndustryPic', url: "/hx/operating/getCivilIndustryPic",
method: 'get', method: "get",
params: { type: 1 } params: { type: 1 },
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
let { total, list } = res.data; let { total, list } = res.data;
this.total = total; if (total) {
this.chart = echarts.init(this.$refs.chart) this.total = total;
}
this.chart = echarts.init(this.$refs.chart);
this.chart.setOption({ this.chart.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: {
type: 'shadow', type: "shadow",
}, },
}, },
legend: { legend: {
data: ['利润', '收入', '收入完成率', '利润完成率'], data: ["利润", "收入", "收入完成率", "利润完成率"],
textStyle: { textStyle: {
color: '#fff', //legend字体颜色 color: "#fff", //legend字体颜色
}, },
}, },
grid: { grid: {
@ -159,49 +191,49 @@ export default {
containLabel: true, containLabel: true,
}, },
dataZoom: { dataZoom: {
type: 'slider', type: "slider",
start: 0, start: 0,
end: this.dataZoomEnd(list.length, 7), end: this.dataZoomEnd(list.length, 7),
textStyle: { textStyle: {
color: '#fff', color: "#fff",
}, },
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: "category",
data: list.map(e => e.month), data: list.map((e) => e.month),
// data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'], // data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
yAxis: [ yAxis: [
{ {
name: '个', name: "个",
splitLine: { splitLine: {
show: true, show: true,
// 改变轴线颜色 // 改变轴线颜色
lineStyle: { lineStyle: {
// 使用深浅的间隔色 // 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'], color: ["rgba(255, 255, 255,.5)"],
}, },
}, },
axisLabel: { axisLabel: {
formatter: '{value}', formatter: "{value}",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
{ {
type: 'value', type: "value",
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: "{value} %",
}, },
splitLine: { splitLine: {
show: false, //不显示网格线 show: false, //不显示网格线
@ -211,120 +243,136 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
series: [ series: [
{ {
name: '收入', name: "收入",
type: 'bar', type: "bar",
emphasis: { emphasis: {
focus: 'series', focus: "series",
}, },
z: '-1', z: "-1",
barGap: '-100%', barGap: "-100%",
itemStyle: { itemStyle: {
color: '#53C19D', color: "#53C19D",
}, },
barWidth: 30, barWidth: 30,
data: list.map(e => e.realIncome) data: list.map((e) => e.realIncome),
// data: [100, 232, 201, 154, 190, 330, 410], // data: [100, 232, 201, 154, 190, 330, 410],
}, },
{ {
name: '利润', name: "利润",
type: 'bar', type: "bar",
emphasis: { emphasis: {
focus: 'series', focus: "series",
}, },
itemStyle: { itemStyle: {
color: '#8BB1ED', color: "#8BB1ED",
}, },
barWidth: 30, barWidth: 30,
data: list.map(e => e.realProfit) data: list.map((e) => e.realProfit),
}, },
{ {
name: '收入完成率', name: "收入完成率",
type: 'line', type: "line",
smooth: false, smooth: false,
yAxisIndex: 1, 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], // data: [500, 550, 700, 520, 650, 520, 550],
itemStyle: { itemStyle: {
color: '#53C19D', color: "#53C19D",
}, },
symbol: 'none', symbol: "none",
}, },
{ {
name: '利润完成率', name: "利润完成率",
type: 'line', type: "line",
smooth: false, smooth: false,
itemStyle: { itemStyle: {
color: '#8BB1ED', color: "#8BB1ED",
}, },
yAxisIndex: 1, yAxisIndex: 1,
data: list.map(e => e.realProfit / e.targetProfit * 100), data: list.map((e) => (e.realProfit / e.targetProfit) * 100),
symbol: 'none', symbol: "none",
}, },
], ],
}) });
} }
}) });
}, },
initChart2 () { initChart2() {
this.request({ this.request({
url: '/hx/operating/getCivilIndustryPic', url: "/hx/operating/getCivilIndustryPic",
method: 'get', method: "get",
params: { type: 2 } params: { type: 2 },
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
let { totalAndAmount, list, categoryTotal, monthList } = res.data; let { totalAndAmount, list, categoryTotal, monthList } = res.data;
this.totalAndAmount = totalAndAmount; this.totalAndAmount = totalAndAmount;
// to do 数据格式不对 // to do 数据格式不对
// console.log(list.map(e=>(e.filter(e=> e.category == '其他')[0].realQuantity))) // console.log(list.map(e=>(e.filter(e=> e.category == '其他')[0].realQuantity)))
// console.log(list.filter(e => e.category == '其他').map(e => e.realQuantity)) // console.log(list.filter(e => e.category == '其他').map(e => e.realQuantity))
this.initChart3(categoryTotal); 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({ this.chart2.setOption({
legend: { legend: {
// data: ['利润', '利润预测', '利润目标完成率'], // data: ['利润', '利润预测', '利润目标完成率'],
// left: 0,
textStyle: { textStyle: {
color: '#fff', color: "#fff",
}, },
}, },
grid: { grid: {
left: '3%', left: "3%",
right: '6%', right: "6%",
bottom: '3%', bottom: "3%",
containLabel: true, containLabel: true,
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: "category",
data: monthList, data: monthList,
axisPointer: { axisPointer: {
type: 'shadow', type: "shadow",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
yAxis: [ yAxis: [
{ {
type: 'value', type: "value",
name: '', name: "",
min: 0, min: 0,
// max: 250, // max: 250,
// interval: 50, // interval: 50,
axisLabel: { axisLabel: {
formatter: '{value}', formatter: "{value}",
}, },
splitLine: { splitLine: {
show: false, //不显示网格线 show: false, //不显示网格线
@ -334,17 +382,17 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
{ {
type: 'value', type: "value",
min: 0, min: 0,
max: 100, max: 100,
// interval: 5, // interval: 5,
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: "{value} %",
}, },
splitLine: { splitLine: {
show: false, //不显示网格线 show: false, //不显示网格线
@ -354,145 +402,152 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
grid: { grid: {
containLabel: true, containLabel: true,
width: '99%', width: "99%",
left: 0, left: 0,
top: 50, top: 50,
bottom: 50, bottom: 50,
}, },
dataZoom: { dataZoom: {
type: 'slider', type: "slider",
start: 0, start: 0,
end: 30, end: this.dataZoomEnd(monthList.length, 4),
}, },
series: [ series: [
{ {
name: '稀土', name: "稀土",
type: 'bar', type: "bar",
data: list.map(e=>(e.filter(e=> e.category == '稀土')[0].realQuantity)), data: list.map(
// barWidth: 20, (e) => e.filter((e) => e.category == "稀土")[0].realQuantity
// 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],
itemStyle: { itemStyle: {
color: '#E3F5C2', color: "#E3F5C2",
}, },
}, },
{ {
name: '绝热', name: "隔热",
type: 'bar', type: "bar",
// barWidth: 20, data: list.map(
data: list.map(e=>(e.filter(e=> e.category == '绝热')[0].realQuantity)), (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], ),
itemStyle: { itemStyle: {
color: '#45D1CC', color: "#45D1CC",
}, },
}, },
{ {
name: '其他', name: "其他",
type: 'bar', type: "bar",
// barWidth: 20, data: list.map(
// barGap: '0', (e) => e.filter((e) => e.category == "其他")[0].realQuantity
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],
itemStyle: { itemStyle: {
color: '#61C1FB', color: "#61C1FB",
}, },
}, },
{ {
name: '完成率', name: "稀土完成率",
type: 'line', type: "line",
yAxisIndex: 1, yAxisIndex: 1,
smooth: false, 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: { itemStyle: {
normal: { normal: {
color: '#E3F5C2', color: "#E3F5C2",
}, },
}, },
symbol: 'none', symbol: "none",
}, },
{ {
name: '', name: "隔热完成率",
type: 'line', type: "line",
yAxisIndex: 1, yAxisIndex: 1,
smooth: false, 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: { itemStyle: {
normal: { normal: {
color: '#45D1CC', color: "#45D1CC",
}, },
}, },
symbol: 'none', symbol: "none",
}, },
{ {
name: '', name: "其他完成率",
type: 'line', type: "line",
yAxisIndex: 1, yAxisIndex: 1,
smooth: false, 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: { itemStyle: {
normal: { normal: {
color: '#61C1FB', color: "#61C1FB",
}, },
}, },
symbol: 'none', symbol: "none",
}, },
], ],
}) });
} }
}) });
}, },
initChart3 (categoryTotal) { initChart3(categoryTotal) {
this.chart3 = echarts.init(this.$refs.chart3) this.chart3 = echarts.init(this.$refs.chart3);
this.chart3.setOption({ this.chart3.setOption({
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
formatter: '{a} <br/>{b}: {c} ({d}%)', formatter: "{a} <br/>{b}: {c} ({d}%)",
position: 'inner', position: "inner",
}, },
series: [ series: [
{ {
name: '合同金额', name: "合同金额",
type: 'pie', type: "pie",
center: ['45%', '50%'], center: ["45%", "50%"],
radius: ['60%', '80%'], radius: ["60%", "80%"],
avoidLabelOverlap: false, avoidLabelOverlap: false,
hoverAnimation: false, // hover 效果 hoverAnimation: false, // hover 效果
label: { label: {
show: false, show: false,
position: 'center', position: "center",
}, },
emphasis: { emphasis: {
label: { label: {
show: false, show: false,
fontSize: '40', fontSize: "40",
fontWeight: 'bold', fontWeight: "bold",
}, },
}, },
labelLine: { labelLine: {
show: false, show: false,
}, },
data: categoryTotal.map(e => { data: categoryTotal.map((e) => {
return { value: e.amount, name: e.category + '合同' } return { value: e.amount, name: e.category + "合同" };
}), }),
itemStyle: { itemStyle: {
emphasis: { emphasis: {
shadowBlur: 1, shadowBlur: 1,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowColor: '#fff', shadowColor: "#fff",
}, },
normal: { normal: {
label: { label: {
show: true, show: true,
formatter: '{b}', formatter: "{b}",
position: 'inner', position: "inner",
}, },
labelLine: { labelLine: {
show: true, show: true,
@ -500,31 +555,31 @@ export default {
}, },
}, },
// color: colorList, // color: colorList,
color: ['#5B8FF9', '#5AD8A6', '#5D7092'], color: ["#5B8FF9", "#5AD8A6", "#5D7092"],
}, },
{ {
name: '合同数量', name: "合同数量",
type: 'pie', type: "pie",
radius: ['35%', '55%'], radius: ["35%", "55%"],
center: ['45%', '50%'], center: ["45%", "50%"],
avoidLabelOverlap: false, avoidLabelOverlap: false,
hoverAnimation: false, // hover 效果 hoverAnimation: false, // hover 效果
label: { label: {
show: false, show: false,
position: 'center', position: "center",
}, },
emphasis: { emphasis: {
label: { label: {
show: false, show: false,
fontSize: '40', fontSize: "40",
fontWeight: 'bold', fontWeight: "bold",
}, },
}, },
labelLine: { labelLine: {
show: false, show: false,
}, },
data: categoryTotal.map(e => { data: categoryTotal.map((e) => {
return { value: e.total, name: e.category + '合同' } return { value: e.total, name: e.category + "合同" };
}), }),
// data: [ // data: [
// { value: 4, name: '合同1' }, // { value: 4, name: '合同1' },
@ -535,13 +590,13 @@ export default {
emphasis: { emphasis: {
shadowBlur: 1, shadowBlur: 1,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowColor: '#fff', shadowColor: "#fff",
}, },
normal: { normal: {
label: { label: {
show: true, show: true,
formatter: '{b}', formatter: "{b}",
position: 'inner', position: "inner",
}, },
labelLine: { labelLine: {
show: true, show: true,
@ -549,30 +604,29 @@ export default {
}, },
}, },
// color: colorList, // color: colorList,
color: ['#5B8FF9', '#5AD8A6', '#5D7092'], color: ["#5B8FF9", "#5AD8A6", "#5D7092"],
}, },
], ],
}) });
}, },
initChart4 () { initChart4() {
this.request({ this.request({
url: '/hx/operating/getCivilIndustryPic', url: "/hx/operating/getCivilIndustryPic",
method: 'get', method: "get",
params: { type: 3 } params: { type: 3 },
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
let { list } = res.data; let { list } = res.data;
this.chart4 = echarts.init(this.$refs.chart4); this.chart4 = echarts.init(this.$refs.chart4);
this.setOptions4(list) this.setOptions4(list);
} }
}) });
}, },
setOptions4 (list) { setOptions4(list) {
this.chart4.setOption({ this.chart4.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
// formatter: '{a1}<br/>{b1}：{c1}', // formatter: '{a1}<br/>{b1}：{c1}',
}, },
grid: { grid: {
@ -583,22 +637,22 @@ export default {
bottom: 50, bottom: 50,
}, },
dataZoom: { dataZoom: {
type: 'slider', type: "slider",
start: 0, start: 0,
end: this.dataZoomEnd(list.length, 7), end: this.dataZoomEnd(list.length, 7),
textStyle: { textStyle: {
color: '#fff', color: "#fff",
}, },
}, },
xAxis: { xAxis: {
data: list.map(e => e.deptName), data: list.map((e) => e.deptName),
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
color: ['#ccc', 'red'], color: ["#ccc", "red"],
yAxis: [ yAxis: [
{ {
min: 0, min: 0,
@ -609,48 +663,48 @@ export default {
// 改变轴线颜色 // 改变轴线颜色
lineStyle: { lineStyle: {
// 使用深浅的间隔色 // 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'], color: ["rgba(255, 255, 255,.5)"],
}, },
}, },
axisLabel: { axisLabel: {
formatter: '{value}', formatter: "{value}",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
series: [ series: [
{ {
name: '预测', name: "预测",
type: 'bar', type: "bar",
z: '-1', z: "-1",
barGap: '-100%', barGap: "-100%",
barWidth: 30, barWidth: 30,
itemStyle: { 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], // data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
}, },
{ {
name: '数量', name: "数量",
type: 'bar', type: "bar",
barWidth: 30, barWidth: 30,
position: [0, 0], position: [0, 0],
itemStyle: { 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], // data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
}, },
], ],
}) });
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

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

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

@ -15,7 +15,7 @@
/> />
<section v-for="(v, index) in points" :key="index"> <section v-for="(v, index) in points" :key="index">
<div <div
v-if="v.level == '一级'" v-if="v.level == 'Ⅰ级'"
class="con_right" class="con_right"
:style="{ top: v.ordinate + '%', left: v.abscissa + '%' }" :style="{ top: v.ordinate + '%', left: v.abscissa + '%' }"
> >
@ -28,7 +28,7 @@
</div> </div>
</div> </div>
<div <div
v-if="v.level == '二级'" v-if="v.level == 'Ⅱ级'"
class="con_right con_two" class="con_right con_two"
:style="{ top: v.ordinate + '%', left: v.abscissa + '%' }" :style="{ top: v.ordinate + '%', left: v.abscissa + '%' }"
> >
@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<div <div
v-if="v.level == '三级'" v-if="v.level == 'Ⅲ级'"
class="con_right con_three" class="con_right con_three"
:style="{ top: v.ordinate + '%', left: v.abscissa + '%' }" :style="{ top: v.ordinate + '%', left: v.abscissa + '%' }"
> >
@ -78,7 +78,7 @@
<div class="data"> <div class="data">
<div class="data-item"> <div class="data-item">
<div> <div>
<span style="font-weight: bold">一级危险点/危险源数量</span> <span style="font-weight: bold">一级危险点/危险源</span>
</div> </div>
<div class="box"> <div class="box">
<i <i
@ -90,7 +90,7 @@
</div> </div>
<div class="data-item"> <div class="data-item">
<div> <div>
<span style="font-weight: bold">二级危险点/危险源数量</span> <span style="font-weight: bold">二级危险点/危险源</span>
</div> </div>
<div class="box"> <div class="box">
<i <i
@ -102,7 +102,7 @@
</div> </div>
<div class="data-item"> <div class="data-item">
<div> <div>
<span style="font-weight: bold">三级危险点/危险源数量</span> <span style="font-weight: bold">三级危险点/重大危险源</span>
</div> </div>
<div class="box"> <div class="box">
<i <i
@ -113,7 +113,7 @@
</div> </div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">四级危险源数量</span></div> <div><span style="font-weight: bold">四级重大危险源</span></div>
<div class="box"> <div class="box">
<i>{{ getItem(sourceLevelCount, "四级").COUNTNUMBER }}</i <i>{{ getItem(sourceLevelCount, "四级").COUNTNUMBER }}</i
><span class="num2">个</span> ><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">{{ <el-col style="text-align: center" :span="3">{{
item.id item.id
}}</el-col> }}</el-col>
<el-col style="text-align: center" :title="item.pointName" :span="7">{{ <el-col
item.pointName style="text-align: center"
}}</el-col> :title="item.pointName"
:span="7"
>{{ item.pointName }}</el-col
>
<el-col style="text-align: center" :span="7"> <el-col style="text-align: center" :span="7">
<el-tag <el-tag
v-if="item.level == '一级'" v-if="item.level == 'Ⅰ级'"
style="background-color: unset" style="background-color: unset"
type="danger" type="danger"
effect="plain" effect="plain"
@ -99,7 +102,7 @@
{{ item.level }}</el-tag {{ item.level }}</el-tag
> >
<el-tag <el-tag
v-else-if="item.level == '二级'" v-else-if="item.level == 'Ⅱ级'"
style="background-color: unset" style="background-color: unset"
type="warning" type="warning"
effect="plain" effect="plain"
@ -107,12 +110,15 @@
{{ item.level }}</el-tag {{ item.level }}</el-tag
> >
<el-tag <el-tag
v-else v-else-if="item.level == 'Ⅲ级'"
style="background-color: unset" style="background-color: unset"
effect="plain" effect="plain"
> >
{{ item.level }}</el-tag {{ item.level }}</el-tag
> >
<el-tag v-else type="danger" effect="dark">
{{ item.level }}</el-tag
>
</el-col> </el-col>
<el-col style="text-align: center" :span="7"> <el-col style="text-align: center" :span="7">
<section class="box"> <section class="box">

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

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

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

@ -58,6 +58,20 @@ export function centerTwoImportTemplate() {
url: '/hx/todayDynamic/importTemplate', 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 --------------- */ /** --------------- right1 --------------- */
// 生产责任令 // 生产责任令
export function rightOneList(params) { export function rightOneList(params) {