-
{{ title }}
-
+
{{ title }}
@@ -57,37 +56,6 @@ export default {
.tit {
position: relative;
padding: 16px 16px 16px 24px;
- text-align: center;
- color: #ffffff;
- font-size: 16px;
- position: relative;
- display: inline-block;
- margin: 0 auto;
-
- ::before {
- content: '';
- display: block;
- position: absolute;
-
- left: -75px;
- top: 25px;
- width: 82px;
- height: 3px;
- background: linear-gradient(90deg, rgba(145, 213, 254, 0) 0%, #91d5fe 100%);
- border-radius: 2px;
- }
- ::after {
- content: '';
- display: block;
- position: absolute;
-
- right: -75px;
- top: 25px;
- width: 82px;
- height: 3px;
- background: linear-gradient(90deg, #91d5fe 0%, rgba(145, 213, 254, 0) 100%);
- border-radius: 2px;
- }
.datePicker {
position: absolute;
diff --git a/src/views/bigScreen/securityManage/left2.vue b/src/views/bigScreen/securityManage/left2.vue
index b495165..ec2a1ac 100644
--- a/src/views/bigScreen/securityManage/left2.vue
+++ b/src/views/bigScreen/securityManage/left2.vue
@@ -2,13 +2,59 @@
-
-
+
+
+
+
+
-
-
- 12
+
+
+
+
+
+
+
+
+
+
+
+
+ 序号
+ 安全隐患内容
+ 措施
+ 责任人
+
+
+
+
+ -
+
+ {{ item.id }}
+ {{ item.name }}
+
+
+
+ {{ item.txt }}
+
+
+
+
+
@@ -21,6 +67,9 @@ import scalseBox from '../components/scaleBox.vue'
import bigScreenHead from '../components/bigScreenHead/index.vue'
import rocketTit from '../components/rocketTit/index.vue'
import container3 from './components/container3/index.vue'
+import bigScreenTabs from '../components/bigScreenTabs/index.vue'
+import colorList from '@/utils/colorPalette'
+import vueSeamlessScroll from 'vue-seamless-scroll'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
@@ -31,20 +80,61 @@ export default {
components: {
scalseBox,
bigScreenHead,
+ bigScreenTabs,
rocketTit,
container3,
+ vueSeamlessScroll,
},
data() {
return {
+ index: 0,
+ colorList,
+
+ listData: [1, 2, 3, 4, 5, 6, 7, 8],
+ scrollList: [
+ {
+ id: 1,
+ name: 'xx车间未开启安全闸门',
+ txt: '能昌',
+ status: 2,
+ },
+ {
+ id: 2,
+ name: 'xx车间未开启安全闸门',
+ txt: '葛岚福',
+ status: 2,
+ },
+ {
+ id: 3,
+ name: 'xx车间未开启安全闸门',
+ txt: '酆芳琼',
+ status: 1,
+ },
+ {
+ id: 4,
+ name: 'xx车间未开启安全闸门',
+ txt: '酆芳琼',
+ status: 1,
+ },
+ {
+ id: 5,
+ name: 'xx车间未开启安全闸门',
+ txt: '酆芳琼',
+ status: 1,
+ },
+ ],
+
dateRange: [],
chart: null,
+ chart2: null,
+ chart3: null,
option: {
- legend: {
- data: ['利润', '利润预测', '利润目标完成率'],
- textStyle: {
- color: '#fff',
- },
- },
+ // legend: {
+ // data: ['利润', '利润目标完成率'],
+ // textStyle: {
+ // color: '#fff',
+ // },
+ // },
grid: {
left: '3%',
right: '6%',
@@ -81,7 +171,7 @@ export default {
yAxis: [
{
type: 'value',
- name: '万元',
+ name: '个',
min: 0,
max: 250,
interval: 50,
@@ -128,49 +218,29 @@ export default {
top: 50,
bottom: 50,
},
- dataZoom: {},
+ dataZoom: {
+ type: 'slider',
+ textStyle: {
+ color: '#fff',
+ },
+ },
series: [
{
name: '利润',
type: 'bar',
barWidth: 20,
- 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],
+ data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3],
itemStyle: {
color: 'rgb(118,196,166)',
},
barGap: '0',
},
- {
- name: '利润预测',
- type: 'bar',
- barWidth: 20,
- 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: {
- color: {
- type: 'linear', // 线性渐变
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: '#B5D3FE', // 0%处的颜色为红色
- },
- {
- offset: 1,
- color: '#7EA7FC', // 100%处的颜色为蓝
- },
- ],
- },
- },
- },
{
name: '利润目标完成率',
type: 'line',
yAxisIndex: 1,
smooth: false,
- data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
+ data: [10, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
itemStyle: {
color: '#55C5A2',
},
@@ -217,9 +287,31 @@ export default {
},
}
},
+ watch: {
+ index(newOld, oldVal) {
+ if (newOld == 0) {
+ this.chart3.dispose()
+ this.chart3 = null
+ this.$nextTick(() => {
+ this.initChart()
+ this.initLine()
+ })
+ } else {
+ this.chart.dispose()
+ this.chart = null
+ this.chart2.dispose()
+ this.chart2 = null
+ this.$nextTick(() => {
+ this.initChart3()
+ })
+ }
+ },
+ },
mounted() {
this.$nextTick(() => {
this.initChart()
+ this.initLine()
+ // this.initChart3()
})
},
beforeDestroy() {
@@ -234,11 +326,217 @@ export default {
this.chart = echarts.init(this.$refs.chart)
this.chart.setOption(this.option)
},
+ initLine() {
+ this.chart2 = echarts.init(this.$refs.chart2)
+ this.setOptions2()
+ },
+ initChart3() {
+ this.chart3 = echarts.init(this.$refs.chart3)
+ this.setOptions3()
+ },
+ setOptions2() {
+ this.chart2.setOption({
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a}
{b}: {c} ({d}%)',
+ },
+ color: this.colorList,
+ legend: {
+ // data: ['型号一', '型号二', '型号三', '型号四'],
+ // orient: 'vertical',
+ // left: '60%',
+ // right: '2%',
+ bottom: 30,
+ // y: 'bottom',
+ textStyle: {
+ //图例文字的样式
+ color: '#fff',
+ fontSize: 16,
+ },
+ },
+ series: [
+ {
+ name: '概括',
+ type: 'pie',
+ radius: ['40%', '60%'],
+ center: ['45%', '45%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center',
+ fontWeight: 'bold',
+ formatter: ' {c}', // {b}:数据名; {c}:数据值; {d}:百分比,可以自定义显示内容
+ },
+ emphasis: {
+ label: {
+ show: false,
+ fontSize: '40',
+ fontWeight: 'bold',
+ },
+ },
+ labelLine: {
+ show: false,
+ },
+ data: [
+ { value: 154, name: '型号一' },
+ { value: 775, name: '型号二' },
+ { value: 679, name: '型号三' },
+ { value: 679, name: '型号四' },
+ ],
+ },
+ ],
+ })
+ },
+ setOptions3() {
+ this.chart3.setOption({
+ // legend: {
+ // data: ['利润', '利润目标完成率'],
+ // textStyle: {
+ // color: '#fff',
+ // },
+ // },
+ grid: {
+ left: '3%',
+ right: '6%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: ['车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间'],
+ axisPointer: {
+ type: 'shadow',
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'rgb(255, 255, 255)',
+ },
+ },
+ },
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: '个',
+ min: 0,
+ max: 250,
+ interval: 50,
+ axisLabel: {
+ formatter: '{value}',
+ },
+ splitLine: {
+ show: false, //不显示网格线
+ },
+ splitArea: {
+ show: false, //不显示网格区域
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'rgb(255, 255, 255)',
+ },
+ },
+ },
+ {
+ type: 'value',
+ min: 0,
+ max: 25,
+ interval: 5,
+ axisLabel: {
+ formatter: '{value} %',
+ },
+ splitLine: {
+ show: false, //不显示网格线
+ },
+ splitArea: {
+ show: false, //不显示网格区域
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'rgb(255, 255, 255)',
+ },
+ },
+ },
+ ],
+ grid: {
+ containLabel: true,
+ width: '99%',
+ left: 0,
+ top: 50,
+ bottom: 50,
+ },
+ dataZoom: {
+ type: 'slider',
+ textStyle: {
+ color: '#fff',
+ },
+ },
+ series: [
+ {
+ name: '利润',
+ type: 'bar',
+ barWidth: 20,
+ data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3],
+ itemStyle: {
+ color: 'rgb(118,196,166)',
+ },
+ barGap: '0',
+ },
+ {
+ name: '利润目标完成率',
+ type: 'line',
+ yAxisIndex: 1,
+ smooth: false,
+ data: [10, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
+ itemStyle: {
+ color: '#7EA7FC ',
+ },
+ symbol: 'none',
+ },
+ ],
+ })
+ },
},
}