1044 lines
32 KiB
JavaScript
1044 lines
32 KiB
JavaScript
// echarts1 初始化
|
||
var dom1 = document.getElementById("echarts1");
|
||
let industryDataAxis = ["售前", "执行", "设计", "测试", "运维", "其他"]; // ;
|
||
let industryData = [56, 76, 72, 37, 55, 29];
|
||
|
||
var option1 = {
|
||
yAxis: {
|
||
type: "category",
|
||
data: industryDataAxis,
|
||
axisLabel: {
|
||
interval: 0, // 0：强制显示所有标签 1：隔一个标签显示一个
|
||
color: "#ddd",
|
||
},
|
||
axisTick: {
|
||
show: false, // 不显示坐标轴刻度线
|
||
},
|
||
inverse: true,
|
||
},
|
||
xAxis: {
|
||
type: "value",
|
||
axisLabel: {
|
||
color: "#ddd",
|
||
},
|
||
splitLine: {
|
||
show: true, //去除网格线
|
||
lineStyle: {
|
||
color: ["rgba(255,255,255,0.1)"],
|
||
height: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: industryData,
|
||
type: "bar",
|
||
// showBackground: true,
|
||
barWidth: 12,
|
||
itemStyle: {
|
||
normal: {
|
||
color: function (params) {
|
||
// build a color map as your need.
|
||
var colorList = [
|
||
// 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐变。
|
||
// offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
|
||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||
{
|
||
offset: 1,
|
||
color: "rgba(18,203,184)",
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: "rgba(95,252,216)",
|
||
},
|
||
]),
|
||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||
{
|
||
offset: 1,
|
||
color: "rgba(62,134,255)",
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: "rgba(95,220,255)",
|
||
},
|
||
]),
|
||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||
{
|
||
offset: 1,
|
||
color: "rgba(67,244,255)",
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: "rgba(141,252,255)",
|
||
},
|
||
]),
|
||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||
{
|
||
offset: 1,
|
||
color: "rgba(180,65,12)",
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: "rgba(234,89,5)",
|
||
},
|
||
]),
|
||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||
{
|
||
offset: 1,
|
||
color: "rgba(255,166,6)",
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: "rgba(255,213,81)",
|
||
},
|
||
]),
|
||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||
{
|
||
offset: 1,
|
||
color: "rgba(127,126,125)",
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: "rgba(176,176,176)",
|
||
},
|
||
]),
|
||
];
|
||
return colorList[params.dataIndex];
|
||
},
|
||
|
||
label: {
|
||
show: true,
|
||
position: "right",
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: "rgba(255,255,255)",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
},
|
||
// 创建第二条y轴做背景
|
||
{
|
||
data: [100, 100, 100, 100, 100, 100],
|
||
type: "bar",
|
||
// showBackground: true,
|
||
barWidth: 25,
|
||
barGap: "-150%", //柱状图偏移量
|
||
itemStyle: {
|
||
normal: {
|
||
color: "rgba(56,128,255,0.14)",
|
||
// borderColor: 'rgba(56,145,255,0.20)',
|
||
borderWidth: 4,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
// echarts1 渲染
|
||
var charts1 = echarts.init(dom1);
|
||
charts1.setOption(option1);
|
||
|
||
// echarts2 初始化
|
||
var dom2 = document.getElementById("echarts2");
|
||
|
||
var option2 = {
|
||
title: {
|
||
text: "",
|
||
subtext: "",
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
},
|
||
legend: {
|
||
data: ["走访", "试点", "签约"],
|
||
right: 20,
|
||
top: 25,
|
||
itemHeight: 10, //图标大小
|
||
itemWidth: 10,
|
||
icon: "rect",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: true, //左右不留白
|
||
axisLabel: {
|
||
color: "#fff",
|
||
},
|
||
axisTick: {
|
||
show: false, // 不显示坐标轴刻度线
|
||
},
|
||
data: ["2018", "2019", "2020", "2021", "2022"],
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisLabel: {
|
||
color: "#ddd",
|
||
},
|
||
splitLine: {
|
||
show: true, //去除网格线
|
||
lineStyle: {
|
||
color: ["rgba(255,255,255,0.1)"],
|
||
height: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "走访",
|
||
type: "line",
|
||
smooth: true,
|
||
// symbol:'arrow', //拐点样式
|
||
data: [13, 17, 19, 24, 21],
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#fff",
|
||
shadowBlur: 8,
|
||
shadowColor: "#25d5f0",
|
||
borderColor: "#00c1de",
|
||
borderWidth: 2,
|
||
backgroundColor: "transparent",
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "试点",
|
||
type: "line",
|
||
smooth: true,
|
||
data: [21, 26, 31, 39, 47],
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#00c1de",
|
||
shadowBlur: 8,
|
||
shadowColor: "#25d5f0",
|
||
borderColor: "#1DD7FF",
|
||
borderWidth: 2,
|
||
backgroundColor: "transparent",
|
||
},
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#1DD7FF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(0,0,0,0)",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "签约",
|
||
type: "line",
|
||
smooth: true,
|
||
data: [9, 19, 24, 28, 29],
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#1D61FF",
|
||
shadowBlur: 8,
|
||
shadowColor: "#25d5f0",
|
||
borderColor: "#00c1de",
|
||
borderWidth: 2,
|
||
backgroundColor: "transparent",
|
||
},
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#1D61FF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(0,0,0,0)",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
// echarts2 渲染
|
||
var charts2 = echarts.init(dom2);
|
||
charts2.setOption(option2);
|
||
|
||
// echarts3 初始化
|
||
var dom3 = document.getElementById("echarts3");
|
||
|
||
var option3 = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
//这里改变样式
|
||
formatter:
|
||
'<strong> {b0}月</strong> <br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #5470c6;"></span> <strong>{c0}</strong>台 <br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> <strong>{c1}</strong>万元',
|
||
},
|
||
legend: {
|
||
data: ["设备数量", "项目金额"],
|
||
right: 20,
|
||
top: 5,
|
||
itemHeight: 10, //图标大小
|
||
itemWidth: 10,
|
||
icon: "rect",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
yAxis: [
|
||
{
|
||
name: "单位：万元",
|
||
type: "value",
|
||
boundaryGap: [0, 0.01],
|
||
axisLabel: {
|
||
color: "#ddd",
|
||
},
|
||
splitLine: {
|
||
show: true, //去除网格线
|
||
lineStyle: {
|
||
color: ["rgba(255,255,255,0.1)"],
|
||
height: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "单位：万元",
|
||
type: "value",
|
||
boundaryGap: [0, 0.01],
|
||
axisLabel: {
|
||
color: "#ddd",
|
||
},
|
||
splitLine: {
|
||
show: true, //去除网格线
|
||
lineStyle: {
|
||
color: ["rgba(255,255,255,0.1)"],
|
||
height: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
xAxis: {
|
||
type: "category",
|
||
axisLabel: {
|
||
//在y轴的数据的值旁边拼接单位
|
||
color: "#ddd",
|
||
formatter: "{value} 月",
|
||
},
|
||
axisTick: {
|
||
show: false, // 不显示坐标轴刻度线
|
||
},
|
||
data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"],
|
||
},
|
||
series: [
|
||
{
|
||
name: "设备数量",
|
||
color: "#fff",
|
||
type: "bar",
|
||
yAxisIndex: 0,
|
||
barWidth: 6,
|
||
data: [256, 304, 328, 350, 358, 389, 421, 452, 486],
|
||
},
|
||
{
|
||
name: "项目金额",
|
||
type: "bar",
|
||
yAxisIndex: 1,
|
||
color: "#458AF4",
|
||
barWidth: 6,
|
||
data: [26, 48, 57, 65, 76, 79, 84, 90, 94],
|
||
},
|
||
],
|
||
};
|
||
// echarts3 渲染
|
||
var charts3 = echarts.init(dom3);
|
||
charts3.setOption(option3);
|
||
|
||
// 3D 圆环图
|
||
|
||
// 生成模拟 3D 饼图的配置项
|
||
// pieData（object）：饼图数据
|
||
// internalDiameterRatio（0~1之间的浮点数）：内径/外径的值（默认值 1/2），当该值等于 0 时，
|
||
// heigth配置每个数据生成的高度
|
||
function getPie3D(pieData, internalDiameterRatio, height) {
|
||
let series = [];
|
||
let sumValue = 0;
|
||
let startValue = 0;
|
||
let endValue = 0;
|
||
let legendData = [];
|
||
let k =
|
||
typeof internalDiameterRatio !== "undefined" ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
|
||
//console.log(k) //internalDiameterRatio==>2时,k=-0.3333333333333333
|
||
// 计算比例
|
||
let total = 0;
|
||
for (let i = 0; i < pieData.length; i++) {
|
||
pieData[i].value = Number(pieData[i].value);
|
||
// console.log(Number(pieData[i].value))
|
||
total += Number(pieData[i].value);
|
||
}
|
||
// console.log(total)
|
||
for (let i = 0; i < pieData.length; i++) {
|
||
pieData[i].proportion = parseFloat(pieData[i].value / total).toFixed(4);
|
||
// console.log(pieData[i].proportion)
|
||
}
|
||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||
for (let i = 0; i < pieData.length; i++) {
|
||
sumValue += pieData[i].value;
|
||
let seriesItem = {
|
||
name: typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
|
||
type: "surface",
|
||
parametric: true,
|
||
wireframe: {
|
||
show: false,
|
||
},
|
||
pieData: pieData[i],
|
||
pieStatus: {
|
||
selected: pieData[i].selected ? pieData[i].selected : false,
|
||
hovered: pieData[i].hovered ? pieData[i].hovered : false,
|
||
k: k,
|
||
},
|
||
};
|
||
|
||
if (typeof pieData[i].itemStyle != "undefined") {
|
||
let itemStyle = {};
|
||
|
||
typeof pieData[i].itemStyle.color != "undefined" ? (itemStyle.color = pieData[i].itemStyle.color) : null;
|
||
typeof pieData[i].itemStyle.opacity != "undefined" ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;
|
||
|
||
seriesItem.itemStyle = itemStyle;
|
||
}
|
||
series.push(seriesItem);
|
||
}
|
||
|
||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||
for (let i = 0; i < series.length; i++) {
|
||
height = pieData[i].height; //给每个扇区都添加独立高度
|
||
|
||
endValue = startValue + series[i].pieData.value;
|
||
// console.log(series[i]);
|
||
series[i].pieData.startRatio = startValue / sumValue;
|
||
series[i].pieData.endRatio = endValue / sumValue;
|
||
series[i].parametricEquation = getParametricEquation(
|
||
series[i].pieData.startRatio,
|
||
series[i].pieData.endRatio,
|
||
series[i].pieStatus.selected,
|
||
series[i].pieStatus.hovered,
|
||
k,
|
||
height ? series[i].pieData.proportion * height : 1 //自己自定义传入高度，每个类型按比例生成高度
|
||
// series[i].pieData.value ==>这个是饼图默认自己生成高度
|
||
// 1 设置为1所有的扇形高度都一样高
|
||
);
|
||
|
||
startValue = endValue;
|
||
|
||
legendData.push(series[i].name);
|
||
}
|
||
// console.log(series);
|
||
|
||
return series;
|
||
}
|
||
|
||
// startRatio（浮点数）: 当前扇形起始比例，取值区间[0, endRatio)
|
||
// endRatio（浮点数）: 当前扇形结束比例，取值区间(startRatio, 1]
|
||
// isSelected（布尔值）: 是否选中，效果参照二维饼图选中效果（单选）
|
||
// isHovered（布尔值）: 是否放大，效果接近二维饼图高亮（放大）效果（未能实现阴影）
|
||
// k（0~1之间的浮点数）：用于参数方程的一个参数，取值 0~1 之间，通过「内径 / 外径」的值换算而来。
|
||
//height配置3d扇形高度
|
||
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
|
||
// 计算
|
||
let midRatio = (startRatio + endRatio) / 2;
|
||
|
||
let startRadian = startRatio * Math.PI * 2;
|
||
let endRadian = endRatio * Math.PI * 2;
|
||
let midRadian = midRatio * Math.PI * 2;
|
||
|
||
// 如果只有一个扇形，则不实现选中效果。
|
||
if (startRatio === 0 && endRatio === 1) {
|
||
isSelected = false;
|
||
}
|
||
|
||
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
||
k = typeof k !== "undefined" ? k : 1 / 3;
|
||
|
||
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
||
let offsetX = isSelected ? Math.cos(midRadian) * 0.2 : 0;
|
||
let offsetY = isSelected ? Math.sin(midRadian) * 0.2 : 0;
|
||
|
||
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||
let hoverRate = isHovered ? 1.05 : 1;
|
||
|
||
// 返回曲面参数方程
|
||
return {
|
||
u: {
|
||
min: -Math.PI,
|
||
max: Math.PI * 3,
|
||
step: Math.PI / 32,
|
||
},
|
||
|
||
v: {
|
||
min: 0,
|
||
max: Math.PI * 2,
|
||
step: Math.PI / 20,
|
||
},
|
||
|
||
x: function (u, v) {
|
||
if (u < startRadian) {
|
||
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||
}
|
||
if (u > endRadian) {
|
||
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||
}
|
||
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||
},
|
||
|
||
y: function (u, v) {
|
||
if (u < startRadian) {
|
||
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||
}
|
||
if (u > endRadian) {
|
||
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||
}
|
||
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||
},
|
||
|
||
z: function (u, v) {
|
||
if (u < -Math.PI * 0.5) {
|
||
return Math.sin(u);
|
||
}
|
||
if (u > Math.PI * 2.5) {
|
||
return Math.sin(u);
|
||
}
|
||
return Math.sin(v) > 0 ? 1 * height : -1;
|
||
},
|
||
};
|
||
}
|
||
|
||
var optionData = [
|
||
{
|
||
name: "机电",
|
||
value: 10,
|
||
height: 13,
|
||
itemStyle: {
|
||
opacity: 0.2,
|
||
color: "#199BD7",
|
||
},
|
||
},
|
||
{
|
||
name: "注塑",
|
||
value: 13,
|
||
height: 7,
|
||
itemStyle: {
|
||
opacity: 0.2,
|
||
color: "#F7CD6F",
|
||
},
|
||
},
|
||
{
|
||
name: "卫浴",
|
||
value: 8,
|
||
height: 0,
|
||
itemStyle: {
|
||
opacity: 0.2,
|
||
color: "#EF5A05",
|
||
},
|
||
},
|
||
{
|
||
name: "汽摩配",
|
||
value: 7,
|
||
height: 5,
|
||
itemStyle: {
|
||
opacity: 0.2,
|
||
color: "#09C3A1",
|
||
},
|
||
},
|
||
{
|
||
name: "装备制造",
|
||
value: 6,
|
||
height: 7,
|
||
itemStyle: {
|
||
opacity: 0.2,
|
||
color: "#A7A7A7",
|
||
},
|
||
},
|
||
];
|
||
// 基于准备好的dom，初始化echarts实例
|
||
let dataList = []; //名称列表
|
||
let chartPanel = echarts.init(document.getElementById("chart-panel"));
|
||
for (let i = 0; i < optionData.length; i++) {
|
||
dataList.push(optionData[i].name);
|
||
delete optionData[i].itemStyle.opacity;
|
||
}
|
||
|
||
// 传入数据生成 option
|
||
let series = getPie3D(optionData, 2);
|
||
let option = {
|
||
tooltip: {
|
||
formatter: (params) => {
|
||
// console.log(params)
|
||
if (params.seriesName !== "mouseoutSeries" && params.seriesName !== "pie2d") {
|
||
return `<div style="padding:0 10px">${params.seriesName}：${(
|
||
option.series[params.seriesIndex].pieData.proportion * 100
|
||
).toFixed(2)}%</div>`;
|
||
}
|
||
},
|
||
},
|
||
legend: {
|
||
data: dataList,
|
||
orient: "vertical",
|
||
icon: "circle",
|
||
top: "3%",
|
||
itemGap: 10,
|
||
right: "right",
|
||
itemHeight: 10, //图标大小
|
||
itemWidth: 10,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
xAxis3D: {
|
||
min: -1,
|
||
max: 1,
|
||
},
|
||
yAxis3D: {
|
||
min: -1,
|
||
max: 1,
|
||
},
|
||
zAxis3D: {
|
||
min: -1,
|
||
max: 1,
|
||
},
|
||
grid3D: {
|
||
show: false, //是否显示三维笛卡尔坐标系。
|
||
boxHeight: 15, //三维笛卡尔坐标系在三维场景中的高度
|
||
top: "-32.5%",
|
||
left: "-10%",
|
||
// bottom: "80%",
|
||
// environment: "#021041", //背景
|
||
viewControl: {
|
||
//用于鼠标的旋转，缩放等视角控制
|
||
alpha: 30, //角度
|
||
distance: 300, //调整视角到主体的距离，类似调整zoom 重要
|
||
rotateSensitivity: 10, //设置为0无法旋转
|
||
zoomSensitivity: 3, //设置为0无法缩放
|
||
panSensitivity: 0, //设置为0无法平移
|
||
autoRotate: true, //自动旋转
|
||
},
|
||
},
|
||
series: series,
|
||
};
|
||
chartPanel.setOption(option);
|
||
|
||
var citys = ["路桥区", "椒江区", "台州市", "黄岩区", "临海市", "温岭市", "玉环市", "天台县", "仙居县", "三门县"];
|
||
var rollBox = $(".roll-box-move");
|
||
// 渲染最初5个
|
||
for (let i in citys) {
|
||
if (i < 5) {
|
||
rollBox.append(`<div class="roll-item roll-item${i}">${citys[i]}</div>`);
|
||
if (i == 0 || i == 4) {
|
||
$(`.roll-item${i}`).css({ opacity: 0.5 });
|
||
}
|
||
if (i == 2) {
|
||
$(`.roll-item${i}`).css({ color: "rgb(249,190,88)" });
|
||
}
|
||
}
|
||
}
|
||
// 减计算方法 当前位置 减多少 最大多少
|
||
function indexMinus(nowIndex, size, max) {
|
||
let num = nowIndex - size;
|
||
if (num <= -1) {
|
||
if (max == null) {
|
||
num = citys.length + (nowIndex - size);
|
||
} else {
|
||
num = max + (nowIndex - size);
|
||
}
|
||
}
|
||
return num;
|
||
}
|
||
// 加计算方法
|
||
function indexAdd(nowIndex, size) {
|
||
let num = nowIndex + size;
|
||
if (num >= citys.length) {
|
||
num = 0 - (citys.length - num);
|
||
}
|
||
return num;
|
||
}
|
||
|
||
var nowItemIndex = 5;
|
||
let delIndex;
|
||
/**
|
||
* 向上滚动
|
||
*/
|
||
var downItem = $("#upItem1,#upItem2");
|
||
downItem.click(function () {
|
||
// 到达首部
|
||
if (nowItemIndex == citys.length) nowItemIndex = 0;
|
||
rollBox = $(".roll-box-move");
|
||
// 创建元素同时给予带id的类名
|
||
rollBox.append(`<div class="roll-item roll-item${nowItemIndex}">${citys[nowItemIndex]}</div>`);
|
||
|
||
// 调用页面跳转方法
|
||
console.log(citys[indexMinus(nowItemIndex, 2)]);
|
||
|
||
nowItemIndex += 1;
|
||
// $('.roll-box-move').animate({ 'top': parseInt(rollBox.css("top"))-50 }, 100)
|
||
|
||
// console.log("向上", nowItemIndex, indexAdd(nowItemIndex, 5), indexAdd(nowItemIndex, 1), citys[nowItemIndex], citys);
|
||
|
||
// 设置透明度与选中字体颜色
|
||
$(`.roll-item`).css({ opacity: 1 });
|
||
$(`.roll-item${indexMinus(nowItemIndex, 1)} , .roll-item${indexAdd(nowItemIndex, 5)}`).css({ opacity: 0.5 });
|
||
$(`.roll-item`).css({ color: "white" });
|
||
$(`.roll-item${indexMinus(nowItemIndex, 3)}`).css({ color: "rgb(249,190,88)" });
|
||
// 隐藏元素
|
||
$(`.roll-item${indexMinus(nowItemIndex, 6)}`).hide(200);
|
||
});
|
||
|
||
/**
|
||
* 向下滚动
|
||
*/
|
||
var downItem = $("#downItem1,#downItem2");
|
||
downItem.click(function () {
|
||
if (nowItemIndex == 0) nowItemIndex = citys.length;
|
||
rollBox.prepend(
|
||
`<div class="roll-item roll-item${indexMinus(nowItemIndex, 6)}">${citys[indexMinus(nowItemIndex, 6)]}</div>`
|
||
);
|
||
rollBox.css({ top: parseInt(rollBox.css("top")) - 50 });
|
||
|
||
// 调用页面跳转方法
|
||
console.log(citys[indexMinus(nowItemIndex, 4)]);
|
||
|
||
nowItemIndex -= 1;
|
||
//向上滚动
|
||
$(".roll-box-move").animate({ top: parseInt(rollBox.css("top")) + 50 }, 200);
|
||
// 隐藏元素
|
||
$(`.roll-item${nowItemIndex}`).hide(200);
|
||
// console.log("向下", nowItemIndex, indexMinus(nowItemIndex, 7), indexAdd(nowItemIndex, 5), indexAdd(nowItemIndex, 1), citys[indexMinus(nowItemIndex, 7)], citys);
|
||
|
||
// 设置透明度与选中字体颜色
|
||
$(`.roll-item`).css({ opacity: 1 });
|
||
$(`.roll-item${indexMinus(nowItemIndex, 5)} , .roll-item${indexMinus(nowItemIndex, 1)}`).css({ opacity: 0.5 });
|
||
$(`.roll-item`).css({ color: "white" });
|
||
$(`.roll-item${indexMinus(nowItemIndex, 3)}`).css({ color: "rgb(249,190,88)" });
|
||
});
|
||
|
||
/**
|
||
* 伸缩项目进度盒子
|
||
*/
|
||
var cityPlanList = [
|
||
{
|
||
name: "浙江天信控股有限公司",
|
||
iconName: "天信",
|
||
dataList: [
|
||
{
|
||
year: "2021",
|
||
time: "09/30",
|
||
data: "二期研发实施",
|
||
},
|
||
{
|
||
year: "2021",
|
||
time: "09/27",
|
||
data: "相关车间看板订制",
|
||
},
|
||
{
|
||
year: "2021",
|
||
time: "08/31",
|
||
data: "平台需求修改、验收打款",
|
||
},
|
||
{
|
||
year: "2021",
|
||
time: "08/20",
|
||
data: "二期软件订制研发",
|
||
},
|
||
{
|
||
year: "2021",
|
||
time: "07/09",
|
||
data: "天信平台需求整理",
|
||
},
|
||
{
|
||
year: "2021",
|
||
time: "04/06",
|
||
data: "天信仪表商务详谈",
|
||
},
|
||
{
|
||
year: "2021",
|
||
time: "03/29",
|
||
data: "马扎克设备勘察",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: "浙江八环轴承股份有限公司",
|
||
iconName: "八环",
|
||
},
|
||
{
|
||
name: "台州市中豪机械有限公司",
|
||
iconName: "中豪",
|
||
},
|
||
{
|
||
name: "宁波五峰机械有限公司",
|
||
iconName: "五峰",
|
||
},
|
||
{
|
||
name: "杰克机床有限公司",
|
||
iconName: "杰克",
|
||
},
|
||
{
|
||
name: "浙江永球科技有限公司",
|
||
iconName: "永球",
|
||
},
|
||
];
|
||
|
||
// 遍历企业数据
|
||
for (let i in cityPlanList) {
|
||
let item = cityPlanList[i];
|
||
$(`.city-plan`).append(`
|
||
<div class="plan-item plan-item${i}">
|
||
<div class="name"><div class="city-icon city-icon${i}"></div>${item.name}<div class="position-icon"></div></div>
|
||
<ul id="plan-list">
|
||
</ul>
|
||
</div>
|
||
`);
|
||
|
||
// 遍历每个进度数据
|
||
for (let j in cityPlanList[0].dataList) {
|
||
let item = cityPlanList[0].dataList[j];
|
||
// 给ul 添加 li
|
||
$(`.plan-item${i} #plan-list`).append(`
|
||
<li><div class="icon">${j == 0 ? "▶" : ""}</div><div class="year">${item.year}</div><div class="time">${
|
||
item.time
|
||
}</div><div class="data">${item.data}</div></li>
|
||
`);
|
||
}
|
||
|
||
// 给企业数据添加展开事件
|
||
$(`.plan-item${i}`).click(function () {
|
||
let plan = $(`.plan-item${i}`);
|
||
let isShowPlan = plan.css("height") == "46px";
|
||
if (isShowPlan) {
|
||
console.log("调用显示");
|
||
// plan.css({ overflow: 'visible' });
|
||
$(`.plan-item${i}.plan-item`).animate({ height: 63 + 23 * cityPlanList[0].dataList.length }, 200, function () {
|
||
$(`.city-plan`).animate({ scrollTop: 43 * i }, 200);
|
||
});
|
||
$(`.plan-item${i}.plan-item`).css("background", "none");
|
||
// 添加坐标icon
|
||
$(`.plan-item${i} .position-icon`).css({ background: "url(./sc/坐标-fill.png) no-repeat" });
|
||
//给icon绑定跳转方法
|
||
$(`.plan-item${i} .position-icon`).click(function (e) {
|
||
console.log(item.name);
|
||
e.stopPropagation(); // 停止事件冒泡
|
||
});
|
||
} else {
|
||
console.log("调用隐藏");
|
||
// plan.css({ overflow: 'hidden' });
|
||
$(`.plan-item${i}.plan-item`).animate({ height: 46 }, 200, function () {
|
||
$(`.plan-item${i}.plan-item`).css("background-color", "rgba(0,28,88,.9)");
|
||
// 清除坐标icon
|
||
$(`.plan-item${i} .position-icon`).css({ background: "" });
|
||
//去除绑定的跳转方法
|
||
$(`.plan-item${i} .position-icon`).unbind("click");
|
||
});
|
||
// $('.rplan-item').stop(true,true).animate({},200).css({ overflow: 'hidden' });
|
||
}
|
||
});
|
||
}
|
||
|
||
//项目进度滚动
|
||
let showCityPlanIndex = 0;
|
||
setInterval(function () {
|
||
let i = showCityPlanIndex;
|
||
let back = i - 1 < 0 ? 5 : i - 1;
|
||
|
||
// 合闭
|
||
$(`.plan-item${back}.plan-item`).animate({ height: 46 }, 500, function () {
|
||
$(`.plan-item${back}.plan-item`).css("background-color", "rgba(0,28,88,.9)");
|
||
// 清除坐标icon
|
||
$(`.plan-item${back} .position-icon`).css({ background: "" });
|
||
//去除绑定的跳转方法
|
||
$(`.plan-item${back} .position-icon`).unbind("click");
|
||
});
|
||
|
||
// 展开
|
||
$(`.plan-item${i}.plan-item`).animate({ height: 63 + 23 * cityPlanList[0].dataList.length }, 500, function () {
|
||
$(`.city-plan`).animate({ scrollTop: 43 * i }, 500);
|
||
});
|
||
$(`.plan-item${i}.plan-item`).css("background", "none");
|
||
// 添加坐标icon
|
||
$(`.plan-item${i} .position-icon`).css({ background: "url(./sc/坐标-fill.png) no-repeat" });
|
||
//给icon绑定跳转方法
|
||
$(`.plan-item${i} .position-icon`).click(function (e) {
|
||
console.log(item.name);
|
||
e.stopPropagation(); // 停止事件冒泡
|
||
});
|
||
|
||
showCityPlanIndex++;
|
||
if (showCityPlanIndex > 5) showCityPlanIndex = 0;
|
||
}, 2500);
|
||
|
||
//数字加逗号处理方法
|
||
const toThousands = (num = 0) => {
|
||
return num.toString().replace(/\d+/, function (n) {
|
||
return n.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
|
||
});
|
||
};
|
||
//生成随机数方法
|
||
function getRandomInt(max, min) {
|
||
let data = Math.floor(Math.random() * max);
|
||
if (min != null) {
|
||
if (min > data) {
|
||
while (true) {
|
||
data = Math.floor(Math.random() * max);
|
||
if (min <= data) return data;
|
||
}
|
||
}
|
||
}
|
||
return data;
|
||
}
|
||
let numTimeData = 2064213;
|
||
let numGatherData = 1147741;
|
||
let todayGather = 614500;
|
||
let todayWarning = 5370;
|
||
let todayGatherOld = 145;
|
||
let todayWarningOld = 24;
|
||
setInterval(function () {
|
||
$("#numTimeData").text(toThousands((numTimeData += getRandomInt(15, 10))));
|
||
}, 1600);
|
||
setInterval(function () {
|
||
$("#numGatherData").text(toThousands((numGatherData += getRandomInt(40, 10))));
|
||
}, 1000);
|
||
setInterval(function () {
|
||
$("#todayGather").text(toThousands((todayGather += getRandomInt(40, 10))));
|
||
$("#todayGatherOld").text("+" + toThousands((todayGatherOld += getRandomInt(20, 5))));
|
||
}, 2100);
|
||
|
||
setInterval(function () {
|
||
$("#todayWarning").text(toThousands((todayWarning += getRandomInt(5, 1))));
|
||
$("#todayWarningOld").text("+" + toThousands((todayWarningOld += getRandomInt(4, 1))));
|
||
}, 15000);
|
||
|
||
// 最新项目自动滚动
|
||
let newItemBottomIndex = 1;
|
||
// 每一项之间间隔的px值
|
||
let newItemHeight = 65;
|
||
setInterval(function () {
|
||
// console.log("操控的元素是:", indexMinus(newItemBottomIndex, 2, 7), "位置为", (indexMinus(newItemBottomIndex, 2, 7) - 6))
|
||
//设置下一个待轮播元素的位置
|
||
$(`#new-item${indexMinus(newItemBottomIndex, 2, 7)}`).css({
|
||
bottom: (indexMinus(newItemBottomIndex, 2, 7) - 6) * newItemHeight,
|
||
});
|
||
//遍历每一个元素使bottom位置在原基础上加一格
|
||
for (let i = 0; i < 7; i++) {
|
||
let newItemBottom = $(`#new-item${i}`).css("bottom");
|
||
$(`#new-item${i}`).animate({ bottom: parseInt(newItemBottom) + newItemHeight }, 1000);
|
||
}
|
||
newItemBottomIndex += 1;
|
||
if (newItemBottomIndex > 7) newItemBottomIndex = 1;
|
||
}, 2000);
|
||
|
||
// 中下企业介绍小框内容
|
||
let firmIntroduceData = [
|
||
{
|
||
name: "杰克机床股份有限公司",
|
||
data: "杰克机床股份有限公司是杰克控股集团旗下继杰克缝纫机后的第二大主导产业，凭借杰克这一强势品牌，以资本为纽带，以科技为先导，以人才为依托，在机床业已初露锋芒，在短短几年内，杰克机床制造企业，不断提升自主研发产品的科技含量及附加值，逐步构建了哑铃战略管理模式，实现研发与营销同步，为客户提供更新颖、更先进、更具人性化产品和解决方案。",
|
||
},
|
||
{
|
||
name: "宁波五峰机械有限公司",
|
||
data: "宁波五峰机械有限公司创建于1992年10月，占地总面积60000平方米，建筑面积32000平方米，拥有比较全的机械设备，具有较强的高精度、高难度零配件加工能力，加工精度能够达到IT5级，主要产品是各种精密机械配件，如各类工业缝纫机零配件、电动工具零配件、汽车零配件等。公司已经通过ISO9001和ISO14001质量管理体系认证，并获有国家外经贸部颁发的自营进出口证书，获得浙江著名商标。公司拥有员工460人，研发人员 55人，获得宁波市工程技术中心称号，国家高新技术企业，产品核心技术获得授权发明专利3项，实用新型专利25项。",
|
||
},
|
||
|
||
{
|
||
name: "浙江八环轴承有限公司",
|
||
data: "浙江八环轴承有限公司（原台州市环宇轴承有限公司）始建于1996年，是浙江鼎利控股集团的骨干企业，占地面积35000余平方米，拥有资产28000多万元，员工600多人，其中具有中、高级职称的专业技术人员90余人，专业生产汽车轴承、摩托车轴承、通用机轴承、精密机床轴承和家电轴承，具有年产8000万套中小型轴承的生产能力，是国家级重点高新技术企业。",
|
||
},
|
||
{
|
||
name: "天信仪表集团有限公司",
|
||
data: "天信仪表集团有限公司，是金卡智能集团股份有限公司（A股股票代码：300349）旗下子公司。公司创建于1995年，注册资金1.28亿元，年纳税超1.2亿元，是国内流量仪表和燃气应用系统解决方案的专业服务商。是国家火炬计划重点高新技术企业、国家安全质量标准化二级企业、国家863计划项目承担单位，荣获全国五一劳动奖状、省著名商标、省名牌产品等荣誉称号。",
|
||
},
|
||
{
|
||
name: "台州市瑞达机械有限公司",
|
||
data: "台州市瑞达机械有限公司成立于1995年， 专注于汽车零配件行业20余年。2015年。开始给爱信宏达汽车零部件有限公司（日本独资） 供水泵机油泵和硅油风扇离合器等产品。",
|
||
},
|
||
];
|
||
|
||
// 切换企业小窗内容
|
||
// 1 front 前 0 back 后
|
||
let firmIntroduceDataSelect = 0;
|
||
let firmIntroduceDataIndex = 0;
|
||
$(`#flat-box-front .flat-box-title`).click(function () {
|
||
console.log(firmIntroduceData[4].name);
|
||
});
|
||
setInterval(function () {
|
||
let item = firmIntroduceData[firmIntroduceDataIndex];
|
||
let front = ["back", "front"][firmIntroduceDataSelect == 1 ? 0 : 1];
|
||
let back = ["back", "front"][firmIntroduceDataSelect];
|
||
|
||
// 后面元素添加数据
|
||
$(`#flat-box-${back} .flat-box-title`).text(item.name);
|
||
$(`#flat-box-${back} .flat-box-title`).unbind("click");
|
||
$(`#flat-box-${back} .flat-box-title`).click(function () {
|
||
console.log(item.name);
|
||
});
|
||
$(`#flat-box-${back} .flat-box-data .data-firm-data`).text(`${item.data}`);
|
||
|
||
// 获取元素原本top值 同时转int类型
|
||
// 后面元素移到前面
|
||
let nowBackLeft = parseInt($(`#flat-box-${back}`).css("left"));
|
||
$(`#flat-box-${back}`).animate({ left: nowBackLeft - 1300 }, 500);
|
||
|
||
// 前面元素左移 移后放回后面
|
||
let nowFrontLeft = parseInt($(`#flat-box-${front}`).css("left"));
|
||
$(`#flat-box-${front}`).animate({ left: nowFrontLeft - 1300 }, 500, function () {
|
||
$(`#flat-box-${front}`).css({ left: 1300 });
|
||
});
|
||
|
||
firmIntroduceDataIndex++;
|
||
firmIntroduceDataSelect == 1 ? (firmIntroduceDataSelect = 0) : (firmIntroduceDataSelect = 1);
|
||
if (firmIntroduceDataIndex >= firmIntroduceData.length) firmIntroduceDataIndex = 0;
|
||
}, 5 * 1000);
|
||
|
||
$(`.flat-box #next-button`).click(function () {
|
||
let item = firmIntroduceData[firmIntroduceDataIndex];
|
||
let front = ["back", "front"][firmIntroduceDataSelect == 1 ? 0 : 1];
|
||
let back = ["back", "front"][firmIntroduceDataSelect];
|
||
|
||
// 后面元素添加数据
|
||
$(`#flat-box-${back} .flat-box-title`).text(item.name);
|
||
$(`#flat-box-${back} .flat-box-title`).unbind("click");
|
||
$(`#flat-box-${back} .flat-box-title`).click(function () {
|
||
console.log(item.name);
|
||
});
|
||
$(`#flat-box-${back} .flat-box-data .data-firm-data`).text(`${item.data}`);
|
||
|
||
// 获取元素原本top值 同时转int类型
|
||
// 后面元素移到前面
|
||
let nowBackLeft = parseInt($(`#flat-box-${back}`).css("left"));
|
||
$(`#flat-box-${back}`).animate({ left: nowBackLeft - 1300 }, 500);
|
||
|
||
// 前面元素左移 移后放回后面
|
||
let nowFrontLeft = parseInt($(`#flat-box-${front}`).css("left"));
|
||
$(`#flat-box-${front}`).animate({ left: nowFrontLeft - 1300 }, 500, function () {
|
||
$(`#flat-box-${front}`).css({ left: 1300 });
|
||
});
|
||
|
||
firmIntroduceDataIndex++;
|
||
firmIntroduceDataSelect == 1 ? (firmIntroduceDataSelect = 0) : (firmIntroduceDataSelect = 1);
|
||
if (firmIntroduceDataIndex >= firmIntroduceData.length) firmIntroduceDataIndex = 0;
|
||
});
|