生产管理

src/views/bigScreen/components/scaleBox.vue

@@ -1,9 +1,13 @@
 <template>
 	<div style="background-color: #000; height: 100%; width: 100%">
-      <div class="ScaleBox" ref="ScaleBox" :style="{
+		<div
+			class="ScaleBox"
+			ref="ScaleBox"
+			:style="{
 				width: width + 'px',
-      height: height + 'px'
+				height: height + 'px',
-    }">
+			}"
+		>
 			<slot></slot>
 		</div>
 	</div>
@@ -17,7 +21,7 @@ export default {
 		return {
 			scale: 0,
 			width: 1920,
-      height: 1080
+			height: 1080,
 		}
 	},
 	mounted() {
@@ -57,8 +61,8 @@ export default {
 					fn.apply(th, args)
 				}, delays)
 			}
-    }
+		},
-  }
+	},
 }
 </script>
 
@@ -66,16 +70,16 @@ export default {
 #ScaleBox {
 	--scale: 1;
 }
-.ScaleBox {
+// .ScaleBox {
-  position: absolute;
+//   position: absolute;
-  transform: scale(var(--scale)) translate(-50%, -50%);
+//   transform: scale(var(--scale)) translate(-50%, -50%);
-  display: flex;
+//   display: flex;
-  flex-direction: column;
+//   flex-direction: column;
-  transform-origin: 0 0;
+//   transform-origin: 0 0;
-  left: 50%;
+//   left: 50%;
-  top: 50%;
+//   top: 50%;
-  transition: 0.3s;
+//   transition: 0.3s;
-  z-index: 999;
+//   z-index: 999;
-  // background: rgba(255, 0, 0, 0.3);
+//   // background: rgba(255, 0, 0, 0.3);
-}
+// }
 </style>

src/views/bigScreen/scientific/tab2/center1.vue

@@ -1,19 +1,47 @@
 <template>
 	<div>
 		<container1 title="生产责任令">
-			<el-date-picker
+			<div style="height: 100%; width: 100%; padding: 0 15px 0 25px">
-				slot="datePicker"
+				<div style="display: flex; height: 100%">
-				v-model="dateRange"
+					<div style="height: 100%; width: 22%; display: flex; flex-direction: column; justify-content: space-evenly">
-				size="small"
+						<div class="tag">
-				style="width: 240px"
+							<div class="title">军品收入</div>
-				value-format="yyyy-MM-dd"
+							<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
-				type="daterange"
+								>3380/<i style="font-size: 16px">12342</i></i
-				range-separator="-"
+							>
-				start-placeholder="开始日期"
+							万
-				end-placeholder="结束日期"
+						</div>
-			></el-date-picker>
+						<div class="tag">
-			<div style="height: 100%; width: 100%; text-align: center; padding: 0 10px">
+							<div class="title">装药量</div>
-				<img style="height: 100%; width: 100%" src="./1.png" alt="" />
+							<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
+								>3380/<i style="font-size: 16px">12342</i></i
+							>
+							万
+						</div>
+						<div class="tag">
+							<div class="title">大型产品</div>
+							<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
+								>3380/<i style="font-size: 16px">12342</i></i
+							>
+							万
+						</div>
+						<div class="tag">
+							<div class="title">中型产品</div>
+							<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
+								>3380/<i style="font-size: 16px">12342</i></i
+							>
+							万
+						</div>
+						<div class="tag">
+							<div class="title">小型产品</div>
+							<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
+								>3380/<i style="font-size: 16px">12342</i></i
+							>
+							万
+						</div>
+					</div>
+					<div style="height: 100%; width: 78%" ref="chart"></div>
+				</div>
 			</div>
 		</container1>
 	</div>
@@ -21,54 +49,183 @@
 
 <script>
 import container1 from './components/container1/index.vue'
+import { blueColorList, greenColorList, yelloColorList } from '@/utils/gradualColor'
 
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
 import resize from '../../../dashboard/mixins/resize'
-import vueSeamlessScroll from 'vue-seamless-scroll'
 export default {
 	mixins: [resize],
 	name: 'left2',
 	components: {
 		container1,
-		vueSeamlessScroll,
 	},
 	data() {
 		return {
-			listData: [1, 2, 3, 4, 5, 6, 7, 8],
+			chart: null,
-			scrollList: [
+		}
-				{
-					id: 1,
-					name: '计划一',
-					level: '一级',
-					status: 1,
 	},
-				{
+	mounted() {
-					id: 2,
+		this.$nextTick(() => {
-					name: '计划二',
+			this.initChart()
-					level: '二级',
+		})
-					status: 3,
 	},
-				{
+	methods: {
-					id: 3,
+		initChart() {
-					name: '计划三',
+			this.chart = echarts.init(this.$refs.chart)
-					level: '三级',
+			this.setOptions()
-					status: 3,
 		},
-				{
+		setOptions() {
-					id: 4,
+			this.chart.setOption({
-					name: '计划四',
+				tooltip: {
-					level: '二级',
+					trigger: 'axis',
-					status: 1,
+					axisPointer: {
+						type: 'shadow',
 					},
+				},
+				legend: {
+					textStyle: {
+						color: '#fff', //legend字体颜色
+					},
+				},
+				grid: {
+					left: 20,
+					right: 20,
+					top: 30,
+					bottom: 50,
+					containLabel: true,
+				},
+				dataZoom: {
+					type: 'slider',
+					// start: 0,
+					// end: 50,
+					textStyle: {
+						color: '#fff',
+					},
+				},
+				xAxis: [
 					{
-					id: 5,
+						type: 'category',
-					name: '计划五',
+						data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
-					level: '三级',
+						axisLine: {
-					status: 3,
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
 					},
 				],
-		}
+				yAxis: [
+					{
+						name: '个',
+						splitLine: {
+							show: true,
+							//  改变轴线颜色
+							lineStyle: {
+								// 使用深浅的间隔色
+								color: ['rgba(255, 255, 255,.5)'],
+							},
+						},
+						axisLabel: {
+							formatter: '{value}',
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+					{
+						type: 'value',
+						min: 0,
+						max: 100,
+						interval: 20,
+						axisLabel: {
+							formatter: '{value} %',
+						},
+						splitLine: {
+							show: false, //不显示网格线
+						},
+						splitArea: {
+							show: false, //不显示网格区域
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+				],
+				series: [
+					{
+						name: '装药量(大)',
+						type: 'bar',
+						stack: 'Ad',
+						emphasis: {
+							focus: 'series',
+						},
+						itemStyle: {
+							color: yelloColorList[2],
+						},
+						data: [150, 232, 201, 154, 190, 330, 410],
+					},
+					{
+						name: '装药量(中)',
+						type: 'bar',
+						stack: 'Ad',
+						emphasis: {
+							focus: 'series',
+						},
+						itemStyle: {
+							color: yelloColorList[0],
+						},
+						data: [150, 232, 201, 154, 190, 330, 410],
+					},
+					{
+						name: '装药量(小)',
+						type: 'bar',
+						stack: 'Ad',
+						emphasis: {
+							focus: 'series',
+						},
+						itemStyle: {
+							color: yelloColorList[1],
+						},
+						data: [150, 232, 201, 154, 190, 330, 410],
+					},
+					{
+						name: '交付数量',
+						type: 'bar',
+						emphasis: {
+							focus: 'series',
+						},
+						itemStyle: {
+							color: '#45D1CC',
+						},
+						data: [150, 232, 201, 154, 190, 330, 410],
+					},
+					{
+						name: '',
+						type: 'line',
+						smooth: false,
+						data: [500, 550, 700, 520, 650, 520, 550],
+						itemStyle: {
+							color: '#45D1CC',
+						},
+						symbol: 'none',
+					},
+					{
+						name: '',
+						type: 'line',
+						smooth: false,
+						itemStyle: {
+							color: yelloColorList[1],
+						},
+						data: [600, 500, 700, 620, 750, 800, 600],
+						symbol: 'none',
+					},
+				],
+			})
+		},
 	},
 }
 </script>

src/views/bigScreen/scientific/tab2/center2.vue

@@ -1,20 +1,7 @@
 <template>
 	<div>
 		<container1 title="物资计划">
-			<el-date-picker
+			<div style="height: 100%; width: 100%" ref="chart"></div>
-				slot="datePicker"
-				v-model="dateRange"
-				size="small"
-				style="width: 240px"
-				value-format="yyyy-MM-dd"
-				type="daterange"
-				range-separator="-"
-				start-placeholder="开始日期"
-				end-placeholder="结束日期"
-			></el-date-picker>
-			<div style="height: 100%; width: 100%; text-align: center; padding: 0 10px">
-				<img style="height: 100%; width: 100%" src="./3.png" alt="" />
-			</div>
 		</container1>
 	</div>
 </template>
@@ -35,40 +22,165 @@ export default {
 	},
 	data() {
 		return {
-			listData: [1, 2, 3, 4, 5, 6, 7, 8],
+			chart: null,
-			scrollList: [
+		}
-				{
-					id: 1,
-					name: '计划一',
-					level: '一级',
-					status: 1,
 	},
-				{
+	mounted() {
-					id: 2,
+		this.$nextTick(() => {
-					name: '计划二',
+			this.initChart()
-					level: '二级',
+		})
-					status: 3,
 	},
-				{
+	methods: {
-					id: 3,
+		initChart() {
-					name: '计划三',
+			this.chart = echarts.init(this.$refs.chart)
-					level: '三级',
+			this.setOptions()
-					status: 3,
 		},
-				{
+		setOptions() {
-					id: 4,
+			this.chart.setOption({
-					name: '计划四',
+				tooltip: {
-					level: '二级',
+					trigger: 'axis',
-					status: 1,
+					axisPointer: {
+						type: 'shadow',
 					},
+				},
+				legend: {
+					data: ['装药', '总装', '交付'],
+					textStyle: {
+						color: '#fff', //legend字体颜色
+					},
+				},
+				grid: {
+					left: 20,
+					right: 20,
+					top: 30,
+					bottom: 10,
+					containLabel: true,
+				},
+				xAxis: [
 					{
-					id: 5,
+						type: 'category',
-					name: '计划五',
+						data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
-					level: '三级',
+						axisLine: {
-					status: 3,
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
 					},
 				],
-		}
+				yAxis: [
+					{
+						name: '',
+						splitLine: {
+							show: true,
+							//  改变轴线颜色
+							lineStyle: {
+								// 使用深浅的间隔色
+								color: ['rgba(255, 255, 255,.5)'],
+							},
+						},
+						axisLabel: {
+							formatter: '{value}',
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+					{
+						type: 'value',
+						min: 0,
+						max: 100,
+						interval: 20,
+						axisLabel: {
+							formatter: '{value} %',
+						},
+						splitLine: {
+							show: false, //不显示网格线
+						},
+						splitArea: {
+							show: false, //不显示网格区域
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+				],
+				series: [
+					{
+						name: '交付',
+						type: 'bar',
+						stack: 'Ad',
+						emphasis: {
+							focus: 'series',
+						},
+						itemStyle: {
+							color: '#55C5A2',
+						},
+						barWidth: 30,
+						data: [150, 232, 201, 154, 190, 330, 410],
+					},
+					{
+						name: '总装',
+						type: 'bar',
+						stack: 'Ad',
+						emphasis: {
+							focus: 'series',
+						},
+						itemStyle: {
+							color: '#FA8C16',
+						},
+						barWidth: 30,
+						data: [150, 232, 201, 154, 190, 330, 410],
+					},
+					{
+						name: '装药',
+						type: 'bar',
+						stack: 'Ad',
+						emphasis: {
+							focus: 'series',
+						},
+						itemStyle: {
+							color: '#F6D97E',
+						},
+						barWidth: 30,
+						data: [150, 232, 201, 154, 190, 330, 900],
+					},
+					{
+						name: '完成率',
+						type: 'line',
+						smooth: false,
+						data: [500, 550, 700, 520, 650, 520, 900],
+						itemStyle: {
+							color: '#55C5A2',
+						},
+						symbol: 'none',
+					},
+					{
+						name: '完成率',
+						type: 'line',
+						smooth: false,
+						itemStyle: {
+							color: '#FA8C16',
+						},
+						data: [600, 500, 700, 620, 750, 800, 900],
+						symbol: 'none',
+					},
+					{
+						name: '完成率',
+						type: 'line',
+						smooth: false,
+						itemStyle: {
+							color: '#F6D97E',
+						},
+						data: [650, 550, 750, 670, 780, 900, 900],
+						symbol: 'none',
+					},
+				],
+			})
+		},
 	},
 }
 </script>

src/views/bigScreen/scientific/tab2/right1.vue

@@ -1,19 +1,8 @@
 <template>
 	<div>
 		<container1 title="生产情况分析">
-			<el-date-picker
+			<div style="height: 100%; width: 100%; text-align: center; padding: 0 15px 0 25px">
-				slot="datePicker"
+				<div style="height: 100%; width: 100%" ref="chart"></div>
-				v-model="dateRange"
-				size="small"
-				style="width: 240px"
-				value-format="yyyy-MM-dd"
-				type="daterange"
-				range-separator="-"
-				start-placeholder="开始日期"
-				end-placeholder="结束日期"
-			></el-date-picker>
-			<div style="height: 100%; width: 100%; text-align: center; padding: 0 10px">
-				<img style="height: 100%; width: 100%" src="./2.png" alt="" />
 			</div>
 		</container1>
 	</div>
@@ -21,54 +10,146 @@
 
 <script>
 import container1 from './components/container1/index.vue'
-
+import colorList from '@/utils/colorPalette'
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
 import resize from '../../../dashboard/mixins/resize'
-import vueSeamlessScroll from 'vue-seamless-scroll'
 export default {
 	mixins: [resize],
 	name: 'left2',
 	components: {
 		container1,
-		vueSeamlessScroll,
 	},
 	data() {
 		return {
-			listData: [1, 2, 3, 4, 5, 6, 7, 8],
+			chart: null,
-			scrollList: [
+		}
-				{
-					id: 1,
-					name: '计划一',
-					level: '一级',
-					status: 1,
 	},
-				{
+	mounted() {
-					id: 2,
+		this.$nextTick(() => {
-					name: '计划二',
+			this.initChart()
-					level: '二级',
+		})
-					status: 3,
 	},
-				{
+	methods: {
-					id: 3,
+		initChart() {
-					name: '计划三',
+			this.chart = echarts.init(this.$refs.chart)
-					level: '三级',
+			this.setOptions()
-					status: 3,
 		},
-				{
+		setOptions() {
-					id: 4,
+			this.chart.setOption({
-					name: '计划四',
+				tooltip: {
-					level: '二级',
+					trigger: 'axis',
-					status: 1,
+					axisPointer: {
+						type: 'shadow',
 					},
+				},
+				legend: {
+					textStyle: {
+						color: '#fff', //legend字体颜色
+					},
+				},
+				color: colorList,
+				grid: {
+					left: 20,
+					right: 20,
+					top: 30,
+					bottom: 50,
+					containLabel: true,
+				},
+				dataZoom: {
+					type: 'slider',
+					// start: 0,
+					// end: 50,
+					textStyle: {
+						color: '#fff',
+					},
+				},
+				xAxis: [
 					{
-					id: 5,
+						type: 'category',
-					name: '计划五',
+						data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
-					level: '三级',
+						axisLine: {
-					status: 3,
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
 					},
 				],
-		}
+				yAxis: [
+					{
+						name: '个',
+						splitLine: {
+							show: true,
+							//  改变轴线颜色
+							lineStyle: {
+								// 使用深浅的间隔色
+								color: ['rgba(255, 255, 255,.5)'],
+							},
+						},
+						axisLabel: {
+							formatter: '{value}',
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+				],
+				series: [
+					{
+						name: '隔热',
+						type: 'line',
+						smooth: false,
+						data: [200, 300, 200, 300, 200, 300, 200],
+						// itemStyle: {
+						// 	color: '#53C19D',
+						// },
+						symbol: 'none',
+					},
+					{
+						name: '总装',
+						type: 'line',
+						smooth: false,
+						// itemStyle: {
+						// 	color: '#8BB1ED',
+						// },
+						data: [300, 400, 300, 400, 300, 400, 300],
+						symbol: 'none',
+					},
+					{
+						name: '交付',
+						type: 'line',
+						smooth: false,
+						// itemStyle: {
+						// 	color: '#8BB1ED',
+						// },
+						data: [400, 500, 400, 500, 400, 500, 400],
+						symbol: 'none',
+					},
+					{
+						name: '装药',
+						type: 'line',
+						smooth: false,
+						// itemStyle: {
+						// 	color: '#8BB1ED',
+						// },
+						data: [500, 600, 500, 600, 500, 600, 500],
+						symbol: 'none',
+					},
+					{
+						name: '酯',
+						type: 'line',
+						smooth: false,
+						// itemStyle: {
+						// 	color: '#8BB1ED',
+						// },
+						data: [600, 700, 600, 700, 600, 700, 600],
+						symbol: 'none',
+					},
+				],
+			})
+		},
 	},
 }
 </script>